Блог

 import {React,useState,useEffect} from 'react' import MenuItem from './MenuItem';    const MenuItems = [  {  name: 'Home', exact: true,  to: `/`},  {  name: 'Feature-1',  to: `/feature-1`},  {  name: 'Feature-2',  to:`/feature-2`,   subMenus: [  {name: "sub-menu-1", to: '/feature-2/submenu-1'},  {name: "sub-menu-2", to: '/feature-2/submenu-2'},  {name: "sub-menu-3", to: '/feature-2/submenu-3'}  ],  },  {  name: 'Feature-3',  to:`/feature-3`,   subMenus: [{name: "sub-menu-1"},{name: "sub-menu-2"},{name: "sub-menu-3"}],  },  {  name: 'Feature-4',  to:`/feature-4`,   subMenus: [{name: "sub-menu-1"},{name: "sub-menu-2"},{name: "sub-menu-3"}],  },  {  name: 'Feature-5',   to: `/feature-5`  }, ];  const Navbar = (props) =gt; {   const [inactive, setInactive] = useState(true);    useEffect(() =gt; {  if(inactive) {  document.querySelectorAll(".sub-menu").forEach((el) =gt; {  el.classList.remove("active");  });  }   props.onCollapse(inactive);  }, [inactive]);    return (  lt;div className={`side-navbar ${inactive ? "inactive" : ""}`}gt;   lt;div className="top-section"gt;  lt;div onClick={() =gt; {setInactive(!inactive)}} className="menu-btn"gt;  {inactive ? (  lt;i class="bx bx-menu"gt;lt;/igt;  ) : (  lt;i class='bx bx-x'gt;lt;/igt; )}   lt;/divgt;  lt;/divgt;   lt;div className="search-box"gt;   lt;button className="search-btn"gt;  lt;i class='bx bx-search' gt;lt;/igt;  lt;/buttongt;  lt;input type="text" placeholder="search" /gt;  lt;/divgt;    lt;div className="divider"gt;lt;/divgt;   lt;div className="main-menu"gt;  lt;ulgt;  {  MenuItems.map((menuItem, index) =gt; (  lt;MenuItem  key={index}  name={menuItem.name}  exact={menuItem.exact}  to={menuItem.to}  subMenus={menuItem.subMenus || []}  onClick={() =gt; {  if(inactive){  setInactive(false);  }  }}  /gt;  ))  }  {/* lt;ligt;  lt;a className="menu-item"gt;  lt;div className="menu-icon"gt;  lt;i class='bx bx-grid-alt'gt;lt;/igt;  lt;/divgt;  lt;spangt;Feature-1lt;/spangt;   lt;/agt;  lt;/ligt;   lt;MenuItem  name = {" Feature-2 "}  subMenus = {[  {name: "sub-menu-1"},{name: "sub-menu-2"},{name: "sub-menu-3"}  ]}   /gt;    lt;ligt;  lt;a className="menu-item"gt;  lt;div className="menu-icon"gt;  lt;i class='bx bx-grid-alt'gt;lt;/igt;  lt;/divgt;  lt;spangt;Feature-3lt;/spangt;  lt;i class='bx bxs-down-arrow'gt;lt;/igt;  lt;/agt;  lt;ul className="sub-menu"gt;  lt;ligt; lt;agt;sub-menu-1lt;/agt; lt;/ligt;  lt;ligt; lt;agt;sub-menu-2lt;/agt; lt;/ligt;  lt;ligt; lt;agt;sub-menu-3lt;/agt; lt;/ligt;  lt;/ulgt;  lt;/ligt;  lt;ligt;  lt;a className="menu-item"gt;  lt;div className="menu-icon"gt;  lt;i class='bx bx-grid-alt'gt;lt;/igt;  lt;/divgt;  lt;spangt;Feature-4lt;/spangt;  lt;i class='bx bxs-down-arrow'gt;lt;/igt;  lt;/agt;  lt;ul className="sub-menu"gt;  lt;ligt; lt;agt;sub-menu-1lt;/agt; lt;/ligt;  lt;ligt; lt;agt;sub-menu-2lt;/agt; lt;/ligt;  lt;ligt; lt;agt;sub-menu-3lt;/agt; lt;/ligt;  lt;/ulgt;  lt;/ligt; */}    lt;/ulgt;   lt;/divgt;    lt;/divgt;  ); };   export default Navbar; 

 import {React,useState} from 'react'; import { Link } from "react-router-dom";   const MenuItem = (props) =gt; {    const{ name, subMenus, to } = props;  const [expand, setExpand] = useState(false);  const [inactive, setInactive] = useState(false);    return (  lt;li onClick={ (props.onClick) }gt;  lt;Link to={to} onClick={() =gt; setExpand(!expand)} className="menu-item"gt;  lt;div className="menu-icon"gt;  lt;i class='bx bx-grid-alt'gt;lt;/igt;  lt;/divgt;  lt;a onClick={()=gt; setInactive(!inactive)}gt;  lt;spangt;{name}lt;/spangt;{/*onClick should be added here*/}  lt;/agt;  lt;span className="hover-name"gt;{name}lt;/spangt;  {  subMenus amp;amp; subMenus.length gt; 0 ? (  lt;div className = "drop-down"gt;  lt;i class='bx bxs-down-arrow'gt;lt;/igt;  lt;/divgt;  ) : null  }   lt;/Linkgt;  {  subMenus amp;amp; subMenus.length gt; 0 ?(  lt;ul className={`sub-menu ${expand ? 'active' : ""}`}gt;  {subMenus.map((menu, index) =gt; (  lt;li key={index}gt;   lt;Link to={menu.to}gt;{menu.name}lt;/Linkgt; {/*onClick to move a particular page.*/}  lt;/ligt;  ))}  lt;/ulgt;  ) : null  }    lt;/ligt;  );  };      export default MenuItem; 

 import React from "react"; import {Tabs , Button} from 'antd'; import 'antd/dist/antd.css';  const { TabPane } = Tabs;    class Tabbar extends React.Component {  constructor(props) {  super(props)   this.state = {  focusingPaneKey: '',  openingPaneKeys: [],  }  }   openPane = (paneKey) =gt; {  this.setState(({ ...state }) =gt; {  if (!state.openingPaneKeys.includes(paneKey)) {  state.openingPaneKeys = [...state.openingPaneKeys, paneKey]  }   state.focusingPaneKey = paneKey  return state  })  }   closePane = (paneKey) =gt; {   this.setState(({ ...state }) =gt; {  if (paneKey === state.focusingPaneKey) {  const paneKeyIndex = state.openingPaneKeys.indexOf(paneKey)  state.focusingPaneKey = state.openingPaneKeys[paneKeyIndex - 1]  }   state.openingPaneKeys = state.openingPaneKeys.filter((openingPaneKey) =gt; openingPaneKey !== paneKey)   return state  })  }   handleTabsEdit = (key, action) =gt; {  if (action === 'remove') {  this.closePane(key)  }  }   render() {  const { panes } = this.props  const keysOfPane = Object.keys(panes)   return (  lt;div className="tab-section"gt;  lt;div style={{ marginBottom: 16 }}gt;  {keysOfPane.map((key) =gt; (  lt;Button key={key} onClick={() =gt; this.openPane(key)}gt;  ADD Tab-{key}  lt;/Buttongt;  ))}  lt;/divgt;  lt;Tabs  hideAdd  onChange={this.openPane}  activeKey={this.state.focusingPaneKey}  type="editable-card"  onEdit={this.handleTabsEdit}  gt;  {this.state.openingPaneKeys  .map((key) =gt; panes[key])  .map((pane) =gt; (  lt;TabPane tab={pane.title} key={pane.key}gt;  {pane.content}  lt;/TabPanegt;  ))}  lt;/Tabsgt;  lt;/divgt;  )  } }  const panes = {  1: { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' },  2: { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' },  3: { key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' }, }  export default Tabbar;