From 4ac86a90973e8c52358983df1c7afe673080949d Mon Sep 17 00:00:00 2001
From: Rodolfo Ruiz <rodolfo.ruiz@heathus.com>
Date: Tue, 12 Aug 2025 17:13:24 -0600
Subject: [PATCH] chore: show icons only when collapsed

---
 public/Expand.png             | Bin 0 -> 290 bytes
 public/MiniLogo.png           | Bin 0 -> 1151 bytes
 src/components/AppHeader.jsx  |  13 +-
 src/components/Footer.jsx     |   2 +-
 src/components/MenuDrawer.jsx | 243 +++++++++++++++++++++++++---------
 5 files changed, 188 insertions(+), 70 deletions(-)
 create mode 100644 public/Expand.png
 create mode 100644 public/MiniLogo.png

diff --git a/public/Expand.png b/public/Expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ca8b20aa670a4c617cdb7a51dbdc1ef86317ebe
GIT binary patch
literal 290
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VXMsm#F#`j)FbFd;%$g$s6l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjzunWtF{Fa=?WB#o%?1LlwI`V*nKiqfh;DKy
z@(oh)H41d|aCc@FPHFY<@bF>2;WpzD-~5Ry9*A%IQd{-w+xDQ@8h7QczyDkL(<AM>
zP{j6yK@0kqtE@b=YsM^g#W!!}JiD%2IZf<+#si6IOMl+4T;Uur;n1I(CMD|L&%6ug
z)iS+F|JfpQrZUV~OHcDeLW!oxl{m@x3WNJi&654QR(*F+mO93?)Pcu`iFewe%rH$w
i*QrW^p{Ka6G98~gXA-l<R0W_H7(8A5T-G@yGywn_o@kT+

literal 0
HcmV?d00001

diff --git a/public/MiniLogo.png b/public/MiniLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..557d3c0cfdd0fb725510bd120ebdb32bfec11ad5
GIT binary patch
literal 1151
zcmV-_1c3XAP)<h;3K|Lk000e1NJLTq001-q000;W1^@s6wHDr{00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1Qba`K~#7FwO37U
z+eQ@rW@M`_&|0k0qTPkLfqa58C#bxXyRjDS)|3;eEl|Mfs;KQ)3VHx3C~OzqNIpS$
zgDNL5yX&R_Eg7{!ku!NiNjB}s;!w6ffE;n=&HJ18-aIkf5teBfj_Y~WSB8l|Y~d6B
zi~5e%)SNH=29p&?X3*3YR{0tRvI8kkkmX%k-=wka{Oh^62P|O$SYH?gh_HY#(?wsL
zTKUzNq?lT=agGxjoro}iNpFLUQRDdW=$lImi~*z21=!AbMEjEeBV!ZGa27FA+aPrk
z7@&wx(IpQzNJ(p=xbpmCdj7ej&982OM+ThC=bE9t;)?$e>hT~&3qIO3S0R~}^Pks+
zCb%vk2B8%R8id7UVrG+`8gy~~vK58r*g<3Tg-tR$*5`($%SPXz$eRxe194*(L}JKU
z`P?ZWU(rt&X%V0Y&U%zDJ@T}PJHYxZ*8zj+yggf+N2ifP(j<kx#sUU8UR3QO1t_o5
zh2Tvv6iAmuGW{wSQZe9AmCZqh5*P9Wi-XEIDW@vkJww}|iMQ>^r>kC;LHEoQg15oN
zV+u1jDKnk7{bsaZmFG*ammfGO1<xro3}P<5yjd$`q)SSb>GT}+o2JTRMRV@tB28dT
zibheC@usDjoMc4u7|yQo%;#_~`2E>t@woA$iIkWq7XL0#9<`F_Zk?mzMEg&XfW#Ae
z^ku$-(K{6isgimUqVew@Cf=S$ciY_fG?PzVFNYY<{jvAl%1H5=G5)kv-FI%1bQ*Qz
z!XH>0KfFl1)sJ?!PZ{K!Qms*p?^ok`r9Lyfzx(<73J;{=RQKod*1lNz<Q@?;9yY3l
z!`<!8`1=2T-=-$C^VhCjh|eGGZQC<K)>KZ4PYlCB<6_jm7E)@Tk`oylh?Z2HN&*&Y
zPI(|2l*<-k4doOeTQZJ*dlq?~apsW{4dMIB`}Mg@<)o1%C?l4U>5Y89NR@qO7@WII
zO06zpA%o&j!ufL6A*HW$<JcK1z{+X)9sg>Z<g8YRu#H&5tBVx9+-%`=HMTJFcjEK2
zys5(U&%NgjJTUHLP#Q2luqpp+<pew+bVAOhF69j#0Eeo8F#ei@uP60sj4@YgbmNHz
zZPX5)jD=rSH3{mTRnr<5$kiV+qy#T82}3}bJfW{ERbM=X4o9TK5>>8^>V9Qv=oA~(
zgQkR7n{`JmipWW6_0uKvmqmAF#F0G@o!e->tu=eNN4#4SZIbDwagw${<w{d|s~w*k
zuE5I%@R&$nUT=c(RPlF9KQ-Os-EC@kg;TD5C^HFnx`&jJox1&Gz23YQ8j}77FpB2k
zQqcQo#9hu*VWCTw;hT?F4DZ4}dnF`XKP$RfpPO6=hYV>GuPEtDwSzVm#Cxc4#mRvM
Rs2czP002ovPDHLkV1k;|AOQdX

literal 0
HcmV?d00001

diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 114eab5..45e3f74 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
-import fendiLogo from '/favicon.png'
 import { AppBar, Toolbar, Typography, IconButton, Box, Avatar } from '@mui/material';
 
 import MenuDrawer from './MenuDrawer';
-import MenuIcon from '@mui/icons-material/Menu';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 
@@ -15,7 +13,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
     private: '#40120EFF',
   };
 
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [drawerExpanded, setDrawerExpanded] = useState(true);
   const { user, logout } = useAuth();
 
   const isPrivate = zone === 'private';
@@ -33,11 +31,6 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         fontSize: { xs: '0.75rem', md: '1rem' },
       }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <Box display="flex" alignItems="center">
-          <IconButton edge="start" color="inherit" onClick={() => setMenuOpen(true)}>
-            <MenuIcon />
-          </IconButton>
-        </Box>
 
         {/* Login button only visible for public zone */}
         {isPublic && !user && (
@@ -60,8 +53,8 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         {/* Rendering the Drawer */}
         <MenuDrawer
           zone="private"
-          open={menuOpen}
-          onClose={() => setMenuOpen(false)}
+          open={drawerExpanded}
+          onClose={() => setDrawerExpanded(false)}
           onSelect={onSelectMenuItem} // pass handler from App
         />
 
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1c99357..e543fdb 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material';
-import fendiLogo from '/logo.png'
+import fendiLogo from '/Logo.png'
 
 export default function Footer({ zone = 'public' }) {
     const bgColor = {
diff --git a/src/components/MenuDrawer.jsx b/src/components/MenuDrawer.jsx
index f739b2f..1ee86e5 100644
--- a/src/components/MenuDrawer.jsx
+++ b/src/components/MenuDrawer.jsx
@@ -1,12 +1,26 @@
-import { Drawer, List, ListItem, ListItemText, ListItemIcon, Typography, Box, useMediaQuery, InputBase } from '@mui/material';
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+  IconButton,
+  Box,
+  useMediaQuery,
+  InputBase,
+  Tooltip,
+  Divider
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useEffect, useMemo, useState } from 'react';
 import { useAuth } from '../context/AuthContext';
 
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 
-
+// ---- Menu options (unchanged) ----
 const menuOptions = {
   public: [
-    { text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} />},
+    { text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} /> },
     { text: 'Logout', icon: <ExitToAppIcon /> },
   ],
   restricted: [],
@@ -24,72 +38,183 @@ const menuOptions = {
   ],
 };
 
-export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
-  const isMobile = useMediaQuery('(max-width:900px)');
-  const items = menuOptions[zone];
+// Mini‑variant sizes
+const OPEN_WIDTH = 300;
+const MINI_WIDTH = 72;
 
+export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width:900px)');
+  const items = useMemo(() => menuOptions[zone] ?? [], [zone]);
   const { logout } = useAuth();
 
+  // Collapsed state is only meaningful on desktop (permanent drawer)
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Interpret parent "open" prop:
+  // - Mobile (temporary): open controls visibility
+  // - Desktop (permanent): open=true => expanded, open=false => collapsed
+  useEffect(() => {
+    if (!isMobile) {
+      setCollapsed(!open);
+    }
+  }, [open, isMobile]);
+
+  const paperWidth = isMobile ? OPEN_WIDTH : (collapsed ? MINI_WIDTH : OPEN_WIDTH);
+
   return (
-    <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
-      paper: {
-        sx: {
+    <Drawer
+      anchor="left"
+      variant={isMobile ? 'temporary' : 'permanent'}
+      open={isMobile ? open : true}
+      onClose={isMobile ? onClose : undefined}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        width: paperWidth,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: paperWidth,
+          boxSizing: 'border-box',
           backgroundColor: '#FFFFFFFF',
-          width: isMobile ? '100vw' : 300,
-          color: '#40120EFF'
+          color: '#40120EFF',
+          transition: theme.transitions.create('width', {
+            duration: theme.transitions.duration.standard,
+            easing: theme.transitions.easing.sharp,
+          }),
+          borderRight: '1px solid rgba(0,0,0,0.08)',
         },
-      },
-    }}>
-      <Box textAlign="center" p={3}>
-        <img
-          src="/logo.png"
-          alt="Dream Views"
-          style={{ margin: 'auto', marginBottom: 8 }}
-        />
+      }}
+    >
+      {/* Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          px: collapsed ? 1 : 2,
+          py: 1.5,
+          justifyContent: collapsed ? 'center' : 'space-between',
+        }}
+      >
+        {/* Expanded - default */}
+        {!collapsed && (
+          <Box textAlign="center" p={3} alignItems="center" minHeight={72}>
+            <img
+              src="Logo.png"
+              alt="Dream Views"
+            />
 
-        <Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
-          <InputBase
-            placeholder="Filter options..."
-            sx={{
-              pl: 4,
-              pr: 2,
-              py: 0.5,
-              borderRadius: 2,
-              border: '1px solid #40120EFF', // Borde visible
-              color: '#40120EFF',
-              width: { md: '300px', lg: '400px' }
-            }}
-          />
-        </Box>
-      </Box>
-      <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 0 }}>
-        {items.map(({ text, icon }, index) => (
-          <ListItem key={index} onClick={() => {
-            onClose(); // Close drawer
-            onSelect?.(text); // Notify parent of selected item
-
-            if (text === 'Logout') {
-              logout(); // cerrar sesión y redirigir
-            } else {
-              onSelect?.(text); // navegar al resto de vistas
-            }
-          }}>
-
-            <ListItemIcon sx={{ color: '#40120EFF' }}>{icon}</ListItemIcon>
-            <ListItemText
-              primary={text}
-              slotProps={{
-                primary: {
-                  sx: {
-                    color: '#40120EFF',
-                    fontWeight: 'medium',
-                  },
-                },
+            <InputBase
+              placeholder="Filter options..."
+              sx={{
+                pl: 1.5,
+                pr: 1.5,
+                py: 0.75,
+                borderRadius: 2,
+                border: '1px solid #40120EFF',
+                color: '#40120EFF',
+                width: '100%',
               }}
             />
-          </ListItem>
-        ))}
+          </Box>
+        )}
+      </Box>
+
+      {/* Collapsed */}
+      {collapsed && (
+        <Box textAlign="center" p={3} alignItems="center" minHeight={112}>
+          <img
+            src="MiniLogo.png"
+            alt="Dream Views"
+          />
+        </Box>
+      )}
+
+      {/* Items */}
+      <List sx={{ width: '100%', py: 0 }}>
+        {items.map(({ text, icon }, index) => {
+          // Default items
+          return (
+            <Tooltip
+              key={`${text}-${index}`}
+              title={collapsed ? (text || ' ') : ''}
+              placement="right"
+              disableHoverListener={!collapsed}
+            >
+              <ListItem
+                onClick={() => {
+                  if (isMobile) onClose?.();
+                  if (text === 'Logout') {
+                    logout();
+                  } else {
+                    onSelect?.(text);
+                  }
+                }}
+                sx={{
+                  px: collapsed ? 1 : 2,
+                  minHeight: 44,
+                  cursor: 'pointer',
+                  justifyContent: collapsed ? 'center' : 'flex-start',
+                  width: collapsed ? 50 : '100%',
+                }}
+              >
+                <ListItemIcon
+                  sx={{
+                    color: '#40120EFF',
+                    minWidth: 0,
+                    mr: collapsed ? 0 : 1.5,
+                    justifyContent: 'center',
+                  }}
+                >
+                  {icon}
+                </ListItemIcon>
+                {!collapsed && (
+                  <ListItemText
+                    primary={text}
+                    sx={{
+                      opacity: 1,
+                      transition: theme.transitions.create('opacity', {
+                        duration: theme.transitions.duration.shortest,
+                      }),
+                      whiteSpace: 'nowrap',
+                    }}
+                    slotProps={{
+                      primary: {
+                        sx: {
+                          color: '#40120EFF',
+                          fontWeight: 'medium',
+                        },
+                      },
+                    }}
+                  />
+                )}
+              </ListItem>
+            </Tooltip>
+          );
+        })}
       </List>
+
+      <Tooltip title={collapsed ? 'Expand' : 'Collapse'} placement="right">
+        <IconButton onClick={() => setCollapsed((c) => !c)} sx={{
+          backgroundColor: 'transparent',
+          color: 'transparent',
+          '&:hover': {
+            backgroundColor: '#fff4ec',
+            borderColor: 'transparent'
+          },
+          borderRadius: 0,
+          marginLeft: 1,
+          width: 40,
+          height: 40,
+        }}>
+          <img
+            src={collapsed ? '/Expand.png' : '/Contract.png'}
+            alt={collapsed ? 'Expand' : 'Contract'}
+            width={24}
+            height={24}
+          />
+        </IconButton>
+      </Tooltip>
     </Drawer>
   );
 }