@campxdev/react-blueprint 1.1.2 → 1.1.4

package/.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["autodocs"]
+  "cSpell.words": ["autodocs", "Campx"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -1,5 +1,10 @@
 import "./App.css";
-import { AppHeader, Button, UnAuthorized } from "./components/export";
+import {
+  AppHeader,
+  Button,
+  SearchBar,
+  UnAuthorized,
+} from "./components/export";
 import Providers from "./contexts/Providers";
 
 function App() {
@@ -19,6 +24,7 @@ function App() {
           </Button>
         }
       />
+      <SearchBar onSearch={() => {}} value={""} placeholder="Search by Name" />
     </Providers>
   );
 }

package/src/components/Assets/Icons/IconComponents/ArrowBackIcon.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from "@mui/material";
+
+export const ArrowBackIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 17"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.06696 7.4994L1.06698 7.50248C1.06829 7.68471 1.13715 7.85967 1.25971 7.99374L1.26442 8.00159L1.28182 8.01899L7.14849 13.8857L7.14851 13.8857C7.28603 14.0232 7.47252 14.1004 7.66698 14.1004C7.86143 14.1004 8.04792 14.0232 8.18544 13.8857L8.18549 13.8856C8.32296 13.7481 8.4002 13.5616 8.4002 13.3672C8.4002 13.1727 8.32296 12.9862 8.18549 12.8487L8.18546 12.8487L2.83782 7.50104L8.18492 2.15447L8.18495 2.15444C8.32243 2.01692 8.39966 1.83043 8.39966 1.63597C8.39966 1.44152 8.32243 1.25502 8.18495 1.1175L8.18491 1.11746C8.04739 0.979983 7.8609 0.902753 7.66644 0.902753C7.47199 0.902753 7.2855 0.979983 7.14798 1.11746L7.14795 1.11748L1.28129 6.98415L1.25834 7.0071L1.25355 7.01668C1.13502 7.14927 1.06844 7.32079 1.06696 7.4994Z"
+        stroke="#121212"
+        stroke-width="0.4"
+        fill={color}
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/CollapseIcon.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from "@mui/material";
+
+export const CollapseIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.38873 7.31504L2.38918 7.31504L13.6116 7.31504H13.612V7.31504C13.7938 7.31586 13.9678 7.38842 14.0963 7.51693C14.2249 7.64545 14.2974 7.81951 14.2982 8.00125L14.2982 8.00216C14.2974 8.1839 14.2249 8.35796 14.0963 8.48648C13.9678 8.61499 13.7938 8.68755 13.612 8.68837L13.6116 8.68837L2.38758 8.68837H2.38685C2.20544 8.68706 2.03185 8.61428 1.90374 8.48582M2.38873 7.31504L1.90374 8.48582M2.38873 7.31504C2.20698 7.31586 2.03292 7.38842 1.9044 7.51693C1.77589 7.64545 1.70333 7.81951 1.70251 8.00125L1.70251 8.00216M2.38873 7.31504L1.70251 8.00216M1.90374 8.48582C1.77563 8.35736 1.70333 8.18358 1.70251 8.00216M1.90374 8.48582L1.70251 8.00216"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/ExpandIcon.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from "@mui/material";
+
+export const ExpandIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.31406 13.6108L7.31406 13.6113C7.31488 13.793 7.38744 13.9671 7.51596 14.0956C7.64447 14.2241 7.81854 14.2967 8.00028 14.2975L8.00118 14.2975C8.1826 14.2967 8.35638 14.2244 8.48484 14.0963C8.6133 13.9682 8.68608 13.7946 8.6874 13.6131V13.6124L8.6874 2.38842L8.68739 2.38797C8.68657 2.20623 8.61401 2.03217 8.4855 1.90365C8.35699 1.77514 8.18292 1.70258 8.00118 1.70175L8.00028 1.70176C7.81854 1.70258 7.64447 1.77514 7.51596 1.90365C7.38744 2.03217 7.31488 2.20623 7.31406 2.38797H7.31406V2.38842L7.31406 13.6108Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.2"
+      />
+      <path
+        d="M2.38873 7.31504L2.38918 7.31504L13.6116 7.31504H13.612V7.31504C13.7938 7.31586 13.9678 7.38842 14.0963 7.51693C14.2249 7.64545 14.2974 7.81951 14.2982 8.00125L14.2982 8.00216C14.2974 8.1839 14.2249 8.35796 14.0963 8.48648C13.9678 8.61499 13.7938 8.68755 13.612 8.68837L13.6116 8.68837L2.38758 8.68837H2.38685C2.20544 8.68706 2.03185 8.61428 1.90374 8.48582M2.38873 7.31504L1.90374 8.48582M2.38873 7.31504C2.20698 7.31586 2.03292 7.38842 1.9044 7.51693C1.77589 7.64545 1.70333 7.81951 1.70251 8.00125L1.70251 8.00216M2.38873 7.31504L1.70251 8.00216M1.90374 8.48582C1.77563 8.35736 1.70333 8.18358 1.70251 8.00216M1.90374 8.48582L1.70251 8.00216"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/RedoIcon.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "@mui/material";
+
+export const RedoIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 20 20`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.612 4.01719H5.94531C5.75303 4.01719 5.56862 4.09357 5.43266 4.22954C5.2967 4.3655 5.22031 4.54991 5.22031 4.74219C5.22031 4.93447 5.2967 5.11888 5.43266 5.25484C5.56862 5.3908 5.75303 5.46719 5.94531 5.46719H12.612C13.5248 5.46719 14.4002 5.82979 15.0456 6.47523C15.691 7.12067 16.0536 7.99607 16.0536 8.90885C16.0536 9.82164 15.691 10.697 15.0456 11.3425C14.4002 11.9879 13.5248 12.3505 12.612 12.3505H3.44531C3.25303 12.3505 3.06862 12.4269 2.93266 12.5629C2.7967 12.6988 2.72031 12.8832 2.72031 13.0755C2.72031 13.2678 2.7967 13.4522 2.93266 13.5882C3.06862 13.7241 3.25303 13.8005 3.44531 13.8005H12.612C13.9093 13.8005 15.1535 13.2851 16.0709 12.3678C16.9883 11.4504 17.5036 10.2062 17.5036 8.90885C17.5036 7.6115 16.9883 6.36729 16.0709 5.44992C15.1535 4.53256 13.9093 4.01719 12.612 4.01719Z"
+        fill={color}
+        stroke="#323167"
+        stroke-width="0.2"
+      />
+      <path
+        d="M5.35888 10.2672C5.26348 10.2668 5.16895 10.2854 5.08082 10.3219C4.99263 10.3584 4.91261 10.4122 4.84543 10.48C4.84537 10.4801 4.84531 10.4801 4.84524 10.4802L2.71227 12.6131L2.71185 12.6136C2.57712 12.7499 2.50156 12.9339 2.50156 13.1255C2.50156 13.3172 2.57712 13.5012 2.71185 13.6375L2.71227 13.6379L4.845 15.7706C4.91172 15.8396 4.99146 15.8946 5.07961 15.9325C5.16804 15.9706 5.26317 15.9906 5.35943 15.9915C5.4557 15.9924 5.55117 15.9741 5.64029 15.9377C5.7294 15.9013 5.81038 15.8475 5.87848 15.7794C5.94659 15.7114 6.00046 15.6305 6.03695 15.5414C6.07345 15.4523 6.09184 15.3569 6.09105 15.2606C6.09026 15.1643 6.0703 15.0692 6.03235 14.9807C5.99451 14.8925 5.93953 14.8127 5.87061 14.7459L4.25024 13.1255L5.87119 11.5046L5.87161 11.5042C6.00634 11.3678 6.0819 11.1839 6.0819 10.9922C6.0819 10.8005 6.00634 10.6166 5.87161 10.4802L5.87155 10.4802C5.80445 10.4124 5.72452 10.3586 5.63643 10.3221C5.54846 10.2856 5.45412 10.2669 5.35888 10.2672ZM5.35888 10.2672C5.35902 10.2672 5.35916 10.2672 5.35931 10.2672L5.35881 10.3672L5.35846 10.2672C5.3586 10.2672 5.35874 10.2672 5.35888 10.2672Z"
+        fill={color}
+        stroke="#323167"
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/SearchIcon.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from "@mui/material";
+
+export const SearchIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={{
+        stroke: color,
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.67007 14.5031C6.31847 14.5032 4.99719 14.1025 3.87333 13.3517C2.74947 12.6008 1.8735 11.5336 1.35622 10.2849C0.838934 9.03619 0.703561 7.66214 0.96722 6.3365C1.23088 5.01086 1.88173 3.79318 2.83746 2.83746C3.79318 1.88173 5.01086 1.23088 6.3365 0.96722C7.66214 0.703561 9.03619 0.838934 10.2849 1.35622C11.5336 1.8735 12.6008 2.74947 13.3517 3.87333C14.1025 4.99719 14.5032 6.31847 14.5031 7.67007C14.5006 9.48154 13.7799 11.2181 12.499 12.499C11.2181 13.7799 9.48154 14.5006 7.67007 14.5031ZM7.67007 1.83647C6.51643 1.83647 5.38868 2.17856 4.42945 2.81949C3.47022 3.46041 2.72258 4.37138 2.28107 5.4372C1.83957 6.50302 1.72402 7.67583 1.94905 8.80732C2.17408 9.93881 2.72957 10.9782 3.54528 11.794C4.361 12.6097 5.4003 13.1653 6.53177 13.3905C7.66324 13.6156 8.83606 13.5002 9.90192 13.0587C10.9678 12.6173 11.8788 11.8698 12.5198 10.9106C13.1608 9.95144 13.503 8.82372 13.5031 7.67007C13.5014 6.12352 12.8864 4.64079 11.7928 3.54716C10.6993 2.45353 9.21663 1.83831 7.67007 1.83647Z"
+        fill="#121212"
+      />
+      <path
+        d="M14.6635 15.1637C14.5978 15.1641 14.5327 15.1513 14.472 15.1263C14.4112 15.1012 14.3561 15.0642 14.3099 15.0176L11.8325 12.5392C11.7396 12.4451 11.6875 12.3181 11.6875 12.1859C11.6875 12.0536 11.7396 11.9267 11.8325 11.8325C11.9267 11.7396 12.0536 11.6875 12.1859 11.6875C12.3181 11.6875 12.4451 11.7396 12.5392 11.8325L15.0171 14.3104C15.11 14.4045 15.1621 14.5315 15.1621 14.6637C15.1621 14.796 15.11 14.9229 15.0171 15.0171C14.9708 15.0638 14.9157 15.1008 14.855 15.126C14.7943 15.1512 14.7292 15.164 14.6635 15.1637Z"
+        fill="#121212"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -31,14 +31,19 @@ import { PayxIcon } from "./IconComponents/PayxIcon";
 
 import { AdminIcon } from "./IconComponents/AdminIcon";
 import { ErrorFilledIcon } from "./IconComponents/AlertFilledIcon";
+import { ArrowBackIcon } from "./IconComponents/ArrowBackIcon";
 import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
+import { CollapseIcon } from "./IconComponents/CollapseIcon";
 import { CrossIcon2 } from "./IconComponents/CrossIcon2";
+import { ExpandIcon } from "./IconComponents/ExpandIcon";
 import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
 import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
 import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
+import { RedoIcon } from "./IconComponents/RedoIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { SaveIcon } from "./IconComponents/SaveIcon";
+import { SearchIcon } from "./IconComponents/SearchIcon";
 import { ShareIcon } from "./IconComponents/ShareIcon";
 import { SuccessFilledIcon } from "./IconComponents/SuccessFilledIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
@@ -48,6 +53,10 @@ import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
 
 export const Icons = {
+  RedoIcon,
+  ArrowBackIcon,
+  CollapseIcon,
+  ExpandIcon,
   AppsIcon,
   CareerIcon,
   ClogWheelIcon,
@@ -95,4 +104,5 @@ export const Icons = {
   AdminIcon,
   ShareIcon,
   SaveIcon,
+  SearchIcon,
 };

package/src/components/DataDisplay/Typography/Typography.tsx

@@ -5,6 +5,14 @@ import {
 
 export type TypographyProps = {} & MuiTypographyProps;
 
-export const Typography = ({ variant, children }: TypographyProps) => {
-  return <MuiTypography variant={variant}>{children}</MuiTypography>;
+export const Typography = ({
+  variant,
+  children,
+  ...props
+}: TypographyProps) => {
+  return (
+    <MuiTypography variant={variant} {...props}>
+      {children}
+    </MuiTypography>
+  );
 };

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -1,8 +1,12 @@
-import { Search } from "@mui/icons-material";
-import { InputAdornment } from "@mui/material";
+import {
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+  styled,
+} from "@mui/material";
 import { debounce } from "lodash";
 import { ReactNode, useMemo, useState } from "react";
-import { TextField, TextFieldProps } from "../TextField/TextField";
+import { SearchIcon } from "../../Assets/Icons/IconComponents/SearchIcon";
 
 export type SearchBarProps = {
   placeholder?: string;
@@ -12,7 +16,7 @@ export type SearchBarProps = {
 } & TextFieldProps;
 
 export const SearchBar = ({
-  placeholder = "Search",
+  placeholder = "Search by Name",
   label,
   value = "",
   onSearch,
@@ -30,14 +34,14 @@ export const SearchBar = ({
   };
 
   return (
-    <TextField
+    <StyledTextField
       placeholder={placeholder}
       label={label}
       value={search}
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">
-            <Search />
+            <SearchIcon />
           </InputAdornment>
         ),
       }}
@@ -46,3 +50,33 @@ export const SearchBar = ({
     />
   );
 };
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  margin: 0,
+  height: 40,
+  backgroundColor: theme.palette.surface.grey,
+  ".MuiFormControl-root": {
+    margin: 0,
+    height: "100%",
+  },
+  ".MuiOutlinedInput-root": {
+    height: "100%",
+    padding: "5px, 10px",
+    display: "flex",
+    alignItems: "center",
+  },
+  ".MuiInputBase-input": {
+    height: "100%",
+    fontSize: "14px",
+    "&::placeholder": {
+      color: theme.palette.text.tertiary,
+      fontSize: "14px",
+      opacity: 1,
+    },
+  },
+  ".MuiOutlinedInput-notchedOutline": {
+    height: "100%",
+    top: 0,
+    borderColor: theme.palette.border.primary,
+  },
+}));

package/src/components/Navigation/Sidebar/DropdownItem.tsx

@@ -0,0 +1,34 @@
+import { useMatch, useResolvedPath } from "react-router-dom";
+import { Typography } from "../../export";
+import { DropdownMenuItem } from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const SidebarDropdownItem = ({
+  dropdownItem,
+  collapsed,
+  index,
+}: {
+  dropdownItem: DropdownMenuItem;
+  collapsed: boolean;
+  index: number;
+}) => {
+  const { name, path, permissionKey } = dropdownItem;
+
+  let resolved = useResolvedPath(path);
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  const { StyledListItem, StyledLinkButton, StyledListItemButton } =
+    createSidebarStyles(collapsed);
+
+  return (
+    <StyledListItem key={index} disablePadding className="listItem">
+      <StyledLinkButton to={path} match={match}>
+        {!collapsed && (
+          <StyledListItemButton collapsed={collapsed}>
+            <Typography variant="button1">{name}</Typography>
+          </StyledListItemButton>
+        )}
+      </StyledLinkButton>
+    </StyledListItem>
+  );
+};

package/src/components/Navigation/Sidebar/MenuItem.tsx

@@ -0,0 +1,150 @@
+import { Box, Stack } from "@mui/material";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { useMatch, useResolvedPath } from "react-router-dom";
+import { Icons, Tooltip, Typography } from "../../export";
+import { SidebarDropdownItem } from "./DropdownItem";
+import { MenuItemProps } from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const SideBarMenuItem = ({
+  menuItem,
+  index,
+  collapsed,
+  newMenuClickHandler,
+}: {
+  menuItem: MenuItemProps;
+  index: number;
+  collapsed: boolean;
+  newMenuClickHandler: (newMenu: MenuItemProps[], newMenuTitle: string) => void;
+}) => {
+  const {
+    StyledListItem,
+    StyledLinkButton,
+    StyledListItemButton,
+    StyledListItemIcon,
+    StyledDropdownButton,
+    HoverIcon,
+  } = createSidebarStyles(collapsed);
+
+  const { name, path, icon: Icon, menu: newMenu, dropdownMenu } = menuItem;
+
+  let resolved = useResolvedPath(path);
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  let [expanded, setExpanded] = useState(false);
+  const dropdownMenuClickHandler = () => {
+    setExpanded(!expanded);
+  };
+
+  const DrawerCollapsedTile = () => {
+    return (
+      <Tooltip title={<Typography variant="label2">{name}</Typography>}>
+        {Icon}
+      </Tooltip>
+    );
+  };
+
+  const NewMenuTile = () => {
+    return (
+      <StyledListItemButton collapsed={collapsed}>
+        <Stack
+          width={"100%"}
+          direction="row"
+          alignItems={"center"}
+          justifyContent={"space-between"}
+        >
+          <Stack direction="row" alignItems={"center"}>
+            <StyledListItemIcon collapsed={collapsed}>
+              {Icon ? Icon : <Icons.HomeIcon />}
+            </StyledListItemIcon>
+            <Typography variant="button1">{name}</Typography>
+          </Stack>
+          <HoverIcon display={"flex"} className="hoverIcon">
+            <Icons.RedoIcon size={18} />
+          </HoverIcon>
+        </Stack>
+      </StyledListItemButton>
+    );
+  };
+
+  const DropdownMenuTile = () => {
+    return (
+      <StyledListItemButton collapsed={collapsed}>
+        <Stack
+          width={"100%"}
+          direction="row"
+          alignItems={"center"}
+          justifyContent={"space-between"}
+        >
+          <Stack direction="row" alignItems={"center"}>
+            <StyledListItemIcon collapsed={collapsed}>
+              {Icon ? Icon : <Icons.HomeIcon />}
+            </StyledListItemIcon>
+            <Typography variant="button1">{name}</Typography>
+          </Stack>
+          <Box display={"flex"}>
+            {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
+          </Box>
+        </Stack>
+      </StyledListItemButton>
+    );
+  };
+
+  const DefaultTile = () => {
+    return (
+      <StyledListItemButton collapsed={collapsed}>
+        <StyledListItemIcon collapsed={collapsed}>{Icon}</StyledListItemIcon>
+        <Typography variant="button1">{name}</Typography>
+      </StyledListItemButton>
+    );
+  };
+
+  return (
+    <motion.div
+      key="collapsed"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1 }}
+    >
+      {newMenu && (
+        <StyledListItem key={index} disablePadding className="listItem">
+          <StyledDropdownButton
+            match={match}
+            onClick={() => newMenuClickHandler(newMenu, name)}
+          >
+            {collapsed ? <DrawerCollapsedTile /> : <NewMenuTile />}
+          </StyledDropdownButton>
+        </StyledListItem>
+      )}
+      {dropdownMenu && dropdownMenu.length > 0 && (
+        <StyledListItem key={index} disablePadding className="listItem">
+          <StyledDropdownButton
+            match={match}
+            onClick={() => dropdownMenuClickHandler()}
+          >
+            {collapsed ? <DrawerCollapsedTile /> : <DropdownMenuTile />}
+          </StyledDropdownButton>
+        </StyledListItem>
+      )}
+      {expanded && dropdownMenu && dropdownMenu.length > 0 && (
+        <Stack>
+          {dropdownMenu?.map((item: any, index: number) => (
+            <SidebarDropdownItem
+              dropdownItem={item}
+              collapsed={collapsed}
+              index={index}
+            />
+          ))}
+        </Stack>
+      )}
+      {!newMenu && !dropdownMenu && (
+        <StyledListItem key={path} disablePadding className="listItem">
+          <StyledLinkButton to={path} match={match}>
+            {collapsed ? <DrawerCollapsedTile /> : <DefaultTile />}
+          </StyledLinkButton>
+        </StyledListItem>
+      )}
+    </motion.div>
+  );
+};

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -1,21 +1,15 @@
-import { IconButton } from "@mui/material";
-import { useMatch, useResolvedPath } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useMemo, useState } from "react";
 import { CampxFullLogoIcon } from "../../Assets/Icons/IconComponents/CampxFullLogoIcon";
 import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
 import { LeftIcon } from "../../Assets/Icons/IconComponents/LeftIcon";
 import { RightIcon } from "../../Assets/Icons/IconComponents/RightIcon";
 import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons, Tooltip } from "../../export";
+import { Icons } from "../../export";
+import { SideBarMenuItem } from "./MenuItem";
+import { MenuHistory, MenuItemProps } from "./interfaces";
 import { createSidebarStyles } from "./styles";
 
-export interface MenuItemProps {
-  name: string;
-  path: string;
-  icon?: any;
-  permissionKey?: string;
-  iconType?: string;
-}
-
 export const Sidebar = ({
   menu,
   collapsed,
@@ -25,86 +19,119 @@ export const Sidebar = ({
   collapsed: boolean;
   setCollapsed: any;
 }) => {
-  const {
-    StyledSidebarContainer,
-    StyledLogoArea,
-    StyledMenuBar,
-    StyledCollapsibleSection,
-    StyledListItem,
-    StyledLinkButton,
-    StyledListItemButton,
-    StyledListItemIcon,
-  } = createSidebarStyles(collapsed);
+  const [history, setHistory] = useState<MenuHistory[]>([]);
+  const [currentMenu, setCurrentMenu] = useState<MenuItemProps[] | null>(menu);
+  const [currentMenuTitle, setCurrentMenuTitle] = useState<string | null>(null);
+  const [menuPosition, setMenuPosition] = useState(0);
+
+  const newMenuClickHandler = (
+    newMenu: MenuItemProps[],
+    newMenuTitle: string
+  ) => {
+    if (newMenu) {
+      setHistory((prev) => [
+        ...prev,
+        { menu: currentMenu, menuTitle: currentMenuTitle },
+      ]);
+
+      setCurrentMenu(newMenu);
+      setMenuPosition(collapsed ? 60 : 250);
+      setCurrentMenuTitle(newMenuTitle);
+    }
+  };
+
+  const backClickHandler = () => {
+    const prev = history && history.length > 0 && history.pop();
+
+    if (prev) {
+      setCurrentMenu(prev.menu);
+      setCurrentMenuTitle(prev.menuTitle);
+      setHistory([...history]);
+      setMenuPosition(collapsed ? -60 : -250);
+    }
+  };
 
   const toggleSidebar = () => {
+    setMenuPosition(0);
     setCollapsed(!collapsed);
   };
 
-  const MenuItem = ({
-    menuItem,
-    index,
-  }: {
-    menuItem: MenuItemProps;
-    index: number;
-  }) => {
-    const { path, icon: Icon, name } = menuItem;
-    let resolved = useResolvedPath(path);
-    let match = useMatch({ path: resolved.pathname, end: false });
-    return (
-      <StyledListItem key={path} disablePadding className="listItem">
-        <StyledLinkButton to={path} match={match}>
-          {!collapsed && (
-            <StyledListItemButton collapsed={collapsed}>
-              <StyledListItemIcon collapsed={collapsed}>
-                {Icon ? Icon : <Icons.HomeIcon />}
-              </StyledListItemIcon>
-              <Typography variant="subtitle2">{name}</Typography>
-            </StyledListItemButton>
-          )}
-          {collapsed && (
-            <>
-              {Icon ? (
-                <Tooltip
-                  title={<Typography variant="label2">{name}</Typography>}
-                >
-                  {Icon}
-                </Tooltip>
-              ) : (
-                <Tooltip
-                  title={<Typography variant="label2">{name}</Typography>}
-                >
-                  <Icons.HomeIcon />
-                </Tooltip>
-              )}
-            </>
-          )}
-        </StyledLinkButton>
-      </StyledListItem>
-    );
-  };
+  const {
+    StyledSidebarContainer,
+    StyledLogoArea,
+    StyledMenuBar,
+    StyledCollapsibleSection,
+    StyledMenuHeaderButton,
+  } = useMemo(() => createSidebarStyles(collapsed), [collapsed]);
 
   return (
-    <StyledSidebarContainer
-      direction="column"
-      spacing="12px"
-      className="sidebarContainer"
+    <motion.div
+      animate={{ width: collapsed ? "60px" : "250px" }}
+      transition={{ duration: 0.3, ease: "circOut" }}
+      style={{
+        margin: "12px",
+        height: "calc(100vh - 24px)",
+      }}
     >
-      <StyledLogoArea collapsed={collapsed}>
-        {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
-      </StyledLogoArea>
-      <StyledMenuBar>
-        {menu &&
-          menu.length > 0 &&
-          menu?.map((item: any, index: number) => (
-            <MenuItem menuItem={item} index={index} key={index} />
-          ))}
-      </StyledMenuBar>
-      <StyledCollapsibleSection className="collapsibleSection">
-        <IconButton onClick={toggleSidebar}>
+      <StyledSidebarContainer
+        spacing="12px"
+        direction="column"
+        className="sidebarContainer"
+      >
+        <motion.div
+          key="collapsed"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <StyledLogoArea collapsed={collapsed}>
+            {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
+          </StyledLogoArea>
+        </motion.div>
+
+        <motion.div
+          initial={{ x: menuPosition }}
+          animate={{ x: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: menuPosition ? "circOut" : "circIn",
+          }}
+          style={{
+            height: "100%",
+          }}
+        >
+          <StyledMenuBar>
+            {!collapsed && currentMenuTitle && (
+              <StyledMenuHeaderButton
+                direction="row"
+                onClick={() => backClickHandler()}
+              >
+                <Icons.ArrowBackIcon size={20} />
+
+                <Typography variant="button1">{currentMenuTitle}</Typography>
+              </StyledMenuHeaderButton>
+            )}
+            {currentMenu &&
+              currentMenu.length > 0 &&
+              currentMenu?.map((item: any, index: number) => (
+                <SideBarMenuItem
+                  menuItem={item}
+                  index={index}
+                  key={index}
+                  collapsed={collapsed}
+                  newMenuClickHandler={newMenuClickHandler}
+                />
+              ))}
+          </StyledMenuBar>
+        </motion.div>
+        <StyledCollapsibleSection
+          className="collapsibleSection"
+          onClick={toggleSidebar}
+        >
           {collapsed ? <RightIcon size={32} /> : <LeftIcon size={32} />}
-        </IconButton>
-      </StyledCollapsibleSection>
-    </StyledSidebarContainer>
+        </StyledCollapsibleSection>
+      </StyledSidebarContainer>
+    </motion.div>
   );
 };
 

package/src/components/Navigation/Sidebar/interfaces.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+
+export interface MenuItemProps {
+  name: string;
+  path: string;
+  icon: ReactElement;
+  permissionKey?: string;
+  menu?: MenuItemProps[];
+  dropdownMenu?: DropdownMenuItem[];
+}
+
+export interface DropdownMenuItem {
+  name: string;
+  path: string;
+  permissionKey?: string;
+}
+
+export interface MenuHistory {
+  menu: MenuItemProps[] | null;
+  menuTitle: string | null;
+}

package/src/components/Navigation/Sidebar/styles.tsx

@@ -1,5 +1,7 @@
 import {
   Box,
+  Button,
+  IconButton,
   ListItem,
   ListItemButton,
   ListItemIcon,
@@ -11,10 +13,10 @@ import { Link } from "react-router-dom";
 export const createSidebarStyles = (collapsed: boolean) => {
   const StyledSidebarContainer = styled(Stack)(({ theme }) => {
     return {
-      height: "calc(100vh - 24px)",
-      width: collapsed ? "60px" : "240px",
-      margin: "12px",
       backgroundColor: theme.palette.surface.defaultBackground,
+      height: "100%",
+      justifyContent: "space-between",
+      overflow: "hidden",
     };
   });
 
@@ -31,12 +33,12 @@ export const createSidebarStyles = (collapsed: boolean) => {
   );
 
   const StyledMenuBar = styled(Box)(({ theme }) => ({
-    flexGrow: 1,
+    height: "100%",
     borderRadius: "8px",
     backgroundColor: theme.palette.surface.paperBackground,
   }));
 
-  const StyledCollapsibleSection = styled(Box)(({ theme }) => ({
+  const StyledCollapsibleSection = styled(IconButton)(({ theme }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -73,6 +75,15 @@ export const createSidebarStyles = (collapsed: boolean) => {
     })
   );
 
+  const StyledListItemIcon = styled(ListItemIcon)(
+    ({ collapsed }: { collapsed: boolean }) => ({
+      display: "flex",
+      justifyContent: "center",
+      minWidth: "0px",
+      marginRight: "10px",
+    })
+  );
+
   interface StyledListItemButtonProps {
     collapsed: boolean;
   }
@@ -87,16 +98,40 @@ export const createSidebarStyles = (collapsed: boolean) => {
     paddingTop: "5px",
     width: "100%",
     borderRadius: "5px",
+    "&:hover .hoverIcon": {
+      display: "flex",
+    },
   }));
 
-  const StyledListItemIcon = styled(ListItemIcon)(
-    ({ collapsed }: { collapsed: boolean }) => ({
+  const HoverIcon = styled(Box)(({ theme }) => ({
+    display: "none",
+  }));
+
+  const StyledDropdownButton = styled(Button)<StyledLinkButtonProps>(
+    ({ theme, match }) => ({
+      width: collapsed ? "auto" : "100%",
+      textDecoration: "none",
       display: "flex",
+      margin: collapsed ? "5px 0px 0px 0px" : "5px 8px",
+      backgroundColor: match ? theme.palette.secondary.main : "none",
       justifyContent: "center",
-      minWidth: "48px",
+      "&:hover": {
+        color: "unset",
+      },
+      borderRadius: "4px",
     })
   );
 
+  const StyledMenuHeaderButton = styled(Stack)(({ theme }) => ({
+    alignItems: "end",
+    height: "50px",
+    width: "100%",
+    padding: "12px 16px",
+    backgroundColor: theme.palette.surface.grey,
+    cursor: "pointer",
+    borderRadius: "8px 8px 0px 0px",
+  }));
+
   return {
     StyledSidebarContainer,
     StyledLogoArea,
@@ -106,5 +141,8 @@ export const createSidebarStyles = (collapsed: boolean) => {
     StyledLinkButton,
     StyledListItemButton,
     StyledListItemIcon,
+    StyledDropdownButton,
+    StyledMenuHeaderButton,
+    HoverIcon,
   };
 };

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -17,7 +17,7 @@ interface StepperProps {
 
 interface StepItem {
   label: string;
-  description: string;
+  description?: string;
 }
 
 export const Stepper = ({

package/src/stories/DesignSystem/typography.stories.tsx

@@ -43,7 +43,7 @@ export const TypographyStyles = () => (
     />
     <TypographyDisplay
       variant="subtitle2"
-      fontInfo={{ family: "Poppins", weight: "600", size: "16px" }}
+      fontInfo={{ family: "Poppins", weight: "500", size: "16px" }}
       text="Subtitle 2 (subtitle2) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
@@ -68,13 +68,18 @@ export const TypographyStyles = () => (
     />
     <TypographyDisplay
       variant={"label1" as any}
-      fontInfo={{ family: "Heebo", weight: "300", size: "14px" }}
+      fontInfo={{ family: "Heebo", weight: "400", size: "14px" }}
       text="Label 1 (label1) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
       variant={"label2" as any}
-      fontInfo={{ family: "Poppins", weight: "300", size: "14px" }}
+      fontInfo={{ family: "Poppins", weight: "400", size: "12px" }}
       text="Label 2 (label2) - Lorem ipsum dolor sit."
     />
+    <TypographyDisplay
+      variant={"button1" as any}
+      fontInfo={{ family: "Poppins", weight: "600", size: "14px" }}
+      text="Button 1 (button1) - Lorem ipsum dolor sit."
+    />
   </Stack>
 );

package/src/stories/Navigation/FloatingSidebar.stories.tsx

@@ -30,40 +30,38 @@ const meta: Meta<typeof Sidebar> = {
 export default meta;
 type Story = StoryObj<typeof Sidebar>;
 
+const mainMenu = [
+  { name: "Admin", path: "/admin", icon: <Icons.AdminIcon size={20} /> },
+  { name: "UMS", path: "/ums", icon: <Icons.UmsIcon size={20} /> },
+  {
+    name: "Payments",
+    path: "/payments",
+    icon: <Icons.PayxIcon size={20} />,
+  },
+  { name: "Exams", path: "/exams", icon: <Icons.ExamxIcon size={20} /> },
+  { name: "HRMS", path: "/hrms", icon: <Icons.PeoplexIcon size={20} /> },
+  {
+    name: "Enroll",
+    path: "/enroll",
+    icon: <Icons.EnrollxIcon size={20} />,
+  },
+  {
+    name: "Commute",
+    path: "/commute",
+    icon: <Icons.CommutexIcon size={20} />,
+  },
+  {
+    name: "Hostels",
+    path: "/hostels",
+    icon: <Icons.HostelxIcon size={20} />,
+  },
+];
+
 // Primary story
 export const Primary: Story = {
   render: (args) => <Sidebar {...args} />,
   args: {
-    menu: [
-      { name: "Admin", path: "/admin", icon: <Icons.AdminIcon size={20} /> },
-      { name: "UMS", path: "/ums", icon: <Icons.UmsIcon size={20} /> },
-      {
-        name: "Payments",
-        path: "/payments",
-        icon: <Icons.PayxIcon size={20} />,
-      },
-      { name: "Exams", path: "/exams", icon: <Icons.ExamxIcon size={20} /> },
-      { name: "HRMS", path: "/hrms", icon: <Icons.PeoplexIcon size={20} /> },
-      {
-        name: "Enroll",
-        path: "/enroll",
-        icon: <Icons.EnrollxIcon size={20} />,
-      },
-      {
-        name: "Commute",
-        path: "/commute",
-        icon: <Icons.CommutexIcon size={20} />,
-      },
-      {
-        name: "Hostels",
-        path: "/hostels",
-        icon: <Icons.HostelxIcon size={20} />,
-      },
-      {
-        name: "Evaluator",
-        path: "/evaluator",
-      },
-    ],
+    menu: mainMenu,
   },
 };
 

package/src/stories/Navigation/Stepper.stories.tsx

@@ -11,41 +11,61 @@ export default meta;
 
 type Story = StoryObj<typeof Stepper>;
 
+const steps = [
+  {
+    label: "Semester Configuration",
+    description:
+      "Configure Credits, Tuition Fee Requirements, Registration Dates",
+  },
+  {
+    label: "Semester Calender",
+    description:
+      "Manage the timeline of the semester. Add new or edit the following events as per the semester needs",
+  },
+  {
+    label: "Students and Sections",
+    description: "Add or move students to their respective sections",
+  },
+  {
+    label: "Courses",
+    description:
+      "Verify the courses that are going to be taught in this semester",
+  },
+  {
+    label: "Assign Faculty",
+    description: "Assign Faculty to the available subjects",
+  },
+];
+
 export const VerticalStepper: Story = {
   args: {
     orientation: "vertical",
-    steps: [
-      {
-        label: "Semester Configuration",
-        description:
-          "Configure Credits, Tuition Fee Requirements, Registration Dates",
-      },
-      {
-        label: "Semester Calender",
-        description:
-          "Manage the timeline of the semester. Add new or edit the following events as per the semester needs",
-      },
-      {
-        label: "Students and Sections",
-        description: "Add or move students to their respective sections",
-      },
-      {
-        label: "Courses",
-        description:
-          "Verify the courses that are going to be taught in this semester",
-      },
-      {
-        label: "Assign Faculty",
-        description: "Assign Faculty to the available subjects",
-      },
-    ],
+    steps,
     activeStep: 2,
   },
 };
 
+export const VerticalStepperWithNoDescription: Story = {
+  args: {
+    ...VerticalStepper.args,
+    steps: steps.map((step) => ({
+      label: step.label,
+    })),
+  },
+};
+
 export const HorizontalStepper: Story = {
   args: {
     ...VerticalStepper.args,
     orientation: "horizontal",
   },
 };
+
+export const HorizontalStepperWithNoDescription: Story = {
+  args: {
+    ...HorizontalStepper.args,
+    steps: steps.map((step) => ({
+      label: step.label,
+    })),
+  },
+};

package/src/themes/commonTheme.ts

@@ -483,6 +483,12 @@ export const getCommonTheme = (mode: Theme) => {
             fontFamily: "Poppins",
             color: ColorTokens.text.secondary,
           },
+          button1: {
+            fontSize: "14px",
+            fontWeight: 600,
+            fontFamily: "Poppins",
+            color: ColorTokens.text.primary,
+          },
         } as TypographyOptions,
       },
       MuiCssBaseline: {

package/types/theme.d.ts

@@ -54,5 +54,6 @@ declare module "@mui/material/Typography" {
     label1: true;
     label2: true;
     subtitle3: true;
+    button1: true;
   }
 }