From 8d898c2ac9974bea1421ef7f7b3865333b47b4c9 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 29 May 2024 10:47:57 +0200
Subject: [PATCH] feat: smart sticky expand/hide button (#7201)

---
 .../NavigationSidebar/NavigationSidebar.tsx   | 89 +++++++++----------
 .../MainLayout/NavigationSidebar/ShowHide.tsx | 61 +++++++------
 2 files changed, 78 insertions(+), 72 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index b9649a023f..2f042ddcd1 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -41,9 +41,6 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(2),
     alignSelf: 'stretch',
-}));
-
-export const ScreenHeightBox = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
@@ -64,69 +61,67 @@ export const NavigationSidebar = () => {
 
     return (
         <StretchContainer>
-            <ScreenHeightBox>
-                <PrimaryNavigationList
+            <PrimaryNavigationList
+                mode={mode}
+                onClick={setActiveItem}
+                activeItem={activeItem}
+            />
+            <SecondaryNavigation
+                expanded={expanded.includes('configure')}
+                onExpandChange={(expand) => {
+                    changeExpanded('configure', expand);
+                }}
+                mode={mode}
+                title='Configure'
+            >
+                <SecondaryNavigationList
+                    routes={routes.mainNavRoutes}
                     mode={mode}
                     onClick={setActiveItem}
                     activeItem={activeItem}
                 />
+            </SecondaryNavigation>
+            {mode === 'full' && (
                 <SecondaryNavigation
-                    expanded={expanded.includes('configure')}
+                    expanded={expanded.includes('admin')}
                     onExpandChange={(expand) => {
-                        changeExpanded('configure', expand);
+                        changeExpanded('admin', expand);
                     }}
                     mode={mode}
-                    title='Configure'
+                    title='Admin'
                 >
                     <SecondaryNavigationList
-                        routes={routes.mainNavRoutes}
+                        routes={routes.adminRoutes}
                         mode={mode}
                         onClick={setActiveItem}
                         activeItem={activeItem}
                     />
                 </SecondaryNavigation>
-                {mode === 'full' && (
-                    <SecondaryNavigation
-                        expanded={expanded.includes('admin')}
-                        onExpandChange={(expand) => {
-                            changeExpanded('admin', expand);
-                        }}
-                        mode={mode}
-                        title='Admin'
-                    >
-                        <SecondaryNavigationList
-                            routes={routes.adminRoutes}
-                            mode={mode}
-                            onClick={setActiveItem}
-                            activeItem={activeItem}
-                        />
-                    </SecondaryNavigation>
-                )}
+            )}
 
-                {mode === 'mini' && (
-                    <ShowAdmin
-                        onChange={() => {
-                            changeExpanded('admin', true);
-                            setMode('full');
-                        }}
-                    />
-                )}
-
-                {showRecentProject && (
-                    <RecentProjectsNavigation
-                        mode={mode}
-                        projectId={lastViewed}
-                        onClick={() => setActiveItem('/projects')}
-                    />
-                )}
-
-                <ShowHide
-                    mode={mode}
+            {mode === 'mini' && (
+                <ShowAdmin
                     onChange={() => {
-                        setMode(mode === 'full' ? 'mini' : 'full');
+                        changeExpanded('admin', true);
+                        setMode('full');
                     }}
                 />
-            </ScreenHeightBox>
+            )}
+
+            {showRecentProject && (
+                <RecentProjectsNavigation
+                    mode={mode}
+                    projectId={lastViewed}
+                    onClick={() => setActiveItem('/projects')}
+                />
+            )}
+
+            <ShowHide
+                mode={mode}
+                onChange={() => {
+                    setMode(mode === 'full' ? 'mini' : 'full');
+                }}
+            />
         </StretchContainer>
     );
 };
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
index 7ee109dcdf..06ae806eaf 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
@@ -5,15 +5,24 @@ import HideIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import ExpandIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
 import SettingsIcon from '@mui/icons-material/Settings';
 
-const ShowHideWrapper = styled(Box, {
+const ShowHideRow = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'mode',
 })<{ mode: NavigationMode }>(({ theme, mode }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
     padding: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
-    marginTop: 'auto',
     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 }> = ({
@@ -21,30 +30,32 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
     onChange,
 }) => {
     return (
-        <ShowHideWrapper 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>
+        <ShowHideContainer>
+            <ShowHideRow onClick={onChange} mode={mode}>
+                {mode === 'full' && (
+                    <Box
+                        sx={(theme) => ({
+                            color: theme.palette.neutral.main,
+                            fontSize: 'small',
+                        })}
+                    >
+                        Hide (⌘ + B)
+                    </Box>
                 )}
-            </IconButton>
-        </ShowHideWrapper>
+                <IconButton>
+                    {mode === 'full' ? (
+                        <HideIcon color='primary' />
+                    ) : (
+                        <Tooltip title='Expand (⌘ + B)' placement='right'>
+                            <ExpandIcon
+                                data-testid='expand-navigation'
+                                color='primary'
+                            />
+                        </Tooltip>
+                    )}
+                </IconButton>
+            </ShowHideRow>
+        </ShowHideContainer>
     );
 };