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

update main-nav,

Browse Source
This commit is contained in:
louiscklaw
2025-05-11 13:24:52 +08:00
parent e5b136b8b5
commit 01a8d2ca02
6 changed files with 89 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
002_source/cms/src/components/dashboard/layout/vertical/main-nav/contacts-button.tsx
View File

@@ -2,72 +2,31 @@
import * as React from 'react'; import * as React from 'react';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Popover from '@mui/material/Popover';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { ChatCenteredDots as ChatCenteredDotsIcon } from '@phosphor-icons/react/dist/ssr/ChatCenteredDots'; import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User'; import { usePopover } from '@/hooks/use-popover';
import { ContactsPopover } from '../../contacts-popover';
export function ContactsButton(): React.JSX.Element { export function ContactsButton(): React.JSX.Element {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); const popover = usePopover<HTMLButtonElement>();
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'contacts-popover' : undefined;
return ( return (
<React.Fragment> <React.Fragment>
<Tooltip title="Contacts"> <Tooltip title="Contacts">
<IconButton onClick={handleClick}> <IconButton
<ChatCenteredDotsIcon /> onClick={popover.handleOpen}
ref={popover.anchorRef}
>
<UsersIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Popover <ContactsPopover
anchorEl={anchorEl} anchorEl={popover.anchorRef.current}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} onClose={popover.handleClose}
id={id} open={popover.open}
onClose={handleClose} />
open={open}
slotProps={{ paper: { sx: { width: '280px' } } }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
>
<List sx={{ p: 0 }}>
<ListItem disablePadding>
<ListItemButton
component="a"
href="#"
>
<ListItemIcon>
<UserIcon />
</ListItemIcon>
<ListItemText primary="Profile" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton
component="a"
href="#"
>
<ListItemIcon>
<EnvelopeSimpleIcon />
</ListItemIcon>
<ListItemText primary="Messages" />
</ListItemButton>
</ListItem>
</List>
</Popover>
</React.Fragment> </React.Fragment>
); );
} }

143
002_source/cms/src/components/dashboard/layout/vertical/main-nav/index.tsx
View File

