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

Fallback to a dropdown menu in settings view for navigation

Browse Source
This commit is contained in:
Jackson Harper
2024-02-26 15:12:28 +08:00
parent 6083c03557
commit 5334012a8f
3 changed files with 77 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/web/components/templates/SettingsLayout.tsx
View File

@ -11,6 +11,7 @@ import { PageMetaData } from '../patterns/PageMetaData'
import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
import { logout } from '../../lib/logout'
import { SettingsMenu } from './navMenu/SettingsMenu'
import { SettingsDropdown } from './navMenu/SettingsDropdown'
type SettingsLayoutProps = {
title?: string
@ -50,8 +51,23 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
<Box
css={{
height: DEFAULT_HEADER_HEIGHT,
'@mdDown': {
display: 'none',
},
}}
></Box>
<Box
css={{
p: '15px',
display: 'none',
height: DEFAULT_HEADER_HEIGHT,
'@mdDown': {
display: 'flex',
},
}}
>
<SettingsDropdown />
</Box>
<HStack css={{ width: '100%', height: '100%' }} distribution="start">
<SettingsMenu />
{props.children}

38
packages/web/components/templates/navMenu/SettingsDropdown.tsx Normal file
View File

@ -0,0 +1,38 @@
import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
import { SETTINGS_SECTION_1, SETTINGS_SECTION_2 } from './SettingsMenu'
import {
Dropdown,
DropdownOption,
DropdownSeparator,
} from '../../elements/DropdownElements'
import { useRouter } from 'next/router'
import { List } from 'phosphor-react'
export const SettingsDropdown = (): JSX.Element => {
const router = useRouter()
return (
<Dropdown triggerElement={<List size={30} />}>
<DropdownOption onSelect={() => router.push('/home')} title="Home" />
{SETTINGS_SECTION_1.map((item) => {
return (
<DropdownOption
onSelect={() => router.push(item.destination)}
title={item.name}
/>
)
})}
<DropdownSeparator />
{SETTINGS_SECTION_2.map((item) => {
return (
<DropdownOption
onSelect={() => router.push(item.destination)}
title={item.name}
/>
)
})}
</Dropdown>
)
}

43
packages/web/components/templates/navMenu/SettingsMenu.tsx
View File

@ -9,6 +9,23 @@ import { ArrowSquareUpRight } from 'phosphor-react'
import { useRouter } from 'next/router'
import { NavMenuFooter } from './Footer'
export const SETTINGS_SECTION_1 = [
{ name: 'Account', destination: '/settings/account' },
{ name: 'API Keys', destination: '/settings/api' },
{ name: 'Emails', destination: '/settings/emails' },
{ name: 'Feeds', destination: '/settings/feeds' },
{ name: 'Subscriptions', destination: '/settings/subscriptions' },
{ name: 'Labels', destination: '/settings/labels' },
{ name: 'Shortcuts', destination: '/settings/shortcuts' },
{ name: 'Saved Searches', destination: '/settings/saved-searches' },
{ name: 'Pinned Searches', destination: '/settings/pinned-searches' },
]
export const SETTINGS_SECTION_2 = [
{ name: 'Integrations', destination: '/settings/integrations' },
{ name: 'Install', destination: '/settings/installation' },
]
const HorizontalDivider = styled(SpanBox, {
width: '100%',
height: '1px',
@ -81,22 +98,6 @@ function ExternalLink(props: ExternalLinkProps): JSX.Element {
}
export function SettingsMenu(): JSX.Element {
const section1 = [
{ name: 'Account', destination: '/settings/account' },
{ name: 'API Keys', destination: '/settings/api' },
{ name: 'Emails', destination: '/settings/emails' },
{ name: 'Feeds', destination: '/settings/feeds' },
{ name: 'Subscriptions', destination: '/settings/subscriptions' },
{ name: 'Labels', destination: '/settings/labels' },
{ name: 'Shortcuts', destination: '/settings/shortcuts' },
{ name: 'Saved Searches', destination: '/settings/saved-searches' },
{ name: 'Pinned Searches', destination: '/settings/pinned-searches' },
]
const section2 = [
{ name: 'Integrations', destination: '/settings/integrations' },
{ name: 'Install', destination: '/settings/installation' },
]
return (
<>
<Box
@ -124,7 +125,7 @@ export function SettingsMenu(): JSX.Element {
css={{
width: '100%',
px: '25px',
pb: '50px',
pb: '25px',
pt: '4.5px',
lineHeight: '1',
}}
@ -136,15 +137,17 @@ export function SettingsMenu(): JSX.Element {
css={{
gap: '10px',
width: '100%',
overflowY: 'scroll',
paddingBottom: '120px',
}}
distribution="start"
alignment="start"
>
{section1.map((item) => {
{SETTINGS_SECTION_1.map((item) => {
return <SettingsButton key={item.name} {...item} />
})}
<HorizontalDivider />
{section2.map((item) => {
{SETTINGS_SECTION_2.map((item) => {
return <SettingsButton key={item.name} {...item} />
})}
<HorizontalDivider />
@ -176,8 +179,8 @@ export function SettingsMenu(): JSX.Element {
destination="https://docs.omnivore.app"
title="Documentation"
/>
<NavMenuFooter />
</VStack>
<NavMenuFooter />
</Box>
{/* This spacer pushes library content to the right of
the fixed left side menu. */}