Only indent the search bar in compact mode if the menu is closed

packages/web/components/templates/NavigationLayout.tsx

@@ -17,7 +17,6 @@ import { ThemeId, theme } from '../tokens/stitches.config'
 import { NavigationMenu } from './navMenu/NavigationMenu'
 import { Button } from '../elements/Button'
 import { List } from '@phosphor-icons/react'
-import { usePersistedState } from '../../lib/hooks/usePersistedState'
 import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu'
 import { AddLinkModal } from './AddLinkModal'
 import { saveUrlMutation } from '../../lib/networking/mutations/saveUrlMutation'
@@ -39,6 +38,9 @@ type NavigationLayoutProps = {
   rightPane?: ReactNode
   section: NavigationSection
   pageMetaDataProps?: PageMetaDataProps
+
+  showNavigationMenu: boolean
+  setShowNavigationMenu: (show: boolean) => void
 }
 
 export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
@@ -50,12 +52,6 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
   const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] =
     useState(false)
 
-  const [showNavMenu, setShowNavMenu, isLoading] = usePersistedState<boolean>({
-    key: 'nav-show-menu',
-    isSessionStorage: false,
-    initialValue: true,
-  })
-
   useKeyboardShortcuts(navigationCommands(router))
 
   useKeyboardShortcuts(
@@ -136,15 +132,15 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     }
   }, [showLogout])
 
-  if (isLoading) {
-    return (
-      <HStack
-        css={{ width: '100vw', height: '100vh' }}
-        distribution="start"
-        alignment="start"
-      ></HStack>
-    )
-  }
+  // if (isLoading) {
+  //   return (
+  //     <HStack
+  //       css={{ width: '100vw', height: '100vh' }}
+  //       distribution="start"
+  //       alignment="start"
+  //     ></HStack>
+  //   )
+  // }
 
   return (
     <HStack
@@ -157,17 +153,17 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
       ) : null}
 
       <Header
-        menuOpen={showNavMenu}
+        menuOpen={props.showNavigationMenu}
         toggleMenu={() => {
-          setShowNavMenu(!showNavMenu)
+          props.setShowNavigationMenu(!props.showNavigationMenu)
         }}
       />
