@campxdev/react-blueprint 0.1.7 → 0.1.8

package/.storybook/preview.tsx

@@ -22,7 +22,9 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [withThemeProvider],
+  tags: ["autodocs"]
 };
 
 export default preview;

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.18",
-    "@mui/material": "^5.15.18",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/material": "^5.14.11",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
+    "react-error-boundary": "^3.1.4",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
@@ -54,21 +55,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.4.0",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/addon-mdx-gfm": "^8.1.1",
-    "@storybook/addon-onboarding": "^8.1.1",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/preset-create-react-app": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-webpack5": "^8.1.1",
-    "@storybook/test": "^8.1.1",
     "@types/js-cookie": "^3.0.5",
+    "@chromatic-com/storybook": "^1.4.0",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/addon-mdx-gfm": "^8.1.4",
+    "@storybook/addon-onboarding": "^8.1.4",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/preset-create-react-app": "^8.1.4",
+    "@storybook/react": "^8.1.4",
+    "@storybook/react-webpack5": "^8.1.4",
+    "@storybook/test": "^8.1.4",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.1.1",
+    "storybook": "^8.1.4",
     "webpack": "^5.91.0"
   }
 }

package/src/App.tsx

@@ -1,11 +1,17 @@
 import "./App.css";
+import { AppHeader, AppsMenu } from "./components/export";
 import Providers from "./contexts/Providers";
 
 function App() {
   return (
     <Providers>
       {/* <AppHeader clientLogo={""} fullName={""} userBoxActions={[]} /> */}
-      <></>
+      <AppHeader
+        appsMenu={<AppsMenu apps={[]} />}
+        clientLogo={""}
+        fullName={""}
+        userBoxActions={[]}
+      />
     </Providers>
   );
 }

package/src/assets/images/icons.tsx

@@ -191,3 +191,126 @@ export const ClogWheelIcon = () => {
     </svg>
   );
 };
+
+export const RightIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="vuesax_linear_logout"
+    data-name="vuesax/linear/logout"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g id="logout">
+      <g
+        id="Group_5120"
+        data-name="Group 5120"
+        transform="translate(3.614 9.381)"
+      >
+        <path
+          id="Vector"
+          d="M0,5.363,2.682,2.682,0,0"
+          transform="translate(8.045)"
+          fill="none"
+          stroke="#292d32"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-2"
+          data-name="Vector"
+          d="M0,0H10.653"
+          transform="translate(0 2.682)"
+          fill="none"
+          stroke="#292d32"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+      </g>
+      <path
+        id="Vector-3"
+        data-name="Vector"
+        d="M0,16.76A8.015,8.015,0,0,0,8.38,8.38,8.015,8.015,0,0,0,0,0"
+        transform="translate(12.246 3.62)"
+        fill="none"
+        stroke="#292d32"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+      />
+      <path
+        id="Vector-4"
+        data-name="Vector"
+        d="M0,24H24V0H0Z"
+        transform="translate(0 0)"
+        fill="none"
+        opacity="0"
+      />
+    </g>
+  </svg>
+);
+export const LeftIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g
+      id="vuesax_linear_logout"
+      data-name="vuesax/linear/logout"
+      transform="translate(-364 -444)"
+    >
+      <g id="logout">
+        <g
+          id="Group_5120"
+          data-name="Group 5120"
+          transform="translate(373.659 453.381)"
+        >
+          <path
+            id="Vector"
+            d="M2.682,5.363,0,2.682,2.682,0"
+            transform="translate(0)"
+            fill="none"
+            stroke="#292d32"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M10.653,0H0"
+            transform="translate(0.073 2.682)"
+            fill="none"
+            stroke="#292d32"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </g>
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M8.38,16.76A8.015,8.015,0,0,1,0,8.38,8.015,8.015,0,0,1,8.38,0"
+          transform="translate(367.374 447.62)"
+          fill="none"
+          stroke="#292d32"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M0,0H24V24H0Z"
+          transform="translate(388 468) rotate(180)"
+          fill="none"
+          opacity="0"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/src/components/DropDownMenu/MenuItemButton.tsx

@@ -5,6 +5,7 @@ import { StyledMenuItem } from "./styles";
 export type MenuItemButtonProps = {
   icon?: ReactNode;
   label: ReactNode;
+  sx?: any;
   onClick: () => void;
 };
 
