diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 10bf604c9..8a788bcc1 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/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 ( @@ -265,7 +274,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => { itemsPerPage={4} loadMoreButtonText="Load more Top Picks" render={(homeItem) => ( - { ) } -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 ( ) : null} - { + setShowNavMenu(!showNavMenu) }} - > -
{ - setShowNavMenu(!showNavMenu) - }} - /> - + /> {!isLoading && showNavMenu && ( <> {}} showMenu={showNavMenu} - setShowMenu={setShowNavMenu} /> @@ -178,43 +173,36 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { } type HeaderProps = { + menuOpen: boolean toggleMenu: () => void } const Header = (props: HeaderProps): JSX.Element => { - const small = false - return ( - - - + ) } diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index c67624cec..83eb5cd41 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/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', diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index 849f6edee..ca89c1bab 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/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', + }, }} > @@ -131,17 +130,6 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => { return ( <> - {!searchBoxFocused && ( - - - - )} - 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, }} > - - - - - + @@ -193,7 +169,7 @@ const LibraryNav = (props: NavigationMenuProps): JSX.Element => { gap: '10px', maxWidth: '100%', height: '34px', - px: '15px', + px: '20px', fontSize: '15px', fontWeight: 'regular', @@ -581,7 +557,7 @@ function NodeRenderer(args: { alignment="center" distribution="start" css={{ - pl: `${15 + args.node.level * 15}px`, + pl: `${20 + args.node.level * 15}px`, mb: '2px', gap: '10px', display: 'flex', @@ -852,14 +828,13 @@ function NavButton(props: NavButtonProps): JSX.Element { alignment="center" distribution="start" css={{ - pl: '10px', mb: '2px', gap: '10px', display: 'flex', width: '100%', maxWidth: '100%', height: '34px', - px: '15px', + px: '20px', backgroundColor: props.isSelected ? '$thLibrarySelectionColor' diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index f7e0c6fd5..2e9394b51 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -253,7 +253,7 @@ export function useGetLibraryItemsQuery( ] }, (args: any[]) => { - const pageIndex = args[4] as number + const pageIndex = args[3] as number return gqlFetcher(query, { ...variables, after: pageIndex }, true) }, { revalidateFirstPage: false }