Move navbar overlap conpensation to also lift the app menu when it's closed

Author: Polleps

browser/data-browser/src/components/SideBar/About.tsx

@@ -2,9 +2,6 @@ import { styled } from 'styled-components';
 import React from 'react';
 import { FaGithub, FaDiscord, FaBook } from 'react-icons/fa';
 import { IconButtonLink, IconButtonVariant } from '../IconButton/IconButton';
-import { useMediaQuery } from '../../hooks/useMediaQuery';
-import { useSettings } from '../../helpers/AppSettings';
-import { transition } from '../../helpers/transition';
 
 interface AboutItem {
   icon: React.ReactNode;
@@ -31,16 +28,12 @@ const aboutMenuItems: AboutItem[] = [
 ];
 
 export function About() {
-  const narrow = useMediaQuery('(max-width: 920px)');
-  const { navbarFloating } = useSettings();
-  const elivate = narrow && navbarFloating;
-
   return (
     <>
       {/* <SideBarHeader>
         <Logo style={{ height: '1.1rem', maxWidth: '100%' }} />
       </SideBarHeader> */}
-      <AboutWrapper $elivate={elivate}>
+      <AboutWrapper>
         {aboutMenuItems.map(({ href, icon, helper }) => (
           <IconButtonLink
             target='_blank'
@@ -60,12 +53,10 @@ export function About() {
   );
 }
 
-const AboutWrapper = styled.div<{ $elivate: boolean }>`
+const AboutWrapper = styled.div`
   --inner-padding: 0.5rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-left: calc(1rem - var(--inner-padding));
-  padding-bottom: ${p => (p.$elivate ? '3.5rem' : '0rem')};
-  ${transition('padding-bottom')}
 `;

browser/data-browser/src/components/SideBar/OverlapSpacer.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { useSettings } from '../../helpers/AppSettings';
+import { styled } from 'styled-components';
+import { transition } from '../../helpers/transition';
+
+export function OverlapSpacer(): JSX.Element {
+  const narrow = useMediaQuery('(max-width: 950px)');
+  const { navbarFloating } = useSettings();
+  const elivate = narrow && navbarFloating;
+
+  return <Elivator $elivate={elivate} />;
+}
+
+const Elivator = styled.div<{ $elivate: boolean }>`
+  height: ${p => (p.$elivate ? '3.5rem' : '0rem')};
+  ${transition('height')}
+`;

browser/data-browser/src/components/SideBar/index.tsx

@@ -6,6 +6,7 @@ import { SideBarDrive } from './SideBarDrive';
 import { DragAreaBase, useResizable } from '../../hooks/useResizable';
 import { useCombineRefs } from '../../hooks/useCombineRefs';
 import { NavBarSpacer } from '../NavBarSpacer';
+import { OverlapSpacer } from './OverlapSpacer';
 import { AppMenu } from './AppMenu';
 import { About } from './About';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
@@ -80,6 +81,7 @@ export function SideBar(): JSX.Element {
             </SideBarPanel>
           </Column>
         </MenuWrapper>
+        <OverlapSpacer />
         <NavBarSpacer baseMargin='1rem' position='bottom' />
         <SideBarDragArea ref={dragAreaRef} isDragging={isDragging} />
       </SideBarStyled>