feat: make hide nav info always visible (#7981)

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx

@@ -52,6 +52,16 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
     overflowAnchor: 'none',
 }));
 
+// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
+const StickyContainer = styled(Box)(({ theme }) => ({
+    position: 'sticky',
+    paddingBottom: theme.spacing(1.5),
+    paddingTop: theme.spacing(1),
+    bottom: theme.spacing(0),
+    backgroundColor: theme.palette.background.paper,
+    borderTop: `1px solid ${theme.palette.divider}`,
+}));
+
 export const NavigationSidebar = () => {
     const { routes } = useRoutes();
 
@@ -73,7 +83,6 @@ export const NavigationSidebar = () => {
 
     return (
         <StretchContainer>
-            <NewInUnleash mode={mode} onMiniModeClick={() => setMode('full')} />
             <PrimaryNavigationList
                 mode={mode}
                 onClick={setActiveItem}
@@ -137,12 +146,21 @@ export const NavigationSidebar = () => {
                 />
             )}
 
-            <ShowHide
-                mode={mode}
-                onChange={() => {
-                    setMode(mode === 'full' ? 'mini' : 'full');
-                }}
-            />
+            {/* this will push the show/hide to the bottom on short nav list */}
+            <Box sx={{ flex: 1 }} />
+
+            <StickyContainer>
+                <NewInUnleash
+                    mode={mode}
+                    onMiniModeClick={() => setMode('full')}
+                />
+                <ShowHide
+                    mode={mode}
+                    onChange={() => {
+                        setMode(mode === 'full' ? 'mini' : 'full');
+                    }}
+                />
+            </StickyContainer>
         </StretchContainer>
     );
 };

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx

@@ -18,6 +18,7 @@ import { NewInUnleashItem } from './NewInUnleashItem';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledNewInUnleash = styled('div')(({ theme }) => ({
+    margin: theme.spacing(2, 0, 1, 0),
     borderRadius: theme.shape.borderRadiusMedium,
     [theme.breakpoints.down('lg')]: {
         margin: theme.spacing(2),
@@ -25,6 +26,10 @@ const StyledNewInUnleash = styled('div')(({ theme }) => ({
     },
 }));
 
+const StyledListItem = styled(ListItem)(({ theme }) => ({
+    margin: theme.spacing(1, 0, 1, 0),
+}));
+
 const StyledNewInUnleashHeader = styled('p')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -106,7 +111,7 @@ export const NewInUnleash = ({
 
     if (mode === 'mini' && onMiniModeClick) {
         return (
-            <ListItem disablePadding onClick={onMiniModeClick}>
+            <StyledListItem disablePadding onClick={onMiniModeClick}>
                 <StyledMiniItemButton dense>
                     <Tooltip title='New in Unleash' placement='right'>
                         <StyledMiniItemIcon>
@@ -119,7 +124,7 @@ export const NewInUnleash = ({
                         </StyledMiniItemIcon>
                     </Tooltip>
                 </StyledMiniItemButton>
-            </ListItem>
+            </StyledListItem>
         );
     }
 

frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx

@@ -13,16 +13,6 @@ const ShowHideRow = styled(Box, {
     alignItems: 'center',
     padding: theme.spacing(0, 1, 0, mode === 'mini' ? 1.5 : 2),
     cursor: 'pointer',
-    position: 'sticky',
-    bottom: theme.spacing(2),
-    width: '100%',
-}));
-
-// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
-const ShowHideContainer = styled(Box)(({ theme }) => ({
-    flexGrow: 1,
-    display: 'flex',
-    alignItems: 'end',
 }));
 
 export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
@@ -30,32 +20,30 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
     onChange,
 }) => {
     return (
-        <ShowHideContainer>
-            <ShowHideRow onClick={onChange} mode={mode}>
-                {mode === 'full' && (
-                    <Box
-                        sx={(theme) => ({
-                            color: theme.palette.neutral.main,
-                            fontSize: 'small',
-                        })}
-                    >
-                        Hide (⌘ + B)
-                    </Box>
+        <ShowHideRow onClick={onChange} mode={mode}>
+            {mode === 'full' && (
+                <Box
+                    sx={(theme) => ({
+                        color: theme.palette.neutral.main,
+                        fontSize: 'small',
+                    })}
+                >
+                    Hide (⌘ + B)
+                </Box>
+            )}
+            <IconButton>
+                {mode === 'full' ? (
+                    <HideIcon color='primary' />
+                ) : (
+                    <Tooltip title='Expand (⌘ + B)' placement='right'>
+                        <ExpandIcon
+                            data-testid='expand-navigation'
+                            color='primary'
+                        />
+                    </Tooltip>
                 )}
-                <IconButton>
-                    {mode === 'full' ? (
-                        <HideIcon color='primary' />
-                    ) : (
-                        <Tooltip title='Expand (⌘ + B)' placement='right'>
-                            <ExpandIcon
-                                data-testid='expand-navigation'
-                                color='primary'
-                            />
-                        </Tooltip>
-                    )}
-                </IconButton>
-            </ShowHideRow>
-        </ShowHideContainer>
+            </IconButton>
+        </ShowHideRow>
     );
 };