Rebuild all menus from scratch for pixel-perfect rendering on every device
Local Build and Deploy / deploy (push) Successful in 59s
Local Build and Deploy / deploy (push) Successful in 59s
- mobile-nav: pure block/hidden toggle, no transforms, no transition-all - nav-dropdown: clean block/hidden toggle, no CSS animation hacks - navigation: removed shadow-sm, no will-change, no GPU compositing - top-header: consistent mobile layout, clean details/summary dropdowns - admin-mobile-wrapper: inline transition instead of CSS class for sidebar - globals.css: removed transition-all from nav-item/dropdown-item, replaced with specific color/background-color transitions only, added hover bg
This commit is contained in:
openhands committed
1 parent
9910fd52c7
commit
c7c4617f2a
5 files changed
+50
-51
No files matched your search
+5
-2
@@ -205,7 +205,8 @@ summary,
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.nav-item::after {
|
||||
content: "";
|
||||
@@ -224,10 +225,12 @@ summary,
|
||||
}
|
||||
.nav-item:hover {
|
||||
color: var(--color-primary-readable, var(--color-primary));
|
||||
background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
}
|
||||
.dropdown-item {
|
||||
@apply block py-2.5 px-4 text-sm font-semibold transition-all duration-100 rounded-lg mx-1;
|
||||
@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
|
||||
color: var(--color-dropdown-text-readable, var(--color-text-readable));
|
||||
transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
|
||||
@@ -36,7 +36,7 @@ export function AdminMobileWrapper({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-[var(--admin-accent)]/15"
|
||||
className="flex items-center justify-center w-9 h-9 rounded-lg"
|
||||
style={{ color: "var(--admin-text-muted)" }}
|
||||
>
|
||||
{open ? <X size={18} /> : <Menu size={18} />}
|
||||
@@ -52,16 +52,18 @@ export function AdminMobileWrapper({
|
||||
{/* Backdrop */}
|
||||
{open && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 lg:hidden bg-black/50"
|
||||
className="fixed inset-0 z-40 lg:hidden"
|
||||
onClick={() => setOpen(false)}
|
||||
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
|
||||
className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
|
||||
open ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
style={{ transition: "transform 300ms ease-in-out" }}
|
||||
>
|
||||
{sidebar}
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { type ReactNode, useEffect, useRef, useState } from "react";
|
||||
|
||||
interface MobileNavProps {
|
||||
children: React.ReactNode;
|
||||
/** Accessible label for the menu button. Pass translated string from server. */
|
||||
children: ReactNode;
|
||||
menuLabel?: string;
|
||||
closeLabel?: string;
|
||||
}
|
||||
@@ -15,13 +14,23 @@ export function MobileNav({
|
||||
closeLabel = "Close menu",
|
||||
}: MobileNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
};
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
|
||||
style={{
|
||||
color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
|
||||
}}
|
||||
@@ -57,18 +66,15 @@ export function MobileNav({
|
||||
<div
|
||||
className="fixed inset-0 z-30 md:hidden"
|
||||
onClick={() => setOpen(false)}
|
||||
style={{
|
||||
backgroundColor: "rgba(0,0,0,0.6)",
|
||||
}}
|
||||
style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
id="mobile-menu"
|
||||
ref={panelRef}
|
||||
role="menu"
|
||||
className={`${
|
||||
open ? "block" : "hidden"
|
||||
} md:block overflow-y-auto w-full md:w-auto`}
|
||||
className={`${open ? "block" : "hidden"} md:block w-full md:w-auto`}
|
||||
style={{ backgroundColor: "var(--color-navbar)" }}
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -14,30 +14,29 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (!open) return;
|
||||
const onClick = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
}
|
||||
function handleKey(e: KeyboardEvent) {
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
if (open) {
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
document.addEventListener("keydown", handleKey);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", onClick);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClick);
|
||||
document.removeEventListener("keydown", handleKey);
|
||||
document.removeEventListener("mousedown", onClick);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative group md:flex">
|
||||
<div ref={ref} className="relative md:flex">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") setOpen(!open);
|
||||
if (e.key === "Enter" || e.key === " ") setOpen((v) => !v);
|
||||
}}
|
||||
className="nav-item cursor-pointer"
|
||||
aria-expanded={open}
|
||||
@@ -55,7 +54,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
|
||||
) : null}
|
||||
{label}
|
||||
<svg
|
||||
className={`ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
|
||||
className={`ml-auto md:ml-1 w-3 h-3 ${open ? "rotate-180" : ""}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@@ -14,24 +14,17 @@ function Currency({
|
||||
amount: number;
|
||||
label: string;
|
||||
}) {
|
||||
const textColor = "var(--color-navbar-text-readable, var(--color-navbar-text))";
|
||||
const valueColor =
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
|
||||
|
||||
return (
|
||||
<div className="flex gap-x-1 sm:gap-x-2 items-center">
|
||||
<div
|
||||
className={`h-[20px] w-[20px] sm:h-[25px] sm:w-[25px] rounded-full outline-offset-[3px] ${icon}`}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
color:
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text-muted)))",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="font-semibold text-xs sm:text-sm"
|
||||
style={{
|
||||
color:
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
|
||||
}}
|
||||
>
|
||||
<div style={{ color: textColor }}>
|
||||
<span className="font-semibold text-xs sm:text-sm" style={{ color: valueColor }}>
|
||||
{amount.toLocaleString()}
|
||||
</span>{" "}
|
||||
<span className="hidden sm:inline text-xs">{label}</span>
|
||||
@@ -74,6 +67,8 @@ export async function TopHeader() {
|
||||
)) ?? "";
|
||||
const avatar = avatarImageUrl(imager, look, { headOnly: true, direction: 2 });
|
||||
const isStaff = (session.user.rank ?? 0) >= 7;
|
||||
const textColor =
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: "var(--color-navbar)" }}>
|
||||
@@ -93,10 +88,7 @@ export async function TopHeader() {
|
||||
<details className="relative">
|
||||
<summary
|
||||
className="list-none cursor-pointer font-semibold text-xs sm:text-sm [&::-webkit-details-marker]:hidden"
|
||||
style={{
|
||||
color:
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
|
||||
}}
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
<span className="hidden sm:inline">Administration</span>
|
||||
<span className="sm:hidden">Admin</span>
|
||||
@@ -144,10 +136,7 @@ export async function TopHeader() {
|
||||
/>
|
||||
<span
|
||||
className="hidden sm:inline -ml-2 font-semibold"
|
||||
style={{
|
||||
color:
|
||||
"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
|
||||
}}
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
{session.user.name}
|
||||
</span>
|
||||
|
||||
Reference in new issue
Block a user