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;