feat: use dropdown menu as navigation on mobile devices (#1840)

Co-authored-by: henrygd <hank@henrygd.me>

internal/site/src/components/add-system.tsx

@@ -1,8 +1,8 @@
-import { msg, t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { getPagePath } from "@nanostores/router"
-import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react"
+import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react"
 import { memo, useEffect, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
@@ -12,7 +12,6 @@ import {
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-	DialogTrigger,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -35,28 +34,19 @@ import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu"
 import { AppleIcon, DockerIcon, FreeBsdIcon, TuxIcon, WindowsIcon } from "./ui/icons"
 import { InputCopy } from "./ui/input-copy"
 
-export function AddSystemButton({ className }: { className?: string }) {
-	if (isReadOnlyUser()) {
-		return null
-	}
-	const [open, setOpen] = useState(false)
+// To avoid a refactor of the dialog, we will just keep this function as a "skeleton" for the actual dialog
+export function AddSystemDialog({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
 	const opened = useRef(false)
 	if (open) {
 		opened.current = true
 	}
 
+	if (isReadOnlyUser()) {
+		return null
+	}
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline" className={cn("flex gap-1 max-xs:h-[2.4rem]", className)}>
-					<PlusIcon className="h-4 w-4 450:-ms-1" />
-					<span className="hidden 450:inline">
-						<Trans>
-							Add <span className="hidden sm:inline">System</span>
-						</Trans>
-					</span>
-				</Button>
-			</DialogTrigger>
 			{opened.current && <SystemDialog setOpen={setOpen} />}
 		</Dialog>
 	)

internal/site/src/components/navbar.tsx

@@ -6,6 +6,8 @@ import {
 	HardDriveIcon,
 	LogOutIcon,
 	LogsIcon,
+	MenuIcon,
+	PlusIcon,
 	SearchIcon,
 	ServerIcon,
 	SettingsIcon,
@@ -21,15 +23,18 @@ import {
 	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { isAdmin, isReadOnlyUser, logOut, pb } from "@/lib/api"
 import { cn, runOnce } from "@/lib/utils"
-import { AddSystemButton } from "./add-system"
+import { AddSystemDialog } from "./add-system"
 import { LangToggle } from "./lang-toggle"
 import { Logo } from "./logo"
 import { ModeToggle } from "./mode-toggle"
-import { $router, basePath, Link, prependBasePath } from "./router"
+import { $router, basePath, Link, navigate, prependBasePath } from "./router"
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
 
 const CommandPalette = lazy(() => import("./command-palette"))
@@ -37,8 +42,18 @@ const CommandPalette = lazy(() => import("./command-palette"))
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 export default function Navbar() {
+	const [addSystemDialogOpen, setAddSystemDialogOpen] = useState(false)
+	const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
+
+	const AdminLinks = AdminDropdownGroup()
+
 	return (
 		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border border-border/60 bt-0 rounded-md my-4">
+			<Suspense>
+				<CommandPalette open={commandPaletteOpen} setOpen={setCommandPaletteOpen} />
+			</Suspense>
+			<AddSystemDialog open={addSystemDialogOpen} setOpen={setAddSystemDialogOpen} />
+
 			<Link
 				href={basePath}
 				aria-label="Home"
@@ -47,10 +62,90 @@ export default function Navbar() {
 			>
 				<Logo className="h-[1.1rem] md:h-5 fill-foreground" />
 			</Link>
-			<SearchButton />
+			<Button
+				variant="outline"
+				className="hidden md:block text-sm text-muted-foreground px-4"
+				onClick={() => setCommandPaletteOpen(true)}
+			>
+				<span className="flex items-center">
+					<SearchIcon className="me-1.5 h-4 w-4" />
+					<Trans>Search</Trans>
+					<span className="flex items-center ms-3.5">
+						<Kbd>{isMac ? "⌘" : "Ctrl"}</Kbd>
+						<Kbd>K</Kbd>
+					</span>
+				</span>
+			</Button>
 
+			{/* mobile menu */}
+			<div className="ms-auto flex items-center text-xl md:hidden">
+				<ModeToggle />
+				<Button variant="ghost" size="icon" onClick={() => setCommandPaletteOpen(true)}>
+					<SearchIcon className="h-[1.2rem] w-[1.2rem]" />
+				</Button>
+				<DropdownMenu>
+					<DropdownMenuTrigger
+						onMouseEnter={() => import("@/components/routes/settings/general")}
+						className="ms-3"
+						aria-label="Open Menu"
+					>
+						<MenuIcon />
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuLabel className="max-w-40 truncate">{pb.authStore.record?.email}</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem onClick={() => navigate(getPagePath($router, "home"))} className="flex items-center">
+								<ContainerIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} />
+								<Trans>All Containers</Trans>
+							</DropdownMenuItem>
+							<DropdownMenuItem onClick={() => navigate(getPagePath($router, "smart"))} className="flex items-center">
+								<HardDriveIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} />
+								<span>S.M.A.R.T.</span>
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								onClick={() => navigate(getPagePath($router, "settings", { name: "general" }))}
+								className="flex items-center"
+							>
+								<SettingsIcon className="h-4 w-4 me-2.5" />
+								<Trans>Settings</Trans>
+							</DropdownMenuItem>
+							{isAdmin() && (
+								<DropdownMenuSub>
+									<DropdownMenuSubTrigger>
+										<UserIcon className="h-4 w-4 me-2.5" />
+										<Trans>Admin</Trans>
+									</DropdownMenuSubTrigger>
+									<DropdownMenuSubContent>{AdminLinks}</DropdownMenuSubContent>
+								</DropdownMenuSub>
+							)}
+							<DropdownMenuItem
+								className="flex items-center"
+								onSelect={() => {
+									setAddSystemDialogOpen(true)
+								}}
+							>
+								<PlusIcon className="h-4 w-4 me-2.5" />
+								<Trans>Add System</Trans>
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem onSelect={logOut} className="flex items-center">
+								<LogOutIcon className="h-4 w-4 me-2.5" />
+								<Trans>Log Out</Trans>
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			{/* desktop nav */}
 			{/** biome-ignore lint/a11y/noStaticElementInteractions: ignore */}
-			<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
+			<div
+				className="hidden md:flex items-center ms-auto"
+				onMouseEnter={() => import("@/components/routes/settings/general")}
+			>
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<Link
@@ -102,45 +197,12 @@ export default function Navbar() {
 					<DropdownMenuContent align={isReadOnlyUser() ? "end" : "center"} className="min-w-44">
 						<DropdownMenuLabel>{pb.authStore.record?.email}</DropdownMenuLabel>
 						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							{isAdmin() && (
-								<>
-									<DropdownMenuItem asChild>
-										<a href={prependBasePath("/_/")} target="_blank">
-											<UsersIcon className="me-2.5 h-4 w-4" />
-											<span>
-												<Trans>Users</Trans>
-											</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href={prependBasePath("/_/#/collections?collection=systems")} target="_blank">
-											<ServerIcon className="me-2.5 h-4 w-4" />
-											<span>
-												<Trans>Systems</Trans>
-											</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href={prependBasePath("/_/#/logs")} target="_blank">
-											<LogsIcon className="me-2.5 h-4 w-4" />
-											<span>
-												<Trans>Logs</Trans>
-											</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuItem asChild>
-										<a href={prependBasePath("/_/#/settings/backups")} target="_blank">
-											<DatabaseBackupIcon className="me-2.5 h-4 w-4" />
-											<span>
-												<Trans>Backups</Trans>
-											</span>
-										</a>
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-								</>
-							)}
-						</DropdownMenuGroup>
+						{isAdmin() && (
+							<>
+								{AdminLinks}
+								<DropdownMenuSeparator />
+							</>
+						)}
 						<DropdownMenuItem onSelect={logOut}>
 							<LogOutIcon className="me-2.5 h-4 w-4" />
 							<span>
@@ -149,7 +211,10 @@ export default function Navbar() {
 						</DropdownMenuItem>
 					</DropdownMenuContent>
 				</DropdownMenu>
-				<AddSystemButton className="ms-2" />
+				<Button variant="outline" className="flex gap-1 ms-2" onClick={() => setAddSystemDialogOpen(true)}>
+					<PlusIcon className="h-4 w-4 -ms-1" />
+					<Trans>Add System</Trans>
+				</Button>
 			</div>
 		</div>
 	)
@@ -161,28 +226,41 @@ const Kbd = ({ children }: { children: React.ReactNode }) => (
 	</kbd>
 )
 
-function SearchButton() {
-	const [open, setOpen] = useState(false)
-
+function AdminDropdownGroup() {
 	return (
-		<>
-			<Button
-				variant="outline"
-				className="hidden md:block text-sm text-muted-foreground px-4"
-				onClick={() => setOpen(true)}
-			>
-				<span className="flex items-center">
-					<SearchIcon className="me-1.5 h-4 w-4" />
-					<Trans>Search</Trans>
-					<span className="flex items-center ms-3.5">
-						<Kbd>{isMac ? "⌘" : "Ctrl"}</Kbd>
-						<Kbd>K</Kbd>
+		<DropdownMenuGroup>
+			<DropdownMenuItem asChild>
+				<a href={prependBasePath("/_/")} target="_blank">
+					<UsersIcon className="me-2.5 h-4 w-4" />
+					<span>
+						<Trans>Users</Trans>
 					</span>
-				</span>
-			</Button>
-			<Suspense>
-				<CommandPalette open={open} setOpen={setOpen} />
-			</Suspense>
-		</>
+				</a>
+			</DropdownMenuItem>
+			<DropdownMenuItem asChild>
+				<a href={prependBasePath("/_/#/collections?collection=systems")} target="_blank">
+					<ServerIcon className="me-2.5 h-4 w-4" />
+					<span>
+						<Trans>Systems</Trans>
+					</span>
+				</a>
+			</DropdownMenuItem>
+			<DropdownMenuItem asChild>
+				<a href={prependBasePath("/_/#/logs")} target="_blank">
+					<LogsIcon className="me-2.5 h-4 w-4" />
+					<span>
+						<Trans>Logs</Trans>
+					</span>
+				</a>
+			</DropdownMenuItem>
+			<DropdownMenuItem asChild>
+				<a href={prependBasePath("/_/#/settings/backups")} target="_blank">
+					<DatabaseBackupIcon className="me-2.5 h-4 w-4" />
+					<span>
+						<Trans>Backups</Trans>
+					</span>
+				</a>
+			</DropdownMenuItem>
+		</DropdownMenuGroup>
 	)
 }