Revert admin sidebar toggle, fix hamburger position directly
Local Build and Deploy / deploy (push) Successful in 1m4s
Local Build and Deploy / deploy (push) Successful in 1m4s
This commit is contained in:
1 parent
53b760a815
commit
a241448e9e
4 files changed
+4
-56
No files matched your search
@@ -3,7 +3,6 @@ import { redirect } from "next/navigation";
|
|||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import { getTranslations } from "next-intl/server";
|
import { getTranslations } from "next-intl/server";
|
||||||
import { AdminNavLink } from "@/components/admin/admin-nav-link";
|
import { AdminNavLink } from "@/components/admin/admin-nav-link";
|
||||||
import { AdminSidebarToggle } from "@/components/admin/admin-sidebar-toggle";
|
|
||||||
import { requireStaff } from "@/lib/admin/guard";
|
import { requireStaff } from "@/lib/admin/guard";
|
||||||
import { prisma } from "@/lib/prisma";
|
import { prisma } from "@/lib/prisma";
|
||||||
import { siteSettings } from "@/lib/services/site-settings";
|
import { siteSettings } from "@/lib/services/site-settings";
|
||||||
@@ -165,9 +164,7 @@ export default async function AdminLayout({ children }: { children: ReactNode })
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--admin-canvas)]">
|
<div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--admin-canvas)]">
|
||||||
<AdminSidebarToggle>
|
<Sidebar staff={staff} />
|
||||||
<Sidebar staff={staff} />
|
|
||||||
</AdminSidebarToggle>
|
|
||||||
<div className="flex flex-col min-w-0 p-5 lg:p-6">
|
<div className="flex flex-col min-w-0 p-5 lg:p-6">
|
||||||
<Topbar staff={staff} />
|
<Topbar staff={staff} />
|
||||||
<section className="admin-page flex-1">{children}</section>
|
<section className="admin-page flex-1">{children}</section>
|
||||||
@@ -182,7 +179,7 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
|
|||||||
const navGroups = getNavGroups(t);
|
const navGroups = getNavGroups(t);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="h-full bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
|
<aside className="sticky top-0 self-start h-screen bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
|
||||||
<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
|
<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
|
||||||
<span
|
<span
|
||||||
className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"
|
className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState, useEffect, type ReactNode } from "react";
|
|
||||||
import { Menu, X } from "lucide-react";
|
|
||||||
|
|
||||||
export function AdminSidebarToggle({ children }: { children: ReactNode }) {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) return;
|
|
||||||
function handleKey(e: KeyboardEvent) {
|
|
||||||
if (e.key === "Escape") setOpen(false);
|
|
||||||
}
|
|
||||||
document.addEventListener("keydown", handleKey);
|
|
||||||
return () => document.removeEventListener("keydown", handleKey);
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setOpen(!open)}
|
|
||||||
className="lg:hidden flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-150 mr-2"
|
|
||||||
style={{ color: "var(--admin-text-muted)" }}
|
|
||||||
aria-label={open ? "Close sidebar" : "Open sidebar"}
|
|
||||||
>
|
|
||||||
{open ? <X size={18} /> : <Menu size={18} />}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{open && (
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 z-40 lg:hidden"
|
|
||||||
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!translate-x-0 lg:!relative lg:!inset-auto ${
|
|
||||||
open ? "translate-x-0" : "-translate-x-full"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -17,7 +17,7 @@ export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Clo
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setOpen(!open)}
|
onClick={() => setOpen(!open)}
|
||||||
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150"
|
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
|
||||||
style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text))" }}
|
style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text))" }}
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
aria-controls="mobile-menu"
|
aria-controls="mobile-menu"
|
||||||
|
|||||||
@@ -34,8 +34,7 @@ export async function Navigation() {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="ml-auto flex md:hidden">
|
<MobileNav menuLabel={t("openMenu") || "Open menu"} closeLabel={t("closeMenu") || "Close menu"}>
|
||||||
<MobileNav menuLabel={t("openMenu") || "Open menu"} closeLabel={t("closeMenu") || "Close menu"}>
|
|
||||||
<Link href="/" className="nav-item md:hidden" role="menuitem">
|
<Link href="/" className="nav-item md:hidden" role="menuitem">
|
||||||
<Image
|
<Image
|
||||||
src="/assets/images/icons/navigation/me.png"
|
src="/assets/images/icons/navigation/me.png"
|
||||||
@@ -163,7 +162,6 @@ export async function Navigation() {
|
|||||||
<ThemeSwitcher />
|
<ThemeSwitcher />
|
||||||
</div>
|
</div>
|
||||||
</MobileNav>
|
</MobileNav>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="ml-auto flex items-center gap-x-1 hidden md:flex">
|
<div className="ml-auto flex items-center gap-x-1 hidden md:flex">
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
|
|||||||
Reference in new issue
Block a user