BuilderIO · zuchka · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
diff --git a/src/crm/CrmDashboard.tsx b/src/crm/CrmDashboard.tsx
@@ -34,11 +34,20 @@ const xThemeComponents = {
 };
 
 export default function CrmDashboard() {
+  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+
+  const handleToggleSidebar = () => {
+    setSidebarCollapsed((prev) => !prev);
+  };
+
   return (
     <AppTheme themeComponents={xThemeComponents}>
       <CssBaseline enableColorScheme />
       <Box sx={{ display: "flex", height: "100vh" }}>
-        <CrmSideMenu />
+        <CrmSideMenu
+          isCollapsed={sidebarCollapsed}
+          onToggleCollapse={handleToggleSidebar}
+        />
         <CrmAppNavbar />
         {/* Main content */}
         <Box
@@ -49,6 +58,10 @@ export default function CrmDashboard() {
               ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
               : alpha(theme.palette.background.default, 1),
             overflow: "auto",
+            transition: theme.transitions.create("margin", {
+              easing: theme.transitions.easing.easeInOut,
+              duration: theme.transitions.duration.standard,
+            }),
           })}
         >
           <Stack

diff --git a/src/crm/components/CrmMenuContent.tsx b/src/crm/components/CrmMenuContent.tsx
@@ -1,13 +1,14 @@
 import * as React from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import Box from "@mui/material/Box"; // Added the missing import
+import Box from "@mui/material/Box";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Stack from "@mui/material/Stack";
 import Divider from "@mui/material/Divider";
+import Tooltip from "@mui/material/Tooltip";
 import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
 import PeopleRoundedIcon from "@mui/icons-material/PeopleRounded";
 import BusinessCenterRoundedIcon from "@mui/icons-material/BusinessCenterRounded";
@@ -31,43 +32,64 @@ const secondaryListItems = [
   { text: "Help & Support", icon: <HelpOutlineRoundedIcon />, path: "/help" },
 ];
 
