Improve nav menu on smaller screens, record current home position

packages/web/components/nav-containers/home.tsx

@@ -29,6 +29,7 @@ import { Toaster } from 'react-hot-toast'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 
 export function HomeContainer(): JSX.Element {
+  const router = useRouter()
   const homeData = useGetHomeItems()
   const { viewerData } = useGetViewerQuery()
 
@@ -38,6 +39,10 @@ export function HomeContainer(): JSX.Element {
     return viewerData?.me?.profile.username
   }, [viewerData])
 
+  useEffect(() => {
+    window.sessionStorage.setItem('nav-return', router.asPath)
+  }, [router.asPath])
+
   return (
     <VStack
       distribution="start"
@@ -48,6 +53,10 @@ export function HomeContainer(): JSX.Element {
         pt: '45px',
         minHeight: '100vh',
         minWidth: '320px',
+        '@mdDown': {
+          pt: '0px',
+          mt: '80px',
+        },
       }}
     >
       <Toaster />
@@ -265,7 +274,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
         itemsPerPage={4}
         loadMoreButtonText="Load more Top Picks"
         render={(homeItem) => (
-          <TopicPickHomeItemView
+          <TopPicksItemView
             key={homeItem.id}
             homeItem={homeItem}
             dispatchList={dispatchList}
@@ -552,12 +561,12 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
   )
 }
 
-type TopPickItemViewProps = {
+type TopPicksItemViewProps = {
   dispatchList: (args: { type: string; itemId?: string }) => void
 }
 
-const TopicPickHomeItemView = (
-  props: HomeItemViewProps & TopPickItemViewProps
+const TopPicksItemView = (
+  props: HomeItemViewProps & TopPicksItemViewProps
 ): JSX.Element => {
   const router = useRouter()
   return (

packages/web/components/templates/NavigationLayout.tsx

@@ -15,7 +15,6 @@ import { updateTheme } from '../../lib/themeUpdater'
 import { Priority, useRegisterActions } from 'kbar'
 import { ThemeId, theme } from '../tokens/stitches.config'
 import { NavigationMenu } from './navMenu/NavigationMenu'
-import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
 import { Button } from '../elements/Button'
 import { List } from '@phosphor-icons/react'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
@@ -131,19 +130,13 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
       {props.pageMetaDataProps ? (
         <PageMetaData {...props.pageMetaDataProps} />
       ) : null}
-      <SpanBox
-        css={{
-          '@lgDown': {
-            display: 'none',
-          },
+
+      <Header
+        menuOpen={showNavMenu}
+        toggleMenu={() => {
+          setShowNavMenu(!showNavMenu)
         }}
-      >
-        <Header
-          toggleMenu={() => {
-            setShowNavMenu(!showNavMenu)
-          }}
-        />
-      </SpanBox>
+      />
       {!isLoading && showNavMenu && (
         <>
           <NavigationMenu
@@ -151,11 +144,13 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             setShowAddLinkModal={() => {}}
             showMenu={showNavMenu}
-            setShowMenu={setShowNavMenu}
           />
           <SpanBox
             css={{
               width: LIBRARY_LEFT_MENU_WIDTH,
+              '@mdDown': {
+                display: 'none',
+              },
             }}
           ></SpanBox>
         </>
@@ -178,43 +173,36 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
 }
 
 type HeaderProps = {
+  menuOpen: booelean
   toggleMenu: () => void
 }
 
 const Header = (props: HeaderProps): JSX.Element => {
-  const small = false
-
   return (
     <VStack
       alignment="start"
-      distribution="start"
+      distribution="center"
       css={{
-        zIndex: 2,
-        position: 'fixed',
-        left: '15px',
-        top: '15px',
-        height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
-        transition: 'height 0.5s',
-        '@lgDown': { px: '20px' },
-        '@mdDown': {
-          px: '10px',
-          left: '0px',
-          right: '0',
-        },
+        zIndex: 5,
+        position: props.menuOpen ? 'fixed' : 'absolute',
+        left: '0px',
+        top: '0px',
+        pl: '20px',
+        pt: '20px',
+
+        height: '58px',
       }}
     >
-      <VStack alignment="center" distribution="center">
-        <Button
-          style="plainIcon"
-          onClick={(event) => {
-            props.toggleMenu()
-            event.preventDefault()
-          }}
-          css={{ height: 'unset' }}
-        >
-          <List size="25" color={theme.colors.readerTextSubtle.toString()} />
-        </Button>
-      </VStack>
+      <Button
+        style="plainIcon"
+        onClick={(event) => {
+          props.toggleMenu()
+          event.preventDefault()
+        }}
+        css={{ height: 'unset', display: 'flex' }}
+      >
+        <List size="25" color={theme.colors.readerTextSubtle.toString()} />
+      </Button>
     </VStack>
   )
 }

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

@@ -927,7 +927,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         py: '20px',
         width: '100%',
         '@mdDown': {
-          px: '0px',
+          px: layout == 'GRID_LAYOUT' ? '20px' : '0px',
         },
       }}
       distribution="start"
@@ -1044,7 +1044,7 @@ export function LibraryItemsLayout(
             mb: '10px',
             px: '70px',
             '@xlgDown': {
-              px: '10px',
+              px: '0px',
             },
           }}
         >
@@ -1195,7 +1195,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         overflow: 'visible',
         px: '70px',
         '@xlgDown': {
-          px: '10px',
+          px: '0px',
         },
         '@mdDown': {
           px: '0px',

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

@@ -88,14 +88,13 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           px: '70px',
           left: LIBRARY_LEFT_MENU_WIDTH,
           transition: 'height 0.5s',
-          '@xlgDown': {
-            px: '10px',
-          },
           '@mdDown': {
-            px: '10px',
             left: '0px',
             right: '0',
           },
+          '@xlgDown': {
+            px: '40px',
+          },
         }}
       >
         <LargeHeaderLayout {...props} />
@@ -131,17 +130,6 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
 
   return (
     <>
-      {!searchBoxFocused && (
-        <SpanBox
-          css={{
-            display: 'none',
-            '@lgDown': { display: 'flex' },
-          }}
-        >
-          <MenuHeaderButton {...props} />
-        </SpanBox>
-      )}
-
       <SearchBox
         {...props}
         searchBoxFocused={searchBoxFocused}

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

@@ -65,7 +65,6 @@ type NavigationMenuProps = {
   setShowAddLinkModal: (show: boolean) => void
 
   showMenu: boolean
-  setShowMenu: (show: boolean) => void
 }
 
 export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
@@ -94,30 +93,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
           zIndex: 2,
         }}
       >
-        <Box
-          css={{
-            width: '100%',
-            px: '20px',
-            pb: '10px',
-            pt: '15px',
-            lineHeight: '1',
-          }}
-        >
-          <SpanBox css={{ mr: 'auto' }}>
-            <Button
-              style="plainIcon"
-              onClick={(event) => {
-                props.setShowMenu(false)
-                event.preventDefault()
-              }}
-            >
-              <List
-                size="25"
-                color={theme.colors.readerTextSubtle.toString()}
-              />
-            </Button>
-          </SpanBox>
-        </Box>
+        <Box css={{ width: '100%', height: '60px' }}></Box>
         <LibraryNav {...props} />
         <Shortcuts {...props} />
         <NavMenuFooter {...props} showFullThemeSection={true} />