fix(CE): dashboard sidebar responsiveness

Multiwoven · Oct 17, 2024 · 7ce0766 · 7ce0766
1 parent 0996bcb
commit 7ce0766
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/ui/src/views/Sidebar/Sidebar.tsx b/ui/src/views/Sidebar/Sidebar.tsx
@@ -90,16 +90,7 @@ const renderMenuSection = (section: MenuSection, index: number) => (
 );
 
 const SideBarFooter = () => (
-  <Stack position='absolute' bottom='0' left='0px' right='0px' margin='24px 16px'>
-    <Box />
-    <Stack spacing='0'>
-      <NavLink to='/settings'>
-        <NavButton label='Settings' icon={FiSettings} />
-      </NavLink>
-      <NavLink to='https://docs.multiwoven.com/get-started/introduction'>
-        <NavButton label='Documentation' icon={FiBookOpen} />
-      </NavLink>
-    </Stack>
+  <Stack>
     <Profile />
   </Stack>
 );
@@ -114,6 +105,7 @@ const Sidebar = (): JSX.Element => {
       borderRightWidth='1px'
       borderRightStyle='solid'
       borderRightColor='gray.400'
+      minWidth='240px'
     >
       <Flex flex='1' bg='bg.surface' maxW={{ base: 'full', sm: 'xs' }} paddingX={4} paddingY={6}>
         <Stack justify='space-between' spacing='1' width='full'>
@@ -124,10 +116,35 @@ const Sidebar = (): JSX.Element => {
             <Box bgColor='gray.300'>
               <Divider orientation='horizontal' />
             </Box>
+          </Stack>
+          <Stack
+            paddingX='6px'
+            marginTop='20px'
+            spacing='6'
+            shouldWrapChildren
+            overflow='hidden auto'
+            css={{
+              '&::-webkit-scrollbar': {
+                width: '2px',
+              },
+              '&::-webkit-scrollbar-thumb': {
+                backgroundColor: 'var(--chakra-colors-gray-400)',
+              },
+            }}
+          >
             <Workspace />
             {menus.map(renderMenuSection)}
-            <SideBarFooter />
+            <Box />
+            <Stack spacing='0'>
+              <NavLink to='/settings'>
+                <NavButton label='Settings' icon={FiSettings} />
+              </NavLink>
+              <NavLink to='https://docs.squared.ai/guides/core-concepts'>
+                <NavButton label='Documentation' icon={FiBookOpen} />
+              </NavLink>
+            </Stack>
           </Stack>
+          <SideBarFooter />
         </Stack>
       </Flex>
     </Flex>