Improve HK sidebar and restore nested content scrolling
This commit is contained in:
Simo committed
1 parent
bf126fd825
commit
2578bf6a09
27 files changed
+184
-20
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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(
|
||||
|
||||
Reference in new issue
Block a user