Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve nav menu on smaller screens, record current home position

Browse Source
This commit is contained in:
Jackson Harper
2024-06-14 12:19:45 +08:00
parent bb73c24340
commit 45a604732b
5 changed files with 49 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/web/components/templates/NavigationLayout.tsx
View File

@ -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>
)
}

6
packages/web/components/templates/library/LibraryContainer.tsx
View File

@ -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',

18
packages/web/components/templates/library/LibraryHeader.tsx
View File

@ -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}

26
packages/web/components/templates/navMenu/NavigationMenu.tsx
View File

@ -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} />