Improve HK sidebar and restore nested content scrolling
This commit is contained in:
1 parent
bf126fd825
commit
2578bf6a09
27 files changed
+184
-20
No files matched your search
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in new issue
Block a user