Improve HK sidebar and restore nested content scrolling
CI / check (push) Successful in 1m30s
CI / deploy (push) Successful in 1m22s
CI / e2e (push) Successful in 21s

This commit is contained in:
Simo committed 2026-09-05 12:50:52 +02:00
1 parent bf126fd825
commit 2578bf6a09
27 files changed
+184 -20

No files matched your search

+1 -1
View File
@@ -49,7 +49,7 @@ export default async function AdminLayout({
<AdminMobileWrapper sidebar={<Sidebar staff={staff} />}>
<div
data-admin
className="flex flex-col min-w-0 p-5 lg:p-6 min-h-screen"
className="flex flex-col min-w-0 p-5 lg:p-6 min-h-full"
style={{ backgroundColor: "var(--admin-canvas)" }}
>
<AdminTopbar staff={staff} />
+10 -5
View File
@@ -42,11 +42,11 @@ export function AdminMobileWrapper({
return (
<AdminMobileContext.Provider value={mobile}>
{/* Wider than public max-w-7xl (80rem), capped so it never goes full-bleed. */}
<div className="min-h-screen bg-[var(--admin-canvas)]">
<div className="mx-auto flex min-h-screen w-full max-w-full min-w-0 flex-col lg:max-w-[96rem] lg:flex-row lg:border-x lg:shadow-xl border-[var(--admin-border)]">
<div className="h-dvh overflow-hidden bg-[var(--admin-canvas)]">
<div className="mx-auto flex h-full min-h-0 w-full max-w-full min-w-0 flex-col lg:max-w-[96rem] lg:flex-row lg:border-x lg:shadow-xl border-[var(--admin-border)]">
{/* Mobile header */}
<div
className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
className={`lg:hidden shrink-0 flex items-center gap-3 px-4 py-3 border-b ${
open ? "z-30" : "z-50"
}`}
style={{
@@ -84,7 +84,7 @@ export function AdminMobileWrapper({
{/* Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-50 flex h-full w-[260px] flex-col overflow-hidden lg:!relative lg:!min-h-screen lg:!translate-x-0 ${
className={`fixed inset-y-0 left-0 z-50 flex h-full w-[260px] flex-col overflow-hidden lg:!relative lg:shrink-0 lg:!translate-x-0 ${
open ? "translate-x-0" : "-translate-x-full"
}`}
style={{ transition: "transform 300ms ease-in-out" }}
@@ -93,7 +93,12 @@ export function AdminMobileWrapper({
</div>
{/* Content */}
<div className="flex flex-col flex-1 min-w-0">{children}</div>
<div
data-admin-content
className="min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain"
>
{children}
</div>
</div>
</div>
</AdminMobileContext.Provider>
+4 -3
View File
@@ -46,11 +46,12 @@ export function AdminNavLink({
<Link
href={href}
onClick={close}
style={{ color: "var(--admin-sidebar-text-readable)" }}
aria-current={active ? "page" : undefined}
className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-colors duration-150
className={`group flex min-h-10 items-center gap-2.5 rounded-lg border-l-2 border-transparent px-3 py-2 text-sm no-underline transition-colors duration-150
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)] ${
active
? "bg-[var(--admin-accent)]/25 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
? "bg-[var(--admin-accent)]/25 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-[var(--admin-accent)] shadow-sm"
: "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
}`}
>
@@ -65,7 +66,7 @@ export function AdminNavLink({
{icon}
</span>
) : null}
<span className="truncate">{children}</span>
<span className="min-w-0 flex-1 break-words leading-5">{children}</span>
</Link>
);
}
+98 -10
View File
@@ -1,6 +1,12 @@
"use client";
import { ChevronDown, ChevronsDownUp, ChevronsUpDown } from "lucide-react";
import {
ChevronDown,
ChevronsDownUp,
ChevronsUpDown,
Search,
X,
} from "lucide-react";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useMemo, useState } from "react";
@@ -75,6 +81,7 @@ export function AdminSidebarNav({
const pathname = usePathname() ?? "";
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
const [hydrated, setHydrated] = useState(false);
const [query, setQuery] = useState("");
const allowed = useMemo(
() => new Set(allowedPermissions),
@@ -94,12 +101,39 @@ export function AdminSidebarNav({
.filter((group) => group.items.length > 0);
}, [allowed, isSuperAdmin, navConfig]);
const search = query.trim().toLocaleLowerCase();
const visibleGroups = useMemo(
() =>
groups
.map((group) => ({
...group,
items: group.items.filter(
(item) =>
!search ||
t(group.labelKey).toLocaleLowerCase().includes(search) ||
t(item.labelKey).toLocaleLowerCase().includes(search),
),
}))
.filter((group) => group.items.length > 0),
[groups, search, t],
);
const allKeys = useMemo(() => groups.map((g) => g.labelKey), [groups]);
useEffect(() => {
setCollapsed(readCollapsed());
const saved = readCollapsed();
setCollapsed(
Object.fromEntries(
groups.map((group) => [
group.labelKey,
typeof saved[group.labelKey] === "boolean"
? saved[group.labelKey]
: true,
]),
),
);
setHydrated(true);
}, []);
}, [groups]);
// Keep the group that contains the current page open.
useEffect(() => {
@@ -163,11 +197,50 @@ export function AdminSidebarNav({
className="flex min-h-0 flex-1 flex-col overflow-hidden"
aria-label={t("overview")}
>
<div className="shrink-0 px-3 pt-3">
<div className="relative">
<Search
size={16}
aria-hidden
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--admin-sidebar-muted-readable)]"
/>
<input
type="search"
value={query}
onChange={(event) => setQuery(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Escape" && query) {
event.stopPropagation();
setQuery("");
}
}}
aria-label={t("searchMenu")}
placeholder={t("searchMenu")}
style={{
paddingLeft: 36,
paddingRight: 36,
backgroundColor: "var(--admin-sidebar-background)",
color: "var(--admin-sidebar-text-readable)",
}}
className="h-10 w-full min-w-0 rounded-lg border border-[var(--admin-border)] text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
/>
{query && (
<button
type="button"
onClick={() => setQuery("")}
aria-label={t("clearMenuSearch")}
className="absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-md text-[var(--admin-sidebar-text-readable)] focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
>
<X size={14} />
</button>
)}
</div>
</div>
<div className="flex shrink-0 items-center gap-1 border-b border-[var(--admin-border)] px-3 py-2">
<button
type="button"
onClick={expandAll}
disabled={allExpanded}
disabled={allExpanded || !!search}
title={t("expandAll")}
aria-label={t("expandAll")}
className={cn(
@@ -186,7 +259,7 @@ export function AdminSidebarNav({
<button
type="button"
onClick={collapseAll}
disabled={!canCollapseMore}
disabled={!canCollapseMore || !!search}
title={t("collapseAll")}
aria-label={t("collapseAll")}
className={cn(
@@ -205,9 +278,17 @@ export function AdminSidebarNav({
</div>
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3">
{groups.map((group, gi) => {
{visibleGroups.length === 0 && (
<p
role="status"
className="px-2 py-6 text-sm text-[var(--admin-sidebar-muted-readable)]"
>
{t("noMenuResults")}
</p>
)}
{visibleGroups.map((group, gi) => {
const GroupIcon = group.icon;
const isCollapsed = Boolean(collapsed[group.labelKey]);
const isCollapsed = !search && Boolean(collapsed[group.labelKey]);
const panelId = `admin-nav-${group.labelKey}`;
return (
@@ -220,12 +301,13 @@ export function AdminSidebarNav({
<button
type="button"
onClick={() => toggle(group.labelKey)}
disabled={!!search}
aria-expanded={!isCollapsed}
aria-controls={panelId}
className={cn(
"flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left",
"text-[0.65rem] font-extrabold uppercase tracking-[0.14em]",
"text-[var(--admin-sidebar-text-readable)] opacity-70",
"flex min-h-10 w-full items-center gap-2 rounded-lg px-2 py-2 text-left",
"text-xs font-semibold",
"text-[var(--admin-sidebar-muted-readable)]",
"hover:opacity-100 hover:bg-[var(--admin-accent)]/10",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
"transition-colors",
@@ -235,6 +317,12 @@ export function AdminSidebarNav({
<span className="min-w-0 flex-1 truncate">
{t(group.labelKey)}
</span>
<span
aria-hidden
className="text-xs tabular-nums text-[var(--admin-sidebar-muted-readable)]"
>
{group.items.length}
</span>
<ChevronDown
size={14}
className={cn(
+5 -1
View File
@@ -1,9 +1,12 @@
"use client";
import { Lenis } from "lenis/react";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
export function SmoothScroll() {
const pathname = usePathname();
const isAdmin = pathname === "/admin" || pathname?.startsWith("/admin/");
const [prefersReduced, setPrefersReduced] = useState(true);
useEffect(() => {
@@ -14,7 +17,8 @@ export function SmoothScroll() {
return () => mq.removeEventListener("change", onChange);
}, []);
if (prefersReduced) return null;
// Admin panels own their scroll containers; root wheel smoothing consumes their events.
if (prefersReduced || isAdmin) return null;
return (
<Lenis
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -873,6 +873,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Menü durchsuchen…",
"clearMenuSearch": "Menüsuche löschen",
"noMenuResults": "Keine passenden Seiten.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -1058,6 +1058,9 @@
"backToSite": "Back to site",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"housekeeping": "Permission archive",
"hotelManagementPanel": "Hotel management panel",
"rankLabel": "Rank {rank}",
+3
View File
@@ -873,6 +873,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Buscar en el menú…",
"clearMenuSearch": "Borrar búsqueda",
"noMenuResults": "No se encontraron páginas.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -873,6 +873,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Rechercher dans le menu…",
"clearMenuSearch": "Effacer la recherche",
"noMenuResults": "Aucune page trouvée.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -1016,6 +1016,9 @@
"backToSite": "Torna al sito",
"expandAll": "Apri tutte",
"collapseAll": "Chiudi tutte",
"searchMenu": "Cerca nel menu…",
"clearMenuSearch": "Cancella ricerca menu",
"noMenuResults": "Nessuna pagina trovata.",
"hotelManagementPanel": "Pannello di gestione hotel",
"rankLabel": "Grado {rank}",
"hubNewsMedia": "Notizie e media",
+3
View File
@@ -1047,6 +1047,9 @@
"backToSite": "Terug naar site",
"expandAll": "Alles openen",
"collapseAll": "Alles sluiten",
"searchMenu": "Zoeken in menu…",
"clearMenuSearch": "Menuzoekopdracht wissen",
"noMenuResults": "Geen pagina’s gevonden.",
"housekeeping": "Permissie-archief",
"hotelManagementPanel": "Hotelbeheerpaneel",
"rankLabel": "Rang {rank}",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -901,6 +901,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",
+3
View File
@@ -903,6 +903,9 @@
"marketplace": "Marketplace",
"expandAll": "Expand all",
"collapseAll": "Collapse all",
"searchMenu": "Search menu…",
"clearMenuSearch": "Clear menu search",
"noMenuResults": "No matching pages.",
"community": "Community",
"monitoring": "Monitoring",
"staffAccess": "Ranks & permissions",