louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"implement responsive main navigation bar with dropdown menus and mobile view support"

Browse Source
This commit is contained in:
louiscklaw
2025-05-11 13:00:30 +08:00
parent f20dfa00c2
commit 031dbed6a9
1 changed files with 63 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
002_source/cms/src/components/marketing/layout/main-nav.tsx → 002_source/cms/src/components/marketing/layout/main-nav/index.tsx
View File

@@ -20,8 +20,8 @@ import { DropdownPopover } from '@/components/core/dropdown/dropdown-popover';
import { DropdownTrigger } from '@/components/core/dropdown/dropdown-trigger';
import { Logo } from '@/components/core/logo';
import { MobileNav } from './mobile-nav';
import { PagesPopover } from './pages-popover';
import { MobileNav } from '../mobile-nav';
import { PagesPopover } from '../pages-popover';
export function MainNav(): React.JSX.Element {
const [openNav, setOpenNav] = React.useState<boolean>(false);
@@ -41,15 +41,46 @@ export function MainNav(): React.JSX.Element {
zIndex: 'var(--MainNav-zIndex)',
}}
>
<Container maxWidth="lg" sx={{ display: 'flex', minHeight: 'var(--MainNav-height)', py: '16px' }}>
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
<Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex' }}>
<Logo color="light" height={32} width={122} />
<Container
maxWidth="lg"
sx={{ display: 'flex', minHeight: 'var(--MainNav-height)', py: '16px' }}
>
<Stack
direction="row"
spacing={2}
sx={{ alignItems: 'center', flex: '1 1 auto' }}
>
<Box
component={RouterLink}
href={paths.home}
sx={{ display: 'inline-flex' }}
>
<Logo
color="light"
height={32}
width={122}
/>
</Box>
<Box component="nav" sx={{ display: { xs: 'none', md: 'block' } }}>
<Stack component="ul" direction="row" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
<NavItem href={paths.components.index} pathname={pathname} title="Components" />
<NavItem href={paths.docs} pathname={pathname} title="Documentation" />
<Box
component="nav"
sx={{ display: { xs: 'none', md: 'block' } }}
>
<Stack
component="ul"
direction="row"
spacing={1}
sx={{ listStyle: 'none', m: 0, p: 0 }}
>
<NavItem
href={paths.components.index}
pathname={pathname}
title="Components"
/>
<NavItem
href={paths.docs}
pathname={pathname}
title="Documentation"
/>
</Stack>
</Box>
</Stack>
@@ -58,9 +89,20 @@ export function MainNav(): React.JSX.Element {
spacing={2}
sx={{ alignItems: 'center', flex: '1 1 auto', justifyContent: 'flex-end' }}
>
<Box component="nav" sx={{ display: { xs: 'none', md: 'block' } }}>
<Stack component="ul" direction="row" spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
<NavItem pathname={pathname} title="Pages">
<Box
component="nav"
sx={{ display: { xs: 'none', md: 'block' } }}
>
<Stack
component="ul"
direction="row"
spacing={1}
sx={{ listStyle: 'none', m: 0, p: 0 }}
>
<NavItem
pathname={pathname}
title="Pages"
>
<PagesPopover />
</NavItem>
</Stack>
@@ -113,7 +155,10 @@ export function NavItem({
const hasPopover = Boolean(children);
const element = (
<Box component="li" sx={{ userSelect: 'none' }}>
<Box
component="li"
sx={{ userSelect: 'none' }}
>
<Box
{...(hasPopover
? {
@@ -157,7 +202,10 @@ export function NavItem({
}}
tabIndex={0}
>
<Box component="span" sx={{ flex: '1 1 auto' }}>
<Box
component="span"
sx={{ flex: '1 1 auto' }}
>
<Typography
component="span"
sx={{ color: 'inherit', fontSize: '0.875rem', fontWeight: 500, lineHeight: '28px' }}