@@ -12,14 +13,10 @@ export const MenuItemButton = ({
   icon,
   label,
   onClick,
-  ...props
+  sx = {},
 }: MenuItemButtonProps) => {
   return (
-    <StyledMenuItem
-      sx={{ minWidth: "180px", width: "100%" }}
-      onClick={onClick}
-      {...props}
-    >
+    <StyledMenuItem sx={sx} onClick={onClick}>
       {icon && <ListItemIcon>{icon}</ListItemIcon>}
       <Typography variant="subtitle3">{label}</Typography>
     </StyledMenuItem>

package/src/components/DropDownMenu/styles.tsx

@@ -19,7 +19,7 @@ export const StyledIconButton = styled(IconButton, {
 export const StyledMenuItem = styled(MenuItem)(({}) => ({
   display: "flex",
   alignItems: "center",
-  height: "50px",
+  padding: "10px 16px",
   gap: "5px",
   "& .MuiListItemIcon-root": {
     minWidth: "24px",

package/src/components/Layout/Header/AppHeader.stories.tsx

@@ -19,6 +19,10 @@ const meta: Meta<typeof AppHeader> = {
       control: "text",
       description: "The full name of the user.",
     },
+    designation: {
+      control: "text",
+      description: "The Designation of the user.",
+    },
     profileUrl: {
       control: "text",
       description: "The URL of the user's profile photo.",
@@ -60,6 +64,7 @@ export const Primary: Story = {
   args: {
     clientLogo: "https://via.placeholder.com/150",
     fullName: "John Doe",
+    designation: "Head of the Department",
     appsMenu: (
       <AppsMenu
         apps={[
@@ -78,9 +83,6 @@ export const Primary: Story = {
       { label: "Action 1", onClick: () => alert("Action 1 clicked") },
       { label: "Action 2", onClick: () => alert("Action 2 clicked") },
     ],
-    headerSx: {
-      position: "relative",
-    },
   },
 };
 
@@ -90,14 +92,12 @@ export const WithNoAppsMenu: Story = {
   args: {
     clientLogo: "https://via.placeholder.com/150",
     fullName: "John Doe",
+    designation: "Head of the Department",
     appsMenu: <AppsMenu apps={[]} />,
     userBoxActions: [
       { label: "Action 1", onClick: () => alert("Action 1 clicked") },
       { label: "Action 2", onClick: () => alert("Action 2 clicked") },
     ],
-    headerSx: {
-      position: "relative",
-    },
   },
 };
 
@@ -107,6 +107,7 @@ export const WithActions: Story = {
   args: {
     clientLogo: "https://via.placeholder.com/150",
     fullName: "John Doe",
+    designation: "Head of the Department",
     appsMenu: (
       <AppsMenu
         apps={[
@@ -133,9 +134,6 @@ export const WithActions: Story = {
       { label: "Action 1", onClick: () => alert("Action 1 clicked") },
       { label: "Action 2", onClick: () => alert("Action 2 clicked") },
     ],
-    headerSx: {
-      position: "relative",
-    },
   },
 };
 
@@ -145,6 +143,7 @@ export const WithCustomHeaderActions: Story = {
   args: {
     clientLogo: "https://via.placeholder.com/150",
     fullName: "John Doe",
+    designation: "Head of the Department",
     appsMenu: (
       <AppsMenu
         apps={[
@@ -164,9 +163,6 @@ export const WithCustomHeaderActions: Story = {
       { label: "Action 1", onClick: () => alert("Action 1 clicked") },
       { label: "Action 2", onClick: () => alert("Action 2 clicked") },
     ],
-    headerSx: {
-      position: "relative",
-    },
   },
 };
 
@@ -176,6 +172,7 @@ export const WithClogWheel: Story = {
   args: {
     clientLogo: "https://via.placeholder.com/150",
     fullName: "John Doe",
+    designation: "Head of the Department",
     appsMenu: (
       <AppsMenu
         apps={[

package/src/components/Layout/Header/AppHeader.tsx

@@ -15,6 +15,7 @@ export interface AppHeaderProps {
   cogWheelMenu?: ReactNode[];
   customHeaderActions?: ReactNode;
   fullName: string;
+  designation?: string;
   profileUrl?: string;
   userBoxActions: {
     label: ReactNode;
@@ -31,6 +32,7 @@ export const AppHeader = ({
   actions = [],
   appsMenu,
   clientLogo,
+  designation,
   cogWheelMenu = [],
   customHeaderActions,
   fullName,
@@ -55,6 +57,7 @@ export const AppHeader = ({
             <HeaderActions
               cogWheelMenu={cogWheelMenu}
               fullName={fullName}
+              designation={designation}
               userBoxActions={userBoxActions}
               profileUrl={profileUrl}
               actions={actions}

package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx

@@ -8,12 +8,14 @@ import { DropDownMenu } from "../../../DropDownMenu/DropDownMenu";
 const CogWheelMenu = ({ menu }: { menu: ReactNode[] }) => {
   return (
     <>
-      <Divider
-        orientation="vertical"
-        variant="middle"
-        flexItem
-        sx={{ height: "20px" }}
-      />
+      <div>
+        <Divider
+          orientation="vertical"
+          variant="middle"
+          flexItem
+          sx={{ height: "20px" }}
+        />
+      </div>
 
       <DropDownMenu
         anchor={({ open }) => (

package/src/components/Layout/Header/HeaderActions/HeaderActions.tsx

@@ -9,6 +9,7 @@ import UserBox from "./UserBox";
 export interface HeaderActionsProps {
   cogWheelMenu: ReactNode[];
   fullName: string;
+  designation?: string;
   userBoxActions: {
     label: ReactNode;
     icon?: ReactNode;
@@ -22,40 +23,42 @@ export interface HeaderActionsProps {
 const HeaderActions = ({
   cogWheelMenu,
   fullName,
+  designation,
   userBoxActions,
   profileUrl = "",
   actions = [],
   profileSx = {},
 }: HeaderActionsProps) => {
   return (
-    <Stack direction="row" gap={6}>
-      <Stack direction="row" gap={1}>
-        <IconButton
-          href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
-          target="_blank"
-        >
-          <HelpIcon />
-        </IconButton>
+    <Stack direction="row" gap={1} alignItems={"center"}>
+      <IconButton
+        href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
+        target="_blank"
+      >
+        <HelpIcon />
+      </IconButton>
 
-        {actions.map((action, index) => (
-          <>
+      {actions.map((action, index) => (
+        <>
+          <div>
             <Divider
               orientation="vertical"
               variant="middle"
               flexItem
-              sx={{ height: "25px" }}
+              sx={{ height: "20px" }}
             />
-            {action}
-          </>
-        ))}
-        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-        <UserBox
-          fullName={fullName}
-          actions={userBoxActions}
-          profileUrl={profileUrl}
-          profileSx={profileSx}
-        />
-      </Stack>
+          </div>
+          {action}
+        </>
+      ))}
+      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+      <UserBox
+        fullName={fullName}
+        designation={designation}
+        actions={userBoxActions}
+        profileUrl={profileUrl}
+        profileSx={profileSx}
+      />
     </Stack>
   );
 };

package/src/components/Layout/Header/HeaderActions/UserBox.tsx

@@ -1,6 +1,8 @@
+import { Stack, Typography } from "@mui/material";
 import { ReactNode } from "react";
 import { DropDownMenu } from "../../../DropDownMenu/DropDownMenu";
-import { StyledAvatar } from "../styles/styles";
+import { MenuItemButton } from "../../../DropDownMenu/MenuItemButton";
+import { StyledAvatar, StyledTypography } from "../styles/styles";
 // import {
 //   activeDevices,
 //   changePassword,
@@ -26,11 +28,13 @@ const getStartingLetters = (text: string) => {
 
 export default function UserBox({
   fullName,
+  designation = "",
   actions,
   profileUrl,
   profileSx = {},
 }: {
   fullName: string;
+  designation?: string;
   actions: {
     label: ReactNode;
     icon?: ReactNode;
@@ -47,71 +51,42 @@ export default function UserBox({
           {getStartingLetters(fullName)}
         </StyledAvatar>
       )}
-      menu={[]} // menu={
-      //   customActions?.length
-      //     ? customActions
-      //     : [
-      //         ...actions,
-      //         {
-      //           label: "My Profile",
-      //           actionType: "dialog",
-      //           icon: (
-      //             <img style={{ marginRight: "10px" }} src={profile.default} />
-      //           ),
-      //           content: ({ close }) => <MyProfile close={close} />,
-      //           dialogProps: {
-      //             maxWidth: "xl",
-      //             PaperProps: {
-      //               sx: {
-      //                 padding: 0,
-      //               },
-      //             },
-      //           },
-      //         },
-      //         {
-      //           label: "Active Devices",
-      //           actionType: "dialog",
-      //           icon: (
-      //             <img
-      //               style={{ marginRight: "10px" }}
-      //               src={activeDevices.default}
-      //             />
-      //           ),
-      //           content: ({ close }) => <ActiveDevices close={close} />,
-      //           contentTitle: "Active Devices",
-      //           dialogProps: {
-      //             maxWidth: "lg",
-      //             PaperProps: {
-      //               sx: {
-      //                 padding: 0,
-      //               },
-      //             },
-      //           },
-      //         },
-      //         {
-      //           label: "Change Password",
-      //           actionType: "dialog",
-      //           icon: (
-      //             <img
-      //               style={{ marginRight: "10px" }}
-      //               src={changePassword.default}
-      //             />
-      //           ),
-      //           content: ({ close }) => <ChangePassword close={close} />,
-      //           contentTitle: "Change Password",
-      //         },
-      //         {
-      //           label: "Logout",
-      //           icon: (
-      //             <img
-      //               style={{ marginRight: "10px" }}
-      //               src={logoutIcon.default}
-      //             />
-      //           ),
-      //           onClick: logout,
-      //         },
-      //       ]
-      // }
+      menu={[
+        <MenuItemButton
+          label={
+            <Stack gap={0.5}>
+              <StyledTypography variant="subtitle3">Account</StyledTypography>
+              <Stack direction={"row"} gap={1}>
+                <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
+                  {getStartingLetters(fullName)}
+                </StyledAvatar>
+                <Stack>
+                  <Typography variant="subtitle3">{fullName}</Typography>
+                  <Typography variant="caption">{designation}</Typography>
+                </Stack>
+              </Stack>
+            </Stack>
+          }
+          onClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />,
+        <MenuItemButton
+          label={
+            <Stack gap={0.5}>
+              <Typography variant="subtitle3">Account</Typography>
+              <Stack>
+                <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
+                  {getStartingLetters(fullName)}
+                </StyledAvatar>
+              </Stack>
+            </Stack>
+          }
+          onClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />,
+      ]}
     />
   );
 }

package/src/components/Layout/Header/styles/styles.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, styled } from "@mui/material";
+import { Avatar, Box, Typography, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 
 export const StyledContainer = styled(Box)(({ theme }) => ({
@@ -8,15 +8,7 @@ export const StyledContainer = styled(Box)(({ theme }) => ({
   justifyContent: "space-between",
   height: "60px",
   margin: "auto",
-  "@media (min-width: 768px)": {
-    width: "770px",
-  },
-  "@media (min-width: 1024px)": {
-    width: "1025px",
-  },
-  "@media (min-width: 1200px)": {
-    width: "1280px",
-  },
+  width: "90%",
 }));
 
 export const StyledHeader = styled("header")(({ theme }) => ({
@@ -62,8 +54,16 @@ export const StyledImageWrapper = styled(Box)(() => ({
 }));
 
 export const StyledAvatar = styled(Avatar)(({ theme }) => ({
-  // background: theme.palette.secondary.main,
-  // cursor: "pointer",
-  // height: "45px",
-  // width: "45px",
+  background: theme.palette.background.default,
+  cursor: "pointer",
+  height: "42px",
+  width: "42px",
+  border: `1px solid ${theme.palette.primary.main}`,
+  fontSize: "1rem",
+  fontWeight: "600",
+  color: theme.palette.primary.main,
+}));
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
 }));

package/src/components/Layout/LayoutWrapper/LayoutWrapper.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof LayoutWrapper> = {
+  title: "Layout/LayoutWrapper",
+  component: LayoutWrapper,
+  tags: ["autodocs"],
+  // argTypes: {
+  //   menu: {
+  //     control: "object",
+  //     description: "Menu items to be displayed in the side navigation.",
+  //   },
+  // },
+};
+
+export default meta;
+type Story = StoryObj<typeof LayoutWrapper>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
+  args: {
+    menu: [
+      { name: "Item 1", path: "/" },
+      { name: "Item 2", path: "/item2" },
+    ],
+    title: "Home",
+    children: <>hi</>,
+  },
+};

package/src/components/Layout/LayoutWrapper/LayoutWrapper.tsx

@@ -0,0 +1,64 @@
+import { Box, IconButton, Toolbar, Typography } from "@mui/material";
+
+import MenuIcon from "@mui/icons-material/Menu";
+import { useState } from "react";
+import { LeftIcon, RightIcon } from "../../../assets/images/icons";
+import { SideNavigation } from "../SideNavigation/SideNavigation";
+
+export interface LayoutWrapperProps {
+  title?: string;
+  children: React.ReactNode;
+  showIcon?: boolean;
+  menu?: any;
+}
+export const LayoutWrapper = ({
+  children,
+  title,
+  showIcon = true,
+  menu,
+}: LayoutWrapperProps) => {
+  const [open, setOpen] = useState<boolean>(
+    window.innerWidth > 1024 ? true : false
+  );
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+
+  const handleDrawer = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <Box width={"100%"}>
+      <Toolbar sx={{ paddingLeft: "0px !important" }}>
+        {showIcon && (
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawer}
+            edge="start"
+            sx={{ mr: 0.5 }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            {open && isHovered ? (
+              <LeftIcon />
+            ) : !open && isHovered ? (
+              <RightIcon />
+            ) : (
+              <MenuIcon />
+            )}
+          </IconButton>
+        )}
+        <Typography variant="subtitle1" noWrap>
+          {title}
+        </Typography>
+      </Toolbar>
+
+      <SideNavigation
+        menu={menu}
+        children={children}
+        open={open}
+        handleDrawer={handleDrawer}
+      />
+    </Box>
+  );
+};

package/src/components/Layout/SideNavigation/SideNavigation.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { SideNavigation, SideNavigationProps } from "./SideNavigation";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof SideNavigation> = {
+  title: "Layout/SideNavigation",
+  component: SideNavigation,
+  tags: ["autodocs"],
+  argTypes: {
+    menu: {
+      control: "object",
+      description: "Menu items to be displayed in the side navigation.",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SideNavigation>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: SideNavigationProps) => <SideNavigation {...args} />,
+  args: {
+    menu: [
+      { label: "Item 1", path: "/" },
+      { label: "Item 2", path: "/item2" },
+    ],
+  },
+};

package/src/components/Layout/SideNavigation/SideNavigation.tsx

@@ -0,0 +1,111 @@
+import { Box, ListItemIcon, ListItemText, Stack } from "@mui/material";
+import { useMatch, useResolvedPath } from "react-router-dom";
+import { Typography } from "../../Typography/Typography";
+import {
+  Main,
+  StyledDrawer,
+  StyledLinkButton,
+  StyledList,
+  StyledListItem,
+  StyledListItemButton,
+} from "./styles/styles";
+
+export interface SideNavigationProps {
+  menu?: any;
+  children: React.ReactNode;
+  open?: any;
+  handleDrawer?: any;
+}
+
+export interface MenuItemProps {
+  menuItem: {
+    name: string;
+    path: string;
+    icon: any;
+    permissionKey: string;
+    iconType: string;
+  };
+  index: number;
+}
+
+export const SideNavigation = ({
+  menu,
+  children,
+  open,
+  handleDrawer,
+}: SideNavigationProps) => {
+  return (
+    <Stack gap="20px" direction={"row"}>
+      <StyledDrawer
+        variant={window.innerWidth > 1024 ? "persistent" : "temporary"}
+        anchor="left"
+        open={open}
+        onClose={handleDrawer}
+      >
+        <StyledList>
+          {menu?.map((item: any, index: number) => (
+            <MenuItem menuItem={item} index={index} key={index} />
+          ))}
+        </StyledList>
+      </StyledDrawer>
+      <Main open={open}>{children}</Main>
+    </Stack>
+  );
+};
+
+const MenuItem = ({ menuItem, index }: MenuItemProps) => {
+  const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
+
+  let resolved = useResolvedPath(path);
+  // const permissions = PermissionsStore.useState((s) => s).permissions
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  // const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
+
+  // if (!hasAccess) return null
+
+  return (
+    <StyledListItem key={path} disablePadding match={match}>
+      <StyledLinkButton
+        to={path}
+        style={{ width: "100%" }}
+        // onClick={() =>
+        //   // sideNavStore.update((s) => {
+        //   //   s.active = index
+        //   // })
+        // }
+      >
+        <StyledListItemButton>
+          <ListItemIcon
+            sx={{
+              minWidth: "16px",
+              marginRight: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Box
+              sx={{
+                minWidth: "16px",
+                marginRight: "8px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {/* <GetSidenavIconByType
+                  iconType={iconType}
+                  color={match ? '#323167' : '#000'}
+                /> */}
+              {/* {getSidenavIconByType(iconType, 'red')} */}
+            </Box>
+          </ListItemIcon>
+          <ListItemText
+            primary={<Typography variant="subtitle3">{name}</Typography>}
+          />
+        </StyledListItemButton>
+      </StyledLinkButton>
+    </StyledListItem>
+  );
+};

package/src/components/Layout/SideNavigation/styles/styles.tsx

@@ -0,0 +1,84 @@
+import { Drawer, List, ListItem, ListItemButton, styled } from "@mui/material";
+import { Link } from "react-router-dom";
+const drawerWidth: number = 240;
+
+export const StyledDrawer = styled(Drawer)(() => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  "& .MuiDrawer-paper": {
+    width: drawerWidth,
+    boxSizing: "border-box",
+    position: "unset",
+    transition: "none !important",
+    borderRight: "none !important",
+    borderRadius: "5px",
+  },
+  "@media (max-width: 1024px)": {
+    "& .MuiDrawer-paper": {
+      borderRadius: "0px",
+    },
+  },
+}));
+
+export const StyledList = styled(List)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  height: "calc(100vh - 120px)",
+  paddingTop: "20px",
+}));
+
+interface StyledListItemProps {
+  match: any;
+}
+
+export const StyledListItem = styled(ListItem)<StyledListItemProps>(
+  ({ theme, match }) => ({
+    backgroundColor: match ? theme.palette.secondary.main : "none",
+  })
+);
+export const StyledListItemButton = styled(ListItemButton)(() => ({
+  alignItems: "center",
+  display: "flex",
+  paddingBottom: "4px",
+  paddingTop: "4px",
+}));
+
+export const StyledLinkButton = styled(Link)({
+  textDecoration: "none",
+});
+
+export const Main = styled("main", {
+  shouldForwardProp: (prop) => prop !== "open",
+})<{
+  open?: boolean;
+}>(({ theme, open }) => ({
+  padding: "25px",
+  transition: theme.transitions.create("margin", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: `-${drawerWidth}px`,
+  ...(open && {
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  }),
+  width: "100%",
+  height: "calc(100vh - 120px)",
+  overflowY: "auto",
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: "5px",
+  "&::-webkit-scrollbar": {
+    width: "0.4em",
+    height: "0.4em",
+  },
+
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "3px",
+  },
+  "@media (max-width: 1024px)": {
+    marginLeft: 0,
+  },
+}));

package/src/components/Modals/DialogButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react/*";
 import DialogButton, { DialogButtonProps } from "./DialogButton";
 
@@ -94,12 +94,7 @@ export const WithMaxWidthMd: Story = {
     ),
     content: ({ close }: { close: (e: any) => void }) => (
       <>
-        <Box
-          sx={{
-            height: "500px",
-            width: "100px",
-          }}
-        ></Box>
+        <Typography> Hello</Typography>
       </>
     ),
     dialogProps: {

package/src/themes/commonTheme.ts

@@ -75,6 +75,7 @@ export const getCommonTheme = (mode: Theme) => {
             padding: 0,
             "& li": {
               borderBottom: "1212121A",
+              minHeight: "55px",
               ":hover": {
                 backgroundColor: "rgba(0, 0, 0, 0.025)",
               },