@campxdev/react-blueprint 1.1.1 → 1.1.3

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.1",
+  "version": "1.1.3",
   "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/ErrorPages/PageNotFound.tsx

@@ -1,9 +1,8 @@
 import { errorCactus } from "../../../assets/images/svg";
 import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Button } from "../../export";
 import { StyledBox } from "./styles";
 
-export const PageNotFound = ({ resetBoundary }: any) => {
+export const PageNotFound = () => {
   return (
     <>
       <StyledBox>
@@ -20,13 +19,6 @@ export const PageNotFound = ({ resetBoundary }: any) => {
         <Typography variant="body2">
           Please check the URL or return to the homepage.
         </Typography>
-        <Button
-          sx={{ marginTop: "20px" }}
-          variant="contained"
-          onClick={() => resetBoundary()}
-        >
-          Try Again
-        </Button>
       </StyledBox>
     </>
   );

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 ${size} ${size}`}
+      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 ${size} ${size}`}
+      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 ${size} ${size}`}
+      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/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,18 @@ 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 { 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 +52,9 @@ import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
 
 export const Icons = {
+  ArrowBackIcon,
+  CollapseIcon,
+  ExpandIcon,
   AppsIcon,
   CareerIcon,
   ClogWheelIcon,
@@ -95,4 +102,5 @@ export const Icons = {
   AdminIcon,
   ShareIcon,
   SaveIcon,
+  SearchIcon,
 };

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/MenuItem.tsx

@@ -0,0 +1,155 @@
+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 { MenuItemProps } from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const SideBarMenuItem = ({
+  menuItem,
+  index,
+  collapsed,
+  isDropdownMenuItem = false,
+  newMenuClickHandler,
+}: {
+  menuItem: MenuItemProps;
+  index: number;
+  collapsed: boolean;
+  isDropdownMenuItem?: boolean;
+  newMenuClickHandler: (newMenu: MenuItemProps[], newMenuTitle: string) => void;
+}) => {
+  const {
+    StyledListItem,
+    StyledLinkButton,
+    StyledListItemButton,
+    StyledListItemIcon,
+    StyledDropdownButton,
+    HoverIcon,
+  } = createSidebarStyles(collapsed);
+
+  const { path, icon: Icon, name, 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.ClogWheelIcon />
+          </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}>
+        {!isDropdownMenuItem && (
+          <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) => (
+            <SideBarMenuItem
+              menuItem={item}
+              index={index}
+              key={index}
+              collapsed={collapsed}
+              isDropdownMenuItem={true}
+              newMenuClickHandler={newMenuClickHandler}
+            />
+          ))}
+        </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, currentMenu]);
 
   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,15 @@
+import { ReactElement } from "react";
+
+export interface MenuItemProps {
+  name: string;
+  path: string;
+  icon: ReactElement;
+  permissionKey?: string;
+  menu?: MenuItemProps[];
+  dropdownMenu?: MenuItemProps[];
+}
+
+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;
   }
 }