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 = () => {
                 />
             )}
 
+            {/* 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,7 +20,6 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
     onChange,
 }) => {
     return (
-        <ShowHideContainer>
         <ShowHideRow onClick={onChange} mode={mode}>
             {mode === 'full' && (
                 <Box
@@ -55,7 +44,6 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
                 )}
             </IconButton>
         </ShowHideRow>
-        </ShowHideContainer>
     );
 };