@@ -1,33 +1,21 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider'; import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { Bell as BellIcon } from '@phosphor-icons/react/dist/ssr/Bell';
import { List as ListIcon } from '@phosphor-icons/react/dist/ssr/List'; import { List as ListIcon } from '@phosphor-icons/react/dist/ssr/List';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
import { useTranslation } from 'next-i18next';
import type { NavItemConfig } from '@/types/nav'; import type { NavItemConfig } from '@/types/nav';
import type { User } from '@/types/user';
import { useDialog } from '@/hooks/use-dialog';
import { usePopover } from '@/hooks/use-popover';
import { ContactsPopover } from '../../contacts-popover';
import { languageFlags, LanguagePopover } from '../../language-popover';
import type { Language } from '../../language-popover';
import { MobileNav } from '../../mobile-nav'; import { MobileNav } from '../../mobile-nav';
import { NotificationsPopover } from '../../notifications-popover'; // import { NotificationsButton } from './notifications-button';
import { SearchDialog } from '../../search-dialog';
import { UserPopover } from '../../user-popover/user-popover';
import { NotificationsButton } from './notifications-button';
import { LanguageSwitch } from './language-switch'; import { LanguageSwitch } from './language-switch';
import { ContactsButton } from './contacts-button';
import { SearchButton } from './search-button';
import { NotificationsButton } from './notifications-button';
import { UserButton } from './user-button';
export interface MainNavProps { export interface MainNavProps {
items: NavItemConfig[]; items: NavItemConfig[];
@@ -104,124 +92,3 @@ export function MainNav({ items }: MainNavProps): React.JSX.Element {
</React.Fragment> </React.Fragment>
); );
} }
function SearchButton(): React.JSX.Element {
const dialog = useDialog();
return (
<React.Fragment>
<Tooltip title="Search">
<IconButton
onClick={dialog.handleOpen}
sx={{ display: { xs: 'none', lg: 'inline-flex' } }}
>
<MagnifyingGlassIcon />
</IconButton>
</Tooltip>
<SearchDialog
onClose={dialog.handleClose}
open={dialog.open}
/>
</React.Fragment>
);
}
function ContactsButton(): React.JSX.Element {
const popover = usePopover<HTMLButtonElement>();
return (
<React.Fragment>
<Tooltip title="Contacts">
<IconButton
onClick={popover.handleOpen}
ref={popover.anchorRef}
>
<UsersIcon />
</IconButton>
</Tooltip>
<ContactsPopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}
function LanguageSwitch1(): React.JSX.Element {
const { i18n } = useTranslation();
const popover = usePopover<HTMLButtonElement>();
const language = (i18n.language || 'en') as Language;
const flag = languageFlags[language];
return (
<React.Fragment>
<Tooltip title="Language">
<IconButton
onClick={popover.handleOpen}
ref={popover.anchorRef}
sx={{ display: { xs: 'none', lg: 'inline-flex' } }}
>
<Box sx={{ height: '24px', width: '24px' }}>
<Box
alt={language}
component="img"
src={flag}
sx={{ height: 'auto', width: '100%' }}
/>
</Box>
</IconButton>
</Tooltip>
<LanguagePopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}
const user = {
id: 'USR-000',
name: 'Sofia Rivers',
avatar: '/assets/avatar.png',
email: 'sofia@devias.io',
} satisfies User;
function UserButton(): React.JSX.Element {
const popover = usePopover<HTMLButtonElement>();
return (
<React.Fragment>
<Box
component="button"
onClick={popover.handleOpen}
ref={popover.anchorRef}
sx={{ border: 'none', background: 'transparent', cursor: 'pointer', p: 0 }}
>
<Badge
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
color="success"
sx={{
'& .MuiBadge-dot': {
border: '2px solid var(--MainNav-background)',
borderRadius: '50%',
bottom: '6px',
height: '12px',
right: '6px',
width: '12px',
},
}}
variant="dot"
>
<Avatar src={user.avatar} />
</Badge>
</Box>
<UserPopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment>
);
}

17
002_source/cms/src/components/dashboard/layout/vertical/main-nav/language-switch.tsx
View File

@@ -1,32 +1,15 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { Bell as BellIcon } from '@phosphor-icons/react/dist/ssr/Bell';
import { List as ListIcon } from '@phosphor-icons/react/dist/ssr/List';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import type { NavItemConfig } from '@/types/nav';
import type { User } from '@/types/user';
import { useDialog } from '@/hooks/use-dialog';
import { usePopover } from '@/hooks/use-popover'; import { usePopover } from '@/hooks/use-popover';
import { ContactsPopover } from '../../contacts-popover';
import { languageFlags, LanguagePopover } from '../../language-popover'; import { languageFlags, LanguagePopover } from '../../language-popover';
import type { Language } from '../../language-popover'; import type { Language } from '../../language-popover';
import { MobileNav } from '../../mobile-nav';
import { NotificationsPopover } from '../../notifications-popover';
import { SearchDialog } from '../../search-dialog';
import { UserPopover } from '../../user-popover/user-popover';
import { NotificationsButton } from './notifications-button';
export function LanguageSwitch(): React.JSX.Element { export function LanguageSwitch(): React.JSX.Element {
const { i18n } = useTranslation(); const { i18n } = useTranslation();

51
002_source/cms/src/components/dashboard/layout/vertical/main-nav/notifications-button.tsx
View File

@@ -3,47 +3,38 @@
import * as React from 'react'; import * as React from 'react';
import Badge from '@mui/material/Badge'; import Badge from '@mui/material/Badge';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Popover from '@mui/material/Popover';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { Bell as BellIcon } from '@phosphor-icons/react/dist/ssr/Bell'; import { Bell as BellIcon } from '@phosphor-icons/react/dist/ssr/Bell';
import { usePopover } from '@/hooks/use-popover';
import { NotificationsPopover } from '../../notifications-popover';
// import { NotificationsButton } from './notifications-button';
export function NotificationsButton(): React.JSX.Element { export function NotificationsButton(): React.JSX.Element {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); const popover = usePopover<HTMLButtonElement>();
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'notifications-popover' : undefined;
return ( return (
<React.Fragment> <React.Fragment>
<Tooltip title="Notifications"> <Tooltip title="Notifications">
<IconButton onClick={handleClick}> <Badge
<Badge color="error"
badgeContent={4} sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
color="error" variant="dot"
>
<IconButton
onClick={popover.handleOpen}
ref={popover.anchorRef}
> >
<BellIcon /> <BellIcon />
</Badge> </IconButton>
</IconButton> </Badge>
</Tooltip> </Tooltip>
<Popover <NotificationsPopover
anchorEl={anchorEl} anchorEl={popover.anchorRef.current}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} onClose={popover.handleClose}
id={id} open={popover.open}
onClose={handleClose} />
open={open}
slotProps={{ paper: { sx: { width: '280px' } } }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
>
{/* Notification content would go here */}
</Popover>
</React.Fragment> </React.Fragment>
); );
} }

2
002_source/cms/src/components/dashboard/layout/vertical/main-nav/search-button.tsx
View File

@@ -4,7 +4,9 @@ import * as React from 'react';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass'; import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
import { useDialog } from '@/hooks/use-dialog'; import { useDialog } from '@/hooks/use-dialog';
import { SearchDialog } from '../../search-dialog'; import { SearchDialog } from '../../search-dialog';
export function SearchButton(): React.JSX.Element { export function SearchButton(): React.JSX.Element {

77
002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx
View File

@@ -1,44 +1,57 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User'; import Avatar from '@mui/material/Avatar';
import { Avatar, Popover, Tooltip } from '@mui/material'; import Badge from '@mui/material/Badge';
import Box from '@mui/material/Box';
import type { User } from '@/types/user';
import { usePopover } from '@/hooks/use-popover';
import { UserPopover } from '../../user-popover/user-popover';
// import { NotificationsButton } from './notifications-button';
const user = {
id: 'USR-000',
name: 'Sofia Rivers',
avatar: '/assets/avatar.png',
email: 'sofia@devias.io',
} satisfies User;
export function UserButton(): React.JSX.Element { export function UserButton(): React.JSX.Element {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); const popover = usePopover<HTMLButtonElement>();
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'user-popover' : undefined;
return ( return (
<React.Fragment> <React.Fragment>
<Tooltip title="User"> <Box
<Avatar component="button"
onClick={handleClick} onClick={popover.handleOpen}
sx={{ cursor: 'pointer', height: 32, width: 32 }} ref={popover.anchorRef}
> sx={{ border: 'none', background: 'transparent', cursor: 'pointer', p: 0 }}
<UserIcon fontSize="var(--Icon-fontSize)" />
</Avatar>
</Tooltip>
<Popover
anchorEl={anchorEl}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
id={id}
onClose={handleClose}
open={open}
slotProps={{ paper: { sx: { width: '240px' } } }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
> >
{/* User menu content would go here */} <Badge
</Popover> anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
color="success"
sx={{
'& .MuiBadge-dot': {
border: '2px solid var(--MainNav-background)',
borderRadius: '50%',
bottom: '6px',
height: '12px',
right: '6px',
width: '12px',
},
}}
variant="dot"
>
<Avatar src={user.avatar} />
</Badge>
</Box>
<UserPopover
anchorEl={popover.anchorRef.current}
onClose={popover.handleClose}
open={popover.open}
/>
</React.Fragment> </React.Fragment>
); );
} }