total layout design for an admin panel

src/components/common/breadcrum.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { BiChevronRight } from "react-icons/bi";
+import { Link, useLocation } from "react-router-dom";
+
+const Breadcrumb = () => {
+  const location = useLocation();
+  const pathSegments = location.pathname
+    .split("/")
+    .filter((segment) => segment !== "");
+  const noindexpage = ["Home"];
+  return (
+    <div className="breadcrumb hidden md:flex  gap-1 items-center font-bold">
+      {pathSegments.map((segment, index) => (
+        <React.Fragment key={segment}>
+          {index > 0 && <BiChevronRight size={20} />}
+          {index === pathSegments.length - 1 ? (
+            <span className="capitalize ">
+              {segment === "dashboard" ? "Overview" : segment}
+            </span>
+          ) : noindexpage?.includes(segment) ? (
+            <span className="capitalize text-[#595959] pointer-events-none">
+              {segment}
+            </span>
+          ) : (
+            <Link
+              to={`/${pathSegments.slice(0, index + 1).join("/")}`}
+              className="capitalize text-[#595959]"
+            >
+              {segment}
+            </Link>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default Breadcrumb;

src/components/common/header.tsx

@@ -1,12 +1,15 @@
 import React from "react";
 import { AiOutlineMenu } from "react-icons/ai";
+import Breadcrumb from "./breadcrum";
+import { MdNotifications } from "react-icons/md";
 const Header = ({
   collapse,
   setCollapse,
 }: {
   collapse: boolean;
   setCollapse: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
+  const badge = 2;
   return (
     <div className="header-wrapper h-20  pl-5 pr-7   sm:px-10 w-full  flex items-center justify-between">
       <div className="flex  gap-10 dark:text-black  items-center">
@@ -18,6 +21,30 @@ const Header = ({
         >
           <AiOutlineMenu size={25} />
         </div>
+        <Breadcrumb />
+      </div>
+      <div className="flex gap-6 items-center">
+        <div className="h-6 w-6 relative">
+          <img src="/notifications.png" alt="" className="h-6 w-6" />
+          <div
+            className={`badge min-w-2 text-white absolute font-semibold -top-2 ${
+              badge < 9 ? "-right-2 w-4" : badge < 99 ? "-right-3" : "-right-5"
+            } grow-0 rounded-full px-[3px] py-[1px] text-xs bg-orange-700`}
+          >
+            {badge}
+          </div>
+        </div>
+        <div className="flex gap-1  items-center">
+          <img
+            src="/deleteable/srk.jpg"
+            alt=""
+            className="h-10 w-10 rounded-full overflow-hidden"
+          />
+          <div className="flex flex-col ">
+            <h1 className="text-white text-sm leading-4">Shah Rukh Khan</h1>
+            <p className="text-[#FFFFFF] text-xs opacity-75">Actor</p>
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/common/layout.tsx

@@ -7,7 +7,7 @@ const Layout = () => {
   const [collapse, setCollapse] = React.useState(false);
   return (
     <div className="w-full font-nunito relative  flex min-h-screen h-auto justify-start bg-white">
-      <SideBar collapse={collapse} />
+      <SideBar collapse={collapse} setCollapse={setCollapse} />
       <div className=" bg-[#f5f5f5] w-full  relative min-h-screen ">
         <div className={`sticky w-full border  z-50 top-0`}>
           <Header collapse={collapse} setCollapse={setCollapse} />

src/components/common/sidebar.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
-
 import { BiChevronDown, BiChevronUp } from "react-icons/bi";
 import { menudata } from "src/utils/staticdata/sidebar-data";
 const SideBar = ({
   collapse,
   setCollapse,
 }: {
   collapse: boolean;
-  setCollapse?: React.Dispatch<React.SetStateAction<boolean>>;
+  setCollapse: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const [open, setOpen] = React.useState("");
 
@@ -22,7 +21,12 @@ const SideBar = ({
         to={"/"}
         className="sidebar-logo-section h-20 border-b flex items-center justify-center"
       >
-        <img src="./aitclogo.png" alt="Aitc logo" height={50} width={141} />
+        <img
+          src={!collapse ? "/aitclogo.png" : "/aitcsmall-logo.png"}
+          alt="Aitc logo"
+          height={50}
+          width={!collapse ? 141 : 50}
+        />
       </Link>
       <div className="w-full flex p-4 flex-col">
         {menudata?.map(
@@ -37,17 +41,31 @@ const SideBar = ({
                       } else {
                         setOpen(item?.name);
                       }
+                      if (collapse) {
+                        setCollapse(!collapse);
+                      }
                     }}
                     className="w-full cursor-pointer hover:bg-slate-100  h-10 flex justify-between items-center"
                   >
                     <div className="flex items-center gap-2">
                       {item?.icon}
-                      <h1 className="font-semibold ">{item?.name}</h1>
+                      <h1 className={`font-semibold ${collapse && "hidden"}`}>
+                        {item?.name}
+                      </h1>
                     </div>
-                    {item?.name === open ? <BiChevronUp /> : <BiChevronDown />}
+                    {!collapse && (
+                      <>
+                        {" "}
+                        {item?.name === open ? (
+                          <BiChevronUp />
+                        ) : (
+                          <BiChevronDown />
+                        )}
+                      </>
+                    )}
                   </div>
 
-                  {item?.name === open && (
+                  {item?.name === open && !collapse && (
                     <>
                       {item?.submenu?.map((submenu: any) => (
                         <Link
@@ -65,12 +83,22 @@ const SideBar = ({
             } else {
               return (
                 <Link
-                  key={item?.name}
+                  onClick={() => {
+                    if (open !== "") {
+                      setOpen("");
+                    } else {
+                      setOpen(item?.name);
+                    }
+                  }}
                   to={item?.path}
-                  className="w-full cursor-pointer hover:bg-slate-100  h-10 flex items-center gap-2"
+                  className="w-full cursor-pointer hover:bg-slate-100  h-10 flex justify-between items-center"
                 >
-                  {item?.icon}
-                  <h1 className="font-semibold ">{item?.name}</h1>
+                  <div className="flex items-center gap-2">
+                    {item?.icon}
+                    <h1 className={`font-semibold ${collapse && "hidden"}`}>
+                      {item?.name}
+                    </h1>
+                  </div>
                 </Link>
               );
             }

src/route.tsx

@@ -4,19 +4,25 @@ import { createBrowserRouter } from "react-router-dom";
 
 import Partners from "./pages/Home/partners";
 import Layout from "./components/common/layout";
+import Testimonial from "./pages/Home/testimonial";
+import Dashboard from "./pages/dashboard";
 
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,
     children: [
+      {
+        path: "dashboard",
+        element: <Dashboard />,
+      },
       {
         path: "home/partners",
         element: <Partners />,
       },
       {
         path: "home/testimonial",
-        element: <Partners />,
+        element: <Testimonial />,
       },
     ],
   },