-      {!isLoading && showNavMenu && (
+      {props.showNavigationMenu && (
         <>
           <NavigationMenu
             section={props.section}
             setShowAddLinkModal={setShowAddLinkModal}
-            showMenu={showNavMenu}
+            showMenu={props.showNavigationMenu}
           />
           <SpanBox
             css={{

packages/web/components/templates/library/LibraryContainer.tsx

@@ -77,6 +77,8 @@ const TIMEOUT_DELAYS = [2000, 3500, 5000]
 type LibraryContainerProps = {
   folder: string
   filterFunc: (item: LibraryItemNode) => boolean
+
+  showNavigationMenu: boolean
 }
 
 export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
@@ -787,6 +789,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
       setIsChecked={setIsChecked}
       itemIsChecked={itemIsChecked}
       multiSelectMode={multiSelectMode}
+      showNavigationMenu={props.showNavigationMenu}
       setMultiSelectMode={setMultiSelectMode}
       performMultiSelectAction={performMultiSelectAction}
       searchTerm={queryInputs.searchQuery}
@@ -885,6 +888,8 @@ export type HomeFeedContentProps = {
     locale: string
   ) => Promise<void>
 
+  showNavigationMenu: boolean
+
   setIsChecked: (itemId: string, set: boolean) => void
   itemIsChecked: (itemId: string) => boolean
 
@@ -939,9 +944,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         layout={layout}
         viewer={viewerData?.me}
         updateLayout={updateLayout}
-        showFilterMenu={true}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        setShowFilterMenu={() => {}}
+        showFilterMenu={props.showNavigationMenu}
         searchTerm={props.searchTerm}
         applySearchQuery={(searchQuery: string) => {
           props.applySearchQuery(searchQuery)

packages/web/components/templates/library/LibraryHeader.tsx

@@ -4,18 +4,15 @@ import { theme } from '../../tokens/stitches.config'
 import { FormInput } from '../../elements/FormElements'
 import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { Button, IconButton } from '../../elements/Button'
+import { Button } from '../../elements/Button'
 import { FunnelSimple, X } from '@phosphor-icons/react'
-import { LayoutType, LibraryMode } from '../homeFeed/HomeFeedContainer'
+import { LayoutType } from '../homeFeed/HomeFeedContainer'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
-import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from '../homeFeed/HeaderSpacer'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu'
 import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
 import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
-import { HeaderToggleTLDRIcon } from '../../elements/icons/HeaderToggleTLDRIcon'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
-import { userHasFeature } from '../../../lib/featureFlag'
 import {
   MultiSelectControls,
   CheckBoxButton,
@@ -33,7 +30,6 @@ export type LibraryHeaderProps = {
   applySearchQuery: (searchQuery: string) => void
 
   showFilterMenu: boolean
-  setShowFilterMenu: (show: boolean) => void
 
   numItemsSelected: number
   multiSelectMode: MultiSelectMode
@@ -93,7 +89,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
             right: '0',
           },
           '@xlgDown': {
-            px: '40px',
+            px: props.showFilterMenu ? '0px' : '40px',
           },
         }}
       >

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

@@ -263,7 +263,6 @@ const Shortcuts = (props: NavigationMenuProps): JSX.Element => {
         type: 'internal',
         index: 0,
       })
-      console.log('create leaf: ', result)
     }
   }, [treeRef])
 
@@ -390,7 +389,6 @@ async function setShortcuts(
 
 async function resetShortcuts(path: string): Promise<Shortcut[]> {
   const url = new URL(path, fetchEndpoint)
-  console.log('resetting shortcuts')
   try {
     const response = await fetch(url.toString(), {
       method: 'DELETE',
@@ -415,12 +413,10 @@ async function resetShortcuts(path: string): Promise<Shortcut[]> {
 const cachedShortcutsData = (): Shortcut[] | undefined => {
   if (typeof localStorage !== 'undefined') {
     const str = localStorage.getItem('/api/shortcuts')
-    console.log('cached shortcuts: ', str)
     if (str) {
       return JSON.parse(str) as Shortcut[]
     }
   }
-  console.log('undefined shortcuts')
   return undefined
 }
 
@@ -515,7 +511,6 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
 
   const onActivate = useCallback(
     (node: NodeApi<Shortcut>) => {
-      console.log('onActivate: ', node)
       if (node.data.type == 'folder') {
         const join = node.data.join
         if (join == 'or') {
@@ -524,7 +519,6 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
               return `(${child.data.filter})`
             })
             .join(' OR ')
-          console.log('query: ', query)
         }
       } else if (node.data.section != null && node.data.filter != null) {
         router.push(`/l/${node.data.section}?q=${node.data.filter}`)
@@ -550,12 +544,12 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
   }
 
   const maximumHeight = useMemo(() => {
-    // recurse the tree
+    if (!data) {
+      return 320
+    }
     return countTotalShortcuts(data as Shortcut[]) * 36
   }, [data])
 
-  console.log('maximumHeight: ', maximumHeight)
-
   return (
     <Box
       ref={ref}

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

@@ -8,11 +8,19 @@ import { HomeContainer } from '../../components/nav-containers/HomeContainer'
 import { LibraryContainer } from '../../components/templates/library/LibraryContainer'
 import { useMemo } from 'react'
 import { HighlightsContainer } from '../../components/nav-containers/HighlightsContainer'
+import { usePersistedState } from '../../lib/hooks/usePersistedState'
 
 export default function Home(): JSX.Element {
   const router = useRouter()
   useApplyLocalTheme()
 
+  const [showNavigationMenu, setShowNavigationMenu] =
+    usePersistedState<boolean>({
+      key: 'nav-show-menu',
+      isSessionStorage: false,
+      initialValue: true,
+    })
+
   const section: NavigationSection | undefined = useMemo(() => {
     if (!router.isReady) {
       return undefined
@@ -45,6 +53,7 @@ export default function Home(): JSX.Element {
                 item.folder == 'inbox'
               )
             }}
+            showNavigationMenu={showNavigationMenu}
           />
         )
       case 'subscriptions':
@@ -58,6 +67,7 @@ export default function Home(): JSX.Element {
                 item.folder == 'following'
               )
             }}
+            showNavigationMenu={showNavigationMenu}
           />
         )
       case 'archive':
@@ -65,6 +75,7 @@ export default function Home(): JSX.Element {
           <LibraryContainer
             folder="archive"
             filterFunc={(item) => item.state != 'DELETED' && item.isArchived}
+            showNavigationMenu={showNavigationMenu}
           />
         )
       case 'trash':
@@ -72,6 +83,7 @@ export default function Home(): JSX.Element {
           <LibraryContainer
             folder="trash"
             filterFunc={(item) => item.state == 'DELETED'}
+            showNavigationMenu={showNavigationMenu}
           />
         )
 
@@ -81,7 +93,11 @@ export default function Home(): JSX.Element {
   }
 
   return (
-    <NavigationLayout section={section ?? 'home'}>
+    <NavigationLayout
+      section={section ?? 'home'}
+      showNavigationMenu={showNavigationMenu}
+      setShowNavigationMenu={setShowNavigationMenu}
+    >
       {sectionView(section)}
     </NavigationLayout>
   )