feat: refactor Menu component layout and improve accessibility features
This commit is contained in:
@@ -82,184 +82,194 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menubar className="rounded-none border-b border-none px-2 lg:px-4">
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="font-bold">mice</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => router.push('/settings')}>
|
||||
Preferences <MenubarShortcut>⌘,</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Hide Music <MenubarShortcut>⌘H</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Hide Others <MenubarShortcut>⇧⌘H</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarShortcut />
|
||||
<MenubarItem>
|
||||
Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<div className="border-r-4 w-0"><p className="invisible">j</p></div>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="relative">File</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarSub>
|
||||
<MenubarSubTrigger>New</MenubarSubTrigger>
|
||||
<MenubarSubContent className="w-[230px]">
|
||||
<MenubarItem>
|
||||
Playlist <MenubarShortcut>⌘N</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Smart Playlist <MenubarShortcut>⌥⌘N</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>Playlist Folder</MenubarItem>
|
||||
<MenubarItem disabled>Genius Playlist</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarSub>
|
||||
<MenubarItem>
|
||||
Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Close Window <MenubarShortcut>⌘W</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarSub>
|
||||
<MenubarSubTrigger>Library</MenubarSubTrigger>
|
||||
<MenubarSubContent>
|
||||
<MenubarItem>Update Cloud Library</MenubarItem>
|
||||
<MenubarItem>Update Genius</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Organize Library</MenubarItem>
|
||||
<MenubarItem>Export Library</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Import Playlist</MenubarItem>
|
||||
<MenubarItem disabled>Export Playlist</MenubarItem>
|
||||
<MenubarItem>Show Duplicate Items</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Get Album Artwork</MenubarItem>
|
||||
<MenubarItem disabled>Get Track Names</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarSub>
|
||||
<MenubarItem>
|
||||
Import <MenubarShortcut>⌘O</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>Burn Playlist to Disc</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
|
||||
</MenubarItem>
|
||||
<MenubarItem>Convert</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Page Setup</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Print <MenubarShortcut>⌘P</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>Edit</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem disabled>
|
||||
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem disabled>
|
||||
Cut <MenubarShortcut>⌘X</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Copy <MenubarShortcut>⌘C</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Paste <MenubarShortcut>⌘V</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Select All <MenubarShortcut>⌘A</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Smart Dictation{" "}
|
||||
<MenubarShortcut>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
|
||||
<circle cx="17" cy="7" r="5" />
|
||||
</svg>
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Emoji & Symbols{" "}
|
||||
<MenubarShortcut>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10z" />
|
||||
</svg>
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>View</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarCheckboxItem disabled>Show Playing Next</MenubarCheckboxItem>
|
||||
<MenubarCheckboxItem disabled>Show Lyrics</MenubarCheckboxItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem inset onClick={toggleStatusBar}>
|
||||
{isStatusBarVisible ? "Hide Status Bar" : "Show Status Bar"}
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem inset onClick={toggleSidebar}>
|
||||
{isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
|
||||
<MenubarShortcut>⌘S</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem inset onClick={handleFullScreen}>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2 mx-2">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-400"}`}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginRight: '0.24rem' }} className="border-r-4 w-0"><p className="invisible">j</p></div>
|
||||
|
||||
<Menubar className="rounded-none border-b border-none px-0 lg:px-0 flex-1" style={{ minWidth: 0 }}>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="font-bold">mice</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => router.push('/settings')}>
|
||||
Preferences <MenubarShortcut>⌘,</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Hide Music <MenubarShortcut>⌘H</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Hide Others <MenubarShortcut>⇧⌘H</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarShortcut />
|
||||
<MenubarItem>
|
||||
Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<div className="border-r-4 w-0"><p className="invisible">j</p></div>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="relative">File</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarSub>
|
||||
<MenubarSubTrigger>New</MenubarSubTrigger>
|
||||
<MenubarSubContent className="w-[230px]">
|
||||
<MenubarItem>
|
||||
Playlist <MenubarShortcut>⌘N</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Smart Playlist <MenubarShortcut>⌥⌘N</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>Playlist Folder</MenubarItem>
|
||||
<MenubarItem disabled>Genius Playlist</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarSub>
|
||||
<MenubarItem>
|
||||
Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Close Window <MenubarShortcut>⌘W</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarSub>
|
||||
<MenubarSubTrigger>Library</MenubarSubTrigger>
|
||||
<MenubarSubContent>
|
||||
<MenubarItem>Update Cloud Library</MenubarItem>
|
||||
<MenubarItem>Update Genius</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Organize Library</MenubarItem>
|
||||
<MenubarItem>Export Library</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Import Playlist</MenubarItem>
|
||||
<MenubarItem disabled>Export Playlist</MenubarItem>
|
||||
<MenubarItem>Show Duplicate Items</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Get Album Artwork</MenubarItem>
|
||||
<MenubarItem disabled>Get Track Names</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarSub>
|
||||
<MenubarItem>
|
||||
Import <MenubarShortcut>⌘O</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>Burn Playlist to Disc</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
|
||||
</MenubarItem>
|
||||
<MenubarItem>Convert</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>Page Setup</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Print <MenubarShortcut>⌘P</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>Edit</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem disabled>
|
||||
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem disabled>
|
||||
Cut <MenubarShortcut>⌘X</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Copy <MenubarShortcut>⌘C</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Paste <MenubarShortcut>⌘V</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Select All <MenubarShortcut>⌘A</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem disabled>
|
||||
Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem>
|
||||
Smart Dictation{" "}
|
||||
<MenubarShortcut>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
|
||||
<circle cx="17" cy="7" r="5" />
|
||||
</svg>
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>
|
||||
Emoji & Symbols{" "}
|
||||
<MenubarShortcut>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10z" />
|
||||
</svg>
|
||||
</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>View</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarCheckboxItem disabled>Show Playing Next</MenubarCheckboxItem>
|
||||
<MenubarCheckboxItem disabled>Show Lyrics</MenubarCheckboxItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem inset onClick={toggleStatusBar}>
|
||||
{isStatusBarVisible ? "Hide Status Bar" : "Show Status Bar"}
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem inset onClick={toggleSidebar}>
|
||||
{isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
|
||||
<MenubarShortcut>⌘S</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem inset onClick={handleFullScreen}>
|
||||
{isFullScreen ? "Exit Full Screen" : "Enter Full Screen"}
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="hidden md:block">Account</MenubarTrigger>
|
||||
<MenubarContent forceMount>
|
||||
<MenubarLabel>Server Status</MenubarLabel>
|
||||
<MenubarItem>{connectionStatus}</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => router.push('/settings')}>
|
||||
Settings
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="hidden md:block">Account</MenubarTrigger>
|
||||
<MenubarContent forceMount>
|
||||
<MenubarLabel>Server Status</MenubarLabel>
|
||||
<MenubarItem>{connectionStatus}</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => router.push('/settings')}>
|
||||
Settings
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="sm:max-w-[400px] p-0 overflow-hidden">
|
||||
|
||||
Reference in New Issue
Block a user