feat: implement sidebar changes based on dqa and handle scrolling (#125)

## Description

<!-- Write and explain of the changes introduced by this PR for the reviewers to fully understand -->

## Screenshot

<!-- Provide a screenshot or gif of the change to demonstrate it -->

## Test Plan

<!-- Explain what you tested and why -->

<!--
  Have any questions? Check out the contributing doc for more
-->

src/ui/Navigation/components/Drawer/Drawer.styles.ts

@@ -48,15 +48,19 @@ export const NavHeader = styled.h2`
 
 export const ExtrasContainer = styled.div`
   border-top: 1px solid ${({ theme }) => theme.utils.getColor('lightGrey', 200)};
-  flex-shrink: 0;
-  padding: ${({ theme }) => `${theme.spacing.md} 0`};
+  padding: ${({ theme }) => `${theme.spacing.lg} 0`};
+  overflow: auto;
+
+  //Stick the scrollbar to the edge
+  box-sizing: border-box;
+  padding-right: ${({ theme }) => `${theme.spacing.md}`};
+  width: calc(100% + ${({ theme }) => `${theme.spacing.md}`});
 `;
 
 export const ExtrasSection = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing.sm};
-  padding: ${({ theme }) => theme.spacing.sm} 0;
 `;
 
 export const ExtrasSectionTitle = styled.h2`
@@ -85,7 +89,7 @@ export const ExtrasSectionMenuItem = styled.a`
 `;
 
 export const NavElementsContainer = styled.div`
-  padding: ${({ theme }) => `${rem(10)} ${theme.spacing.md} ${theme.spacing.md}`};
+  padding: ${({ theme }) => `${rem(10)} ${theme.spacing.md} 0`};
   display: flex;
   flex-direction: column;
   flex-grow: 1;

src/ui/Navigation/components/Drawer/Drawer.tsx

@@ -61,7 +61,7 @@ function Drawer(props: DrawerProps) {
                     rel={'noreferrer noopener'}
                   >
                     <MenuIcon theme={theme}>
-                      <Icon color={'#0E0E17'} name={item.iconName} />
+                      <Icon color={theme.utils.getColor('lightGrey', 650)} name={item.iconName} />
                     </MenuIcon>
                     <MenuItemText theme={theme}>{item.text}</MenuItemText>
                   </ExtrasSectionMenuItem>
@@ -78,11 +78,11 @@ function Drawer(props: DrawerProps) {
     return (
       <NavElementsContainer theme={theme}>
         <NavHeader theme={theme}>{header}</NavHeader>
-        <Navigation theme={theme} menuItems={menuItems} />
+        <Navigation theme={theme} menuItems={menuItems} hasExtras={Boolean(extras)} />
         {extrasElement}
       </NavElementsContainer>
     );
-  }, [extrasElement, menuItems, header, theme]);
+  }, [theme, header, menuItems, extras, extrasElement]);
 
   const orgSwitcherElement = useMemo(() => {
     return (

src/ui/Navigation/components/Drawer/Navigation/Navigation.styles.ts

@@ -1,19 +1,25 @@
 import styled from '@emotion/styled';
 import { transition } from '@orfium/ictinus/dist/theme/functions';
+import { rem } from 'polished';
 
-export const NavigationContainer = styled.div`
+export const NavigationContainer = styled.div<{ hasExtras: boolean }>`
   ${transition(10.2)};
   //width: 100%;
   background-color: white;
-  box-sizing: border-box;
-  flex-grow: 1;
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing.sm};
   overflow: auto;
+  padding-bottom: ${({ theme }) => theme.spacing.lg};
+  max-height: ${({ hasExtras }) => (hasExtras ? `calc(100% - ${rem(184)})` : '')};
+
+  // handle scrolling
+  flex-basis: ${({ hasExtras }) => (hasExtras ? '' : 0)};
+  flex-grow: ${({ hasExtras }) => (hasExtras ? 0 : 1)};
 
-  padding-bottom: ${({ theme }) => theme.spacing.sm};
   //Stick the scrollbar to the edge
+  box-sizing: border-box;
   padding-right: ${({ theme }) => `${theme.spacing.md}`};
   width: calc(100% + ${({ theme }) => `${theme.spacing.md}`});
 

src/ui/Navigation/components/Drawer/Navigation/Navigation.tsx

@@ -7,9 +7,10 @@ import { NavigationContainer } from './Navigation.styles';
 type NavigationProps = {
   theme: Theme;
   menuItems: MenuItemType[];
+  hasExtras: boolean;
 };
 
-function Navigation({ menuItems, theme }: NavigationProps) {
+function Navigation({ menuItems, theme, hasExtras }: NavigationProps) {
   const menuItemElements = useMemo(() => {
     return menuItems.map((menuItem) => {
       return menuItem?.children?.length ? (
@@ -21,7 +22,7 @@ function Navigation({ menuItems, theme }: NavigationProps) {
   }, [menuItems, theme]);
 
   return (
-    <NavigationContainer data-navigation-container theme={theme}>
+    <NavigationContainer data-navigation-container theme={theme} hasExtras={hasExtras}>
       {menuItemElements}
     </NavigationContainer>
   );