From 0b77e0cfeeb21ce547fadec75625cd07d311303d Mon Sep 17 00:00:00 2001
From: Amit Roy <amit.roy@sentientgeeks.com>
Date: Wed, 7 Aug 2024 10:53:40 +0530
Subject: [PATCH] Styles: side bar done and header

---
 src/app/globals.scss                        |   8 +-
 src/components/wrapper/dashboardWrapper.tsx | 100 ++++++++++++----
 src/utilities/svgConstant.tsx               | 120 ++++++++++++--------
 3 files changed, 157 insertions(+), 71 deletions(-)

diff --git a/src/app/globals.scss b/src/app/globals.scss
index 71c01ee..9f16bd8 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -2,7 +2,7 @@
 @use "../theme/sass/helper" as *;
 
 :root {
-  --bg_white: 0 0% 100%;
+  --bg_white: #ffffff;
   --background: 232 95% 7%;
   --foreground: 222.2 84% 4.9%;
 
@@ -14,7 +14,7 @@
 
   --primary: #6290cb; /* #6290CB */
   --primary_light: #dae7f9; /* #DAE7F9 */
-  --primary_bg_03: 230 68% 16%; /* #0D1645 */
+  --primary_Active_text: #6c96cf; /* #6C96CF */
   --inputPrimary: 227 49% 17%; /* #161F40 */
   --primary-foreground: 210 40% 98%;
 
@@ -24,6 +24,10 @@
   --secondary_bg_03: 231 41% 21%; /* #20274D */
   --secondary_bg_04: 224, 100%, 63%; /* #4175FF */
 
+  --primary_text_clr: #121926; /* #121926 */
+
+  --clr_gray_100: #f5f5f5; /* #F5F5F5 */
+
   --input-border-default: #e0e3e7;
   --input-border-hover: #b2bac2;
 
diff --git a/src/components/wrapper/dashboardWrapper.tsx b/src/components/wrapper/dashboardWrapper.tsx
index ba2f9f6..fdc46a1 100644
--- a/src/components/wrapper/dashboardWrapper.tsx
+++ b/src/components/wrapper/dashboardWrapper.tsx
@@ -1,12 +1,12 @@
 "use client"; // This ensures the file is a client component
 
 import * as React from "react";
-import AppBar from "@mui/material/AppBar";
+import AppBar, { AppBarProps } from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
+import Avatar from "@mui/material/Avatar";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
@@ -20,6 +20,7 @@ import { useState } from "react";
 import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
 import styles from "./DashboardWrapper.module.scss";
 import styled from "@emotion/styled";
+import { BUILDING, GEAR } from "@/utilities/svgConstant";
 
 const drawerWidth = 260;
 
@@ -32,10 +33,37 @@ const CssList = styled(List)({
       "& .MuiListItemIcon-root": {
         minWidth: "34px",
       },
+      "&:hover": {
+        backgroundColor: "var(--primary_light)",
+        color: "var(--primary_Active_text)",
+
+        "& .MuiListItemIcon-root": {
+          color: "var(--primary_Active_text)",
+        },
+      },
+    },
+    "&.Mui-selected": {
+      backgroundColor: "transparent",
+      "& .MuiButtonBase-root": {
+        backgroundColor: "var(--primary_light)",
+        color: "var(--primary_Active_text)",
+        "& .MuiListItemIcon-root": {
+          color: "var(--primary_Active_text)",
+        },
+      },
     },
   },
 });
 
+const CssAppBar = styled(AppBar)<AppBarProps>({
+  boxShadow: "none",
+  backgroundColor: "var(--bg_white)",
+  color: "var(--primary_text_clr)",
+  "& .MuiToolbar-root": {
+    minHeight: "72px",
+  },
+});
+
 interface Props {
   window?: () => Window;
   children: React.ReactNode;
@@ -61,10 +89,11 @@ export default function DashboardWrapper(props: Props) {
       setMobileOpen(!mobileOpen);
     }
   };
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
   const drawer = (
     <>
-      <Toolbar>
+      <Toolbar sx={{ minHeight: "72px !important" }}>
         <img
           src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG}
           alt="Logo"
