From f8e6eb12f8a5cda839275712e8f910d1c40c48e9 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Thu, 2 Nov 2023 17:22:01 +0100
Subject: [PATCH] Move navbar overlap conpensation to also lift the app menu
 when it's closed

---
 .../src/components/SideBar/About.tsx           | 13 ++-----------
 .../src/components/SideBar/OverlapSpacer.tsx   | 18 ++++++++++++++++++
 .../src/components/SideBar/index.tsx           |  2 ++
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 browser/data-browser/src/components/SideBar/OverlapSpacer.tsx

diff --git a/browser/data-browser/src/components/SideBar/About.tsx b/browser/data-browser/src/components/SideBar/About.tsx
index 47703096b..73589d293 100644
--- a/browser/data-browser/src/components/SideBar/About.tsx
+++ b/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')}
 `;
diff --git a/browser/data-browser/src/components/SideBar/OverlapSpacer.tsx b/browser/data-browser/src/components/SideBar/OverlapSpacer.tsx
new file mode 100644
index 000000000..ff4d73712
--- /dev/null
+++ b/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')}
+`;
diff --git a/browser/data-browser/src/components/SideBar/index.tsx b/browser/data-browser/src/components/SideBar/index.tsx
index 0031c5e38..8871065e4 100644
--- a/browser/data-browser/src/components/SideBar/index.tsx
+++ b/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>