Merge pull request #4109 from omnivore-app/fix/web-nav-menu

Implement dismiss on click for the new navigation menu

packages/web/components/templates/NavigationLayout.tsx

@@ -164,6 +164,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
             section={props.section}
             setShowAddLinkModal={setShowAddLinkModal}
             showMenu={props.showNavigationMenu}
+            setShowMenu={props.setShowNavigationMenu}
           />
           <SpanBox
             css={{

packages/web/components/templates/navMenu/NavigationMenu.tsx

@@ -67,9 +67,11 @@ type NavigationMenuProps = {
   setShowAddLinkModal: (show: boolean) => void
 
   showMenu: boolean
+  setShowMenu: (show: boolean) => void
 }
 
 export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
+  const [dismissed, setDismissed] = useState(false)
   return (
     <>
       <Box
@@ -86,14 +88,27 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
             display: 'none',
           },
           '@mdDown': {
-            transition: 'top 100ms, visibility 100ms',
-            top: props.showMenu ? '0' : '100%',
-            visibility: props.showMenu ? 'visible' : 'hidden',
+            transition: 'left 100ms, visibility 100ms',
+            top: '0',
+            left: props.showMenu && !dismissed ? '0' : '-280px',
+            visibility: props.showMenu && !dismissed ? 'visible' : 'hidden',
             boxShadow:
-              'rgb(48, 54, 61) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px',
+              props.showMenu && !dismissed
+                ? 'rgb(48, 54, 61) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px'
+                : 'unset',
           },
           zIndex: 5,
         }}
+        onClick={(event) => {
+          // on small screens we want to dismiss the menu after click
+          if (window.innerWidth < 400) {
+            setDismissed(true)
+            setTimeout(() => {
+              props.setShowMenu(false)
+            }, 100)
+          }
+          event.stopPropagation()
+        }}
       >
         {/* This gives a header when scrolling so the menu button is visible still */}
         <Box
@@ -105,6 +120,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
             height: '60px',
             bg: '$thLeftMenuBackground',
             zIndex: '100',
+            visibility: props.showMenu && !dismissed ? 'visible' : 'hidden',
           }}
         ></Box>
         <Box css={{ width: '100%', height: '60px' }}></Box>
@@ -861,6 +877,8 @@ type NavButtonProps = {
 
   isSelected: boolean
   section: NavigationSection
+
+  setShowMenu: (show: boolean) => void
 }
 
 function NavButton(props: NavButtonProps): JSX.Element {
@@ -907,6 +925,7 @@ function NavButton(props: NavButtonProps): JSX.Element {
       }}
       title={props.text}
       onClick={(e) => {
+        // console.log('clicked navigation menu')
         router.push(`/l/` + props.section)
       }}
     >

packages/web/pages/l/[section].tsx

@@ -46,7 +46,6 @@ export default function Home(): JSX.Element {
           <LibraryContainer
             folder="inbox"
             filterFunc={(item) => {
-              console.log('filtering: ', item)
               return (
                 item.state != 'DELETED' &&
                 !item.isArchived &&