bonna61/Moonbase
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

v0.17.0 — Mobile menu (#3) + Suggestions readability & header lightbulb (#2)

Browse Source 
Addresses Gitea suggestions #3 and #2.

#3 Mobile: the sidebar was desktop-only (hidden md:flex), leaving phones with no
nav at all. Added a slide-out drawer (hamburger in the top bar, md:hidden) that
reuses the nav. Lifted navItems/settingsItems into src/components/layout/nav-items.ts
so the sidebar and mobile drawer share one source + active-state logic. No HTTPS
needed (pure responsive UI).

#2 Suggestions: the @otm/account-panel SuggestionsPanel hardcodes light neutral-*
text that assumes a white backdrop, so it washed out on the app theme — now
rendered on a white card for contrast in light/dark. Added a lightbulb button in
the header that jumps to Suggestions (like FMB).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tony Moon
2026-06-16 02:16:57 -05:00
parent b8af0f986b
commit 4aacffdf4e
7 changed files with 163 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/layout/topnav.tsx
View File

@@ -1,7 +1,8 @@
"use client";
import Link from "next/link";
import { signOut } from "next-auth/react";
import { LogOut, User } from "lucide-react";
import { LogOut, Lightbulb } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
@@ -10,6 +11,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MobileNav } from "@/components/layout/mobile-nav";
import { initials } from "@/lib/utils";
interface TopNavProps {
@@ -19,32 +21,40 @@ interface TopNavProps {
export function TopNav({ user }: TopNavProps) {
return (
<header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background">
<div className="flex items-center gap-2 md:hidden">
<span className="font-display font-semibold">Moon Base</span>
<div className="flex items-center gap-2">
<MobileNav />
<span className="font-display font-semibold md:hidden">Moon Base</span>
</div>
<div className="hidden md:block" />
<div className="flex items-center gap-1">
<Link
href="/suggestions"
aria-label="Suggestions & feedback"
title="Suggestions & feedback"
className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
>
<Lightbulb className="h-5 w-5" />
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2">
<div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
{initials(user.name)}
</div>
<span className="text-sm hidden sm:inline">{user.name}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<div className="px-2 py-1.5 text-xs text-muted-foreground">
{user.email}
</div>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
<LogOut className="h-4 w-4 mr-2" />
Sign out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2">
<div className="h-6 w-6 rounded-full bg-[hsl(var(--leaf))] flex items-center justify-center text-white text-[10px] font-bold">
{initials(user.name)}
</div>
<span className="text-sm hidden sm:inline">{user.name}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<div className="px-2 py-1.5 text-xs text-muted-foreground">{user.email}</div>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
<LogOut className="h-4 w-4 mr-2" />
Sign out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
);
}