Fix mobile nav: hamburger left, brand right, polished menu panel
Local Build and Deploy / deploy (push) Successful in 57s
Local Build and Deploy / deploy (push) Successful in 57s
This commit is contained in:
openhands committed
1 parent
48a5394204
commit
af1b18d866
2 files changed
+73
-13
No files matched your search
@@ -1,26 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import { type ReactNode } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
interface MobileNavProps {
|
||||
children: ReactNode;
|
||||
menuLabel?: string;
|
||||
closeLabel?: string;
|
||||
brandLabel?: string;
|
||||
}
|
||||
|
||||
export function MobileNav({
|
||||
children,
|
||||
menuLabel = "Open menu",
|
||||
closeLabel = "Close menu",
|
||||
brandLabel = "Atom",
|
||||
}: MobileNavProps) {
|
||||
return (
|
||||
<details className="relative md:hidden ml-auto">
|
||||
<details className="group relative md:hidden">
|
||||
<summary
|
||||
className="list-none cursor-pointer flex items-center justify-center w-10 h-10 rounded-lg shrink-0 [&::-webkit-details-marker]:hidden"
|
||||
className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
|
||||
[&::-webkit-details-marker]:hidden transition-colors duration-150
|
||||
hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
|
||||
active:scale-[0.96]"
|
||||
aria-label={"Menu"}
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 details-open:hidden"
|
||||
className="w-6 h-6 details-open:hidden"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -28,12 +35,12 @@ export function MobileNav({
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
<line x1="4" y1="7" x2="20" y2="7" />
|
||||
<line x1="4" y1="12" x2="20" y2="12" />
|
||||
<line x1="4" y1="17" x2="20" y2="17" />
|
||||
</svg>
|
||||
<svg
|
||||
className="w-5 h-5 hidden details-open:block"
|
||||
className="w-6 h-6 hidden details-open:block"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -47,17 +54,47 @@ export function MobileNav({
|
||||
</summary>
|
||||
|
||||
<div
|
||||
className="absolute right-0 top-full mt-1 w-[280px] sm:w-[320px] z-50 overflow-y-auto max-h-[70vh]"
|
||||
style={{ backgroundColor: "var(--color-navbar)" }}
|
||||
className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
|
||||
style={{ backgroundColor: "transparent" }}
|
||||
>
|
||||
<div
|
||||
className="flex flex-col gap-y-0.5 p-2 rounded-xl border shadow-lg mx-2 mb-2"
|
||||
className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
|
||||
bg-[var(--color-dropdown,var(--color-surface,#fff))]"
|
||||
style={{
|
||||
backgroundColor: "var(--color-dropdown, var(--color-navbar))",
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
boxShadow:
|
||||
"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
|
||||
style={{
|
||||
backgroundColor:
|
||||
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={22}
|
||||
height={22}
|
||||
className="shrink-0"
|
||||
/>
|
||||
<span
|
||||
className="text-sm font-extrabold uppercase tracking-wide"
|
||||
style={{
|
||||
color:
|
||||
"var(--color-navbar-text-readable, var(--color-text))",
|
||||
}}
|
||||
>
|
||||
{brandLabel}
|
||||
</span>
|
||||
<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-60">
|
||||
{closeLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ export async function Navigation() {
|
||||
className="sticky top-0 z-40"
|
||||
style={{ backgroundColor: "var(--color-navbar)" }}
|
||||
>
|
||||
<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
|
||||
<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-2">
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-[3px]"
|
||||
style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
|
||||
@@ -310,6 +310,29 @@ export async function Navigation() {
|
||||
</div>
|
||||
</MobileNav>
|
||||
|
||||
{/* Mobile: brand (right) */}
|
||||
<Link
|
||||
href="/"
|
||||
className="ml-auto flex md:hidden items-center gap-2 shrink-0"
|
||||
aria-label="Home"
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={26}
|
||||
height={26}
|
||||
/>
|
||||
<span
|
||||
className="text-base font-extrabold uppercase tracking-wide"
|
||||
style={{
|
||||
color:
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text))",
|
||||
}}
|
||||
>
|
||||
Atom
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop: controls */}
|
||||
<div className="ml-auto hidden md:flex items-center gap-x-1">
|
||||
<LanguageSwitcher />
|
||||
|
||||
Reference in new issue
Block a user