React Create Dashboard Layout with Side Menu, Header & Content Area

React Create Dashboard layout
βΆ Understand dependencies first
"dependencies": { "bootstrap": "^4.6.0", "jquery": "^3.6.0", "react": "^17.0.2", "react-bootstrap": "^1.5.2", "react-fontawesome": "^1.7.1", "react-icons": "^4.2.0", "react-pro-sidebar": "^0.6.0", "react-scripts": "4.0.3", "reactstrap": "^8.9.0" },
π‘ Install react-pro-sidebar
https://www.npmjs.com/package/react-pro-sidebar
π‘ Install react icons to get more icons
https://react-icons.github.io/react-icons/icons?name=fa
π‘ See reactstrap official documents
https://reactstrap.github.io/components/alerts/
π‘ You can install React FontAwesome from the below link
https://www.npmjs.com/package/react-fontawesome
π» You can create a new react project with the below command
npx create-react-app my-new-app
π index.js
index.js file is automatically created by React and this is starting file from where the application starts. It contains App.js
file which is the second main file to start development.
We have added an import of bootstrap.css file to available bootstrap CSS.
import "bootstrap/dist/css/bootstrap.css"; import React from "react"; import App from "./App"; import "./index.css"; ReactDOM.render( <React.Fragment> <App /> </React.Fragment>, document.getElementById("root") );
π Header.js
Header.js – let’s create a header of the web page that will contain the Logo, Title, and User account icon and with some options like log out.
We have designed this Header with react-bootstrap library and react icons. You can find the official document of Navbar here.
https://reactstrap.github.io/components/navbar/
import React from "react"; import { AiOutlineUser } from "react-icons/ai"; import { Nav, Navbar, NavbarBrand, NavbarText, NavItem, NavLink, } from "reactstrap"; const Header = () => { return ( <div> <Navbar color="danger" light expand="md"> <NavbarBrand href="/">React Application</NavbarBrand> <Nav className="mr-auto" navbar> <NavItem> <NavLink href="/components/">Components</NavLink> </NavItem> <NavItem> <NavLink href="https://github.com/reactstrap/reactstrap"> GitHub </NavLink> </NavItem> </Nav> <NavbarText> <div> <AiOutlineUser></AiOutlineUser> </div> </NavbarText> </Navbar> </div> ); }; export default Header;
π SideNavigation.js
To create a side menu navigation bar, we have used a third party npm package ProSidebar
. We can create Parent Menu, Child Menus, and sub-menus using this package. We also created a SidebarHeader
that contains menu icon for expand and collapse feature.
import { useState } from "react"; import { AiOutlineMenu } from "react-icons/ai"; import { FaGem, FaHeart } from "react-icons/fa"; import { Menu, MenuItem, ProSidebar, SidebarHeader, SubMenu, } from "react-pro-sidebar"; import "react-pro-sidebar/dist/css/styles.css"; import { Link } from "react-router-dom"; const SideNavigation = () => { const [collapsed, setCollapsed] = useState(false); // added styles const styles = { sideBarHeight: { height: "100vh", }, menuIcon: { float: "right", margin: "10px", }, }; const onClickMenuIcon = () => { setCollapsed(!collapsed); }; return ( <ProSidebar style={styles.sideBarHeight} collapsed={collapsed}> <SidebarHeader> <div style={styles.menuIcon} onClick={onClickMenuIcon}> <AiOutlineMenu /> </div> </SidebarHeader> <Menu iconShape="square"> <MenuItem icon={<FaGem />}> Dashboard</MenuItem> <MenuItem icon={<FaGem />}>Users</MenuItem> <SubMenu title="Reports" icon={<FaHeart />}> <MenuItem>Track Report</MenuItem> <MenuItem>Inventory Report</MenuItem> <MenuItem>Customer Report</MenuItem> </SubMenu> <SubMenu title="Account" icon={<FaHeart />}> <MenuItem>Permissions</MenuItem> <MenuItem>Settings</MenuItem> </SubMenu> <SubMenu title="Email" icon={<FaHeart />}> <MenuItem>Notification</MenuItem> </SubMenu> </Menu> </ProSidebar> ); }; export default SideNavigation;
π App.js
This is the file where we have put all other files using Bootstrap Row Col layout.
import Header from "./components/template/Header"; import SideNavigation from "./components/template/SideNavigation"; import { Col, Row } from "reactstrap"; function App() { const styles = { contentDiv: { display: "flex", }, contentMargin: { marginLeft: "10px", width: "100%", }, }; return ( <> <Row> <Col> <Header></Header> </Col> </Row> <div style={styles.contentDiv}> <SideNavigation></SideNavigation> <div style={styles.contentMargin}> <h1 style={{ padding: "20%" }}>This is Content Area</h1> </div> </div> </> ); } export default App;
π‘Β JAVASCRIPT
βΒ How to draw Canvas Image, Line & Circle With HTML & JavaScript
βΒ Konva JS Event Handling and Get Overlapped Shapes where clicked
βΒ JavaScript Increment & Decrement Input Output Questions & What is x++ & var x = x++ ???
βΒ JavaScript Rotate 2D matrix 90 degrees clockwise | Top Interview Question
βΒ HashTable Data Structure in JavaScript with Add Delete & Search Algorithms
βΒ Trie Data Structure β Insert Search Delete & Print Program with JavaScript
βΒ Top JavaScript Commonly asked Algorithms in Interview
βΒ JavaScript String Permutation Program with nice explanation
React Create Dashboard layout
One thought on “React Create Dashboard Layout with Side Menu, Header & Content Area”