@@ -74,10 +103,15 @@ export default function DashboardWrapper(props: Props) {
       {/* <Divider /> */}
       <CssList sx={{ padding: "0", paddingInline: "18px" }}>
         {["Project Table"].map((text, index) => (
-          <ListItem key={text} disablePadding>
+          <ListItem
+            key={text}
+            disablePadding
+            selected={activeIndex === index} // Add this line to make the item "active"
+            onClick={() => setActiveIndex(index)} // Add this line to handle click events
+          >
             <ListItemButton>
               <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                {index % 2 === 0 ? <BUILDING /> : <BUILDING />}
               </ListItemIcon>
               <ListItemText primary={text} />
             </ListItemButton>
@@ -98,28 +132,56 @@ export default function DashboardWrapper(props: Props) {
       className={styles.dashboard_main}
     >
       <CssBaseline />
-      <AppBar
+      <CssAppBar
         position="fixed"
         sx={{
           width: { md: `calc(100% - ${drawerWidth}px)` },
           ml: { md: `${drawerWidth}px` },
         }}
       >
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{ mr: 2 }}
+        <Toolbar sx={{ width: "100%", justifyContent: "space-between" }}>
+          <Box display={"flex"} alignItems={"center"}>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={handleDrawerToggle}
+              sx={{ mr: 2, display: { md: "none" } }}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" noWrap component="div">
+              Responsive drawer
+            </Typography>
+          </Box>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            gap={1}
+            sx={{
+              background: "var(--clr_gray_100)",
+              padding: "8px",
+              borderRadius: "30px",
+            }}
           >
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="h6" noWrap component="div">
-            Responsive drawer
-          </Typography>
+            <Avatar
+              sx={{
+                width: 34,
+                height: 34,
+                cursor: "pointer",
+                background: "var(--primary_light)",
+                color: "var(--primary_Active_text)",
+                fontSize: "0.8rem",
+              }}
+              alt="Remy Sharp"
+              src="/static/images/avatar/1.jpg"
+            />
+            <GEAR
+              sx={{ color: "var(--primary_Active_text)", fontSize: "1.8rem" }}
+            />
+          </Box>
         </Toolbar>
-      </AppBar>
+      </CssAppBar>
 
       <Box
         component="nav"
diff --git a/src/utilities/svgConstant.tsx b/src/utilities/svgConstant.tsx
index 37732f9..4a56e9c 100644
--- a/src/utilities/svgConstant.tsx
+++ b/src/utilities/svgConstant.tsx
@@ -1,26 +1,8 @@
-import exp from "constants";
-import { JSX } from "react";
-
-function createSvgIcon(arg0: JSX.Element, arg1: string) {
-  throw new Error("Function not implemented.");
-}
-
-export const EYE_SLASH = () => {
-  return (
-    <>
-      <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
-        <path
-          d="M13.7408 5.25904L16.6248 2.375M13.7408 5.25904C15.2275 6.20904 16.3232 7.48362 16.981 8.38692C17.1964 8.68221 17.304 8.83025 17.3785 9.11525C17.4295 9.36894 17.4295 9.63027 17.3785 9.88396C17.304 10.1697 17.1964 10.3178 16.981 10.6123C15.8023 12.2313 13.2183 15.0417 9.49979 15.0417C7.85709 15.0417 6.43604 14.493 5.25884 13.741M13.7408 5.25904L10.6192 8.38058M5.25884 13.741L2.37479 16.625M5.25884 13.741L8.38038 10.6194M10.6192 8.38058C10.9076 8.6792 11.0672 9.07916 11.0636 9.4943C11.06 9.90945 10.8935 10.3066 10.5999 10.6001C10.3064 10.8937 9.90924 11.0602 9.4941 11.0638C9.07895 11.0674 8.679 10.9078 8.38038 10.6194M10.6192 8.38058L8.38038 10.6194M3.05563 11.875C2.68529 11.475 2.33873 11.0537 2.01775 10.6131C1.80242 10.3178 1.69475 10.1698 1.62034 9.88475C1.56926 9.63106 1.56926 9.36973 1.62034 9.11604C1.69475 8.83025 1.80242 8.68221 2.01775 8.38771C3.19734 6.76875 5.78134 3.95833 9.49979 3.95833C9.96688 3.95833 10.4165 4.00267 10.848 4.08342"
-          stroke="#7E90B0"
-          strokeWidth="1.35714"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </>
-  );
-};
+// Import necessary functions and types
+import React from "react";
+import { createSvgIcon } from "@mui/material/utils";
 
+// Define the SVG component using createSvgIcon
 export const BUILDING = createSvgIcon(
   <svg
     width="24"
@@ -32,59 +14,97 @@ export const BUILDING = createSvgIcon(
     <path
       d="M1 22H23"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M19.78 22.01V17.55"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M19.8 10.89C18.58 10.89 17.6 11.87 17.6 13.09V15.36C17.6 16.58 18.58 17.56 19.8 17.56C21.02 17.56 22 16.58 22 15.36V13.09C22 11.87 21.02 10.89 19.8 10.89Z"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M2.09998 22V6.03003C2.09998 4.02003 3.10003 3.01001 5.09003 3.01001H11.32C13.31 3.01001 14.3 4.02003 14.3 6.03003V22"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M5.79999 8.25H10.75"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M5.79999 12H10.75"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M8.25 22V18.25"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>,
   "Building"
 );
+
+export const GEAR = createSvgIcon(
+  <svg
+    width="26"
+    height="27"
+    viewBox="0 0 26 27"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_700_1370)">
+      <path
+        d="M11.198 5.62532C11.6334 3.72906 14.1861 3.72906 14.6215 5.62532C14.6868 5.91019 14.8149 6.17474 14.9952 6.39743C15.1756 6.62012 15.4032 6.79467 15.6594 6.90686C15.9157 7.01905 16.1934 7.06571 16.4699 7.04305C16.7465 7.0204 17.0141 6.92906 17.2509 6.77647C18.8277 5.76138 20.6335 7.66844 19.6729 9.33577C19.5287 9.58593 19.4424 9.86851 19.421 10.1606C19.3996 10.4526 19.4437 10.7458 19.5498 11.0165C19.6558 11.2871 19.8208 11.5275 20.0313 11.718C20.2418 11.9086 20.4919 12.044 20.7612 12.1132C22.5557 12.5732 22.5557 15.2708 20.7612 15.7308C20.4917 15.7998 20.2413 15.9351 20.0306 16.1257C19.8198 16.3163 19.6546 16.5568 19.5485 16.8276C19.4423 17.0984 19.3981 17.3918 19.4196 17.6841C19.441 17.9763 19.5275 18.259 19.6719 18.5093C20.6325 20.1756 18.8277 22.0837 17.2499 21.0686C17.0132 20.9162 16.7457 20.825 16.4694 20.8024C16.193 20.7798 15.9155 20.8265 15.6594 20.9385C15.4033 21.0506 15.1758 21.2249 14.9955 21.4474C14.8151 21.6698 14.687 21.9341 14.6215 22.2187C14.1861 24.1149 11.6334 24.1149 11.198 22.2187C11.1327 21.9338 11.0047 21.6693 10.8243 21.4466C10.6439 21.2239 10.4164 21.0493 10.1601 20.9371C9.90384 20.825 9.62613 20.7783 9.34958 20.8009C9.07302 20.8236 8.80544 20.9149 8.56861 21.0675C6.99177 22.0826 5.18602 20.1756 6.14664 18.5082C6.29083 18.2581 6.37713 17.9755 6.39852 17.6834C6.41992 17.3914 6.3758 17.0982 6.26975 16.8275C6.1637 16.5569 5.99872 16.3165 5.78822 16.126C5.57771 15.9354 5.32763 15.8 5.05828 15.7308C3.26378 15.2708 3.26378 12.5732 5.05828 12.1132C5.32787 12.0442 5.57822 11.9089 5.78896 11.7183C5.9997 11.5277 6.16488 11.2872 6.27105 11.0164C6.37722 10.7456 6.42138 10.4522 6.39994 10.1599C6.3785 9.86771 6.29206 9.58495 6.14766 9.33469C5.18705 7.66844 6.99177 5.7603 8.56963 6.77539C9.59156 7.43195 10.916 6.85098 11.198 5.62532Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.9097 17.159C14.6029 17.159 15.9755 15.7086 15.9755 13.9194C15.9755 12.1302 14.6029 10.6797 12.9097 10.6797C11.2165 10.6797 9.84393 12.1302 9.84393 13.9194C9.84393 15.7086 11.2165 17.159 12.9097 17.159Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_700_1370">
+        <rect
+          width="24.5263"
+          height="25.917"
+          fill="white"
+          transform="translate(0.646606 0.960938)"
+        />
+      </clipPath>
+    </defs>
+  </svg>,
+  "Gear"
+);