-export default function CrmMenuContent() {
+interface CrmMenuContentProps {
+  isCollapsed?: boolean;
+}
+
+export default function CrmMenuContent({
+  isCollapsed = false,
+}: CrmMenuContentProps) {
   const navigate = useNavigate();
   const location = useLocation();
 
   const handleNavigation = (path: string) => {
     navigate(path);
   };
 
+  const renderMenuItem = (item: any, index: number) => {
+    const menuItem = (
+      <ListItem key={index} disablePadding sx={{ display: "block" }}>
+        <ListItemButton
+          selected={location.pathname === item.path}
+          onClick={() => handleNavigation(item.path)}
+          sx={{
+            minHeight: 48,
+            justifyContent: isCollapsed ? "center" : "initial",
+            px: 2.5,
+          }}
+        >
+          <ListItemIcon
+            sx={{
+              minWidth: 0,
+              mr: isCollapsed ? 0 : 3,
+              justifyContent: "center",
+            }}
+          >
+            {item.icon}
+          </ListItemIcon>
+          {!isCollapsed && <ListItemText primary={item.text} />}
+        </ListItemButton>
+      </ListItem>
+    );
+
+    return isCollapsed ? (
+      <Tooltip key={index} title={item.text} placement="right" arrow>
+        {menuItem}
+      </Tooltip>
+    ) : (
+      menuItem
+    );
+  };
+
   return (
     <Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
       <List dense>
-        {mainListItems.map((item, index) => (
-          <ListItem key={index} disablePadding sx={{ display: "block" }}>
-            <ListItemButton
-              selected={location.pathname === item.path}
-              onClick={() => handleNavigation(item.path)}
-            >
-              <ListItemIcon>{item.icon}</ListItemIcon>
-              <ListItemText primary={item.text} />
-            </ListItemButton>
-          </ListItem>
-        ))}
+        {mainListItems.map((item, index) => renderMenuItem(item, index))}
       </List>
       <Box>
         <Divider sx={{ my: 1 }} />
         <List dense>
-          {secondaryListItems.map((item, index) => (
-            <ListItem key={index} disablePadding sx={{ display: "block" }}>
-              <ListItemButton
-                selected={location.pathname === item.path}
-                onClick={() => handleNavigation(item.path)}
-              >
-                <ListItemIcon>{item.icon}</ListItemIcon>
-                <ListItemText primary={item.text} />
-              </ListItemButton>
-            </ListItem>
-          ))}
+          {secondaryListItems.map((item, index) => renderMenuItem(item, index))}
         </List>
       </Box>
     </Stack>

diff --git a/src/crm/components/CrmSelectCompany.tsx b/src/crm/components/CrmSelectCompany.tsx
@@ -5,7 +5,13 @@ import FormControl from "@mui/material/FormControl";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import BusinessRoundedIcon from "@mui/icons-material/BusinessRounded";
 
-export default function CrmSelectCompany() {
+interface CrmSelectCompanyProps {
+  isCollapsed?: boolean;
+}
+
+export default function CrmSelectCompany({
+  isCollapsed = false,
+}: CrmSelectCompanyProps) {
   const [company, setCompany] = React.useState("acme");
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -33,21 +39,21 @@ export default function CrmSelectCompany() {
               fontSize="small"
               sx={{ color: "primary.main" }}
             />
-            Acme Corporation
+            {!isCollapsed && "Acme Corporation"}
           </MenuItem>
           <MenuItem value="globex">
             <BusinessRoundedIcon
               fontSize="small"
               sx={{ color: "secondary.main" }}
             />
-            Globex Inc.
+            {!isCollapsed && "Globex Inc."}
           </MenuItem>
           <MenuItem value="initech">
             <BusinessRoundedIcon
               fontSize="small"
               sx={{ color: "success.main" }}
             />
-            Initech Technologies
+            {!isCollapsed && "Initech Technologies"}
           </MenuItem>
         </Select>
       </FormControl>

diff --git a/src/crm/components/CrmSideMenu.tsx b/src/crm/components/CrmSideMenu.tsx
@@ -7,27 +7,51 @@ import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import CrmSelectCompany from "./CrmSelectCompany";
 import CrmMenuContent from "./CrmMenuContent";
 import CrmOptionsMenu from "./CrmOptionsMenu";
 
-const drawerWidth = 240;
+export const drawerWidth = 240;
+export const collapsedDrawerWidth = 64;
 
-const Drawer = styled(MuiDrawer)({
-  width: drawerWidth,
+const Drawer = styled(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "isCollapsed",
+})<{ isCollapsed?: boolean }>(({ theme, isCollapsed }) => ({
+  width: isCollapsed ? collapsedDrawerWidth : drawerWidth,
   flexShrink: 0,
   boxSizing: "border-box",
   mt: 10,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.standard,
+  }),
   [`& .${drawerClasses.paper}`]: {
-    width: drawerWidth,
+    width: isCollapsed ? collapsedDrawerWidth : drawerWidth,
     boxSizing: "border-box",
+    overflowX: "hidden",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.standard,
+    }),
   },
-});
+}));
 
-export default function CrmSideMenu() {
+interface CrmSideMenuProps {
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+export default function CrmSideMenu({
+  isCollapsed = false,
+  onToggleCollapse,
+}: CrmSideMenuProps) {
   return (
     <Drawer
       variant="permanent"
+      isCollapsed={isCollapsed}
       sx={{
         display: { xs: "none", md: "block" },
         [`& .${drawerClasses.paper}`]: {
@@ -38,11 +62,31 @@ export default function CrmSideMenu() {
       <Box
         sx={{
           display: "flex",
+          alignItems: "center",
+          justifyContent: isCollapsed ? "center" : "space-between",
           mt: "calc(var(--template-frame-height, 0px) + 4px)",
           p: 1.5,
+          minHeight: 56, // Ensure consistent height
         }}
       >
-        <CrmSelectCompany />
+        {!isCollapsed && (
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <CrmSelectCompany isCollapsed={isCollapsed} />
+          </Box>
+        )}
+        <IconButton
+          onClick={onToggleCollapse}
+          size="small"
+          sx={{
+            ml: isCollapsed ? 0 : 1,
+            bgcolor: "action.hover",
+            "&:hover": {
+              bgcolor: "action.selected",
+            },
+          }}
+        >
+          {isCollapsed ? <MenuIcon /> : <ChevronLeftIcon />}
+        </IconButton>
       </Box>
       <Divider />
       <Box
@@ -53,16 +97,17 @@ export default function CrmSideMenu() {
           flexDirection: "column",
         }}
       >
-        <CrmMenuContent />
+        <CrmMenuContent isCollapsed={isCollapsed} />
       </Box>
       <Stack
         direction="row"
         sx={{
-          p: 2,
+          p: isCollapsed ? 1 : 2,
           gap: 1,
           alignItems: "center",
           borderTop: "1px solid",
           borderColor: "divider",
+          justifyContent: isCollapsed ? "center" : "flex-start",
         }}
       >
         <Avatar
@@ -73,18 +118,22 @@ export default function CrmSideMenu() {
         >
           AT
         </Avatar>
-        <Box sx={{ mr: "auto" }}>
-          <Typography
-            variant="body2"
-            sx={{ fontWeight: 500, lineHeight: "16px" }}
-          >
-            Alex Thompson
-          </Typography>
-          <Typography variant="caption" sx={{ color: "text.secondary" }}>
-            [email protected]
-          </Typography>
-        </Box>
-        <CrmOptionsMenu />
+        {!isCollapsed && (
+          <>
+            <Box sx={{ mr: "auto" }}>
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 500, lineHeight: "16px" }}
+              >
+                Alex Thompson
+              </Typography>
+              <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                [email protected]
+              </Typography>
+            </Box>
+            <CrmOptionsMenu />
+          </>
+        )}
       </Stack>
     </Drawer>
   );