From 01e9486b7fb4a71a99b9c8a1affcad2dc269c10f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 14:08:00 +0800
Subject: [PATCH] Add the footer menu in settings, remove header menu in
 settings

---
 .../components/patterns/SettingsHeader.tsx    |  3 --
 .../web/components/templates/SettingsMenu.tsx |  2 +
 .../templates/homeFeed/LibraryFilterMenu.tsx  | 41 +--------------
 .../components/templates/navMenu/Footer.tsx   | 50 +++++++++++++++++++
 4 files changed, 54 insertions(+), 42 deletions(-)
 create mode 100644 packages/web/components/templates/navMenu/Footer.tsx

diff --git a/packages/web/components/patterns/SettingsHeader.tsx b/packages/web/components/patterns/SettingsHeader.tsx
index b8c218a08..e50bfe10f 100644
--- a/packages/web/components/patterns/SettingsHeader.tsx
+++ b/packages/web/components/patterns/SettingsHeader.tsx
@@ -31,9 +31,6 @@ export function SettingsHeader(props: HeaderProps): JSX.Element {
         }}
       >
         <LogoBox />
-        <HStack css={{ ml: 'auto' }}>
-          <PrimaryDropdown showThemeSection={true} />
-        </HStack>
       </HStack>
     </nav>
   )
diff --git a/packages/web/components/templates/SettingsMenu.tsx b/packages/web/components/templates/SettingsMenu.tsx
index 5663ae6d6..72ee1f099 100644
--- a/packages/web/components/templates/SettingsMenu.tsx
+++ b/packages/web/components/templates/SettingsMenu.tsx
@@ -7,6 +7,7 @@ import { styled, theme } from '../tokens/stitches.config'
 import { Button } from '../elements/Button'
 import { ArrowSquareUpRight } from 'phosphor-react'
 import { useRouter } from 'next/router'
+import { NavMenuFooter } from './navMenu/Footer'
 
 const HorizontalDivider = styled(SpanBox, {
   width: '100%',
@@ -173,6 +174,7 @@ export function SettingsMenu(): JSX.Element {
             destination="https://docs.omnivore.app"
             title="Documentation"
           />
+          <NavMenuFooter />
         </VStack>
       </Box>
       {/* This spacer pushes library content to the right of 
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 958b30b73..5cfa16319 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -22,6 +22,7 @@ import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
 import { SplitButton } from '../../elements/SplitButton'
 import { AvatarDropdown } from '../../elements/AvatarDropdown'
 import { PrimaryDropdown } from '../PrimaryDropdown'
+import { NavMenuFooter } from '../navMenu/Footer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'
 
@@ -122,7 +123,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         <SavedSearches {...props} savedSearches={savedSearches} />
         <Subscriptions {...props} subscriptions={subscriptions} />
         <Labels {...props} labels={labels} />
-        <Footer {...props} />
+        <NavMenuFooter {...props} />
         <Box css={{ height: '250px ' }} />
       </Box>
       {/* This spacer pushes library content to the right of 
@@ -610,41 +611,3 @@ function EditButton(props: EditButtonProps): JSX.Element {
     </Link>
   )
 }
-
-const Footer = (props: LibraryFilterMenuProps): JSX.Element => {
-  return (
-    <HStack
-      css={{
-        gap: '10px',
-        height: '65px',
-        position: 'fixed',
-        bottom: '0%',
-        alignItems: 'center',
-
-        backgroundColor: '$thBackground2',
-        width: LIBRARY_LEFT_MENU_WIDTH,
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        '&::-webkit-scrollbar': {
-          display: 'none',
-        },
-        '@mdDown': {
-          width: '100%',
-        },
-      }}
-    >
-      <PrimaryDropdown showThemeSection={true} />
-      <SpanBox
-        css={{
-          marginLeft: 'auto',
-          marginRight: '15px',
-        }}
-      >
-        <SplitButton
-          title="Add"
-          setShowLinkMode={() => props.setShowAddLinkModal(true)}
-        />
-      </SpanBox>
-    </HStack>
-  )
-}
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
new file mode 100644
index 000000000..4ac9bcf67
--- /dev/null
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -0,0 +1,50 @@
+import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { SplitButton } from '../../elements/SplitButton'
+import { PrimaryDropdown } from '../PrimaryDropdown'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../homeFeed/LibraryFilterMenu'
+
+type NavMenuFooterProps = {
+  setShowAddLinkModal?: (show: true) => void
+}
+
+export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
+  return (
+    <HStack
+      css={{
+        gap: '10px',
+        height: '65px',
+        position: 'fixed',
+        bottom: '0%',
+        alignItems: 'center',
+
+        backgroundColor: '$thBackground2',
+        width: LIBRARY_LEFT_MENU_WIDTH,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+        '@mdDown': {
+          width: '100%',
+        },
+      }}
+    >
+      <PrimaryDropdown showThemeSection={true} />
+      <SpanBox
+        css={{
+          marginLeft: 'auto',
+          marginRight: '15px',
+        }}
+      >
+        {props.setShowAddLinkModal && (
+          <SplitButton
+            title="Add"
+            setShowLinkMode={() => {
+              props.setShowAddLinkModal && props.setShowAddLinkModal(true)
+            }}
+          />
+        )}
+      </SpanBox>
+    </HStack>
+  )
+}