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

Leave a Reply

Your email address will not be published.