fix(ui): Seitenmenue auf dem Handy schliessbar machen (#034)
Das Markup stammt von AdminLTE, dessen JavaScript wir bewusst nicht einbinden. Die Klasse sidebar-open liess sich damit setzen, aber nichts nahm sie wieder weg: keine Flaeche zum Antippen, kein Schliessen beim Navigieren, kein Escape. Auf dem Telefon blieb das Menue ueber dem Inhalt stehen. Jetzt gibt es einen eigenen Zustand, auf den Kopfzeile und Menue gemeinsam hoeren, eine abdunkelnde Flaeche dahinter, einen Schliessen-Knopf im Menuekopf und das Schliessen beim Navigieren. Der Inhalt dahinter scrollt nicht mehr mit. Ausserdem zeigt die Dashboard-Tabelle auf dem Telefon nur Host und Ablauf, den Kunden klein darunter - vorher war rechts die Haelfte abgeschnitten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -121,12 +121,22 @@ export default async function DashboardSeite() {
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
{/* Auf dem Handy bleiben Host und Ablauf; der Rest käme ohnehin nur
|
||||
per Seitwärtsscrollen ins Bild (#034). */}
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Kunde</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col" className="d-none d-md-table-cell">
|
||||
Kunde
|
||||
</th>
|
||||
<th scope="col" className="d-none d-lg-table-cell">
|
||||
Key
|
||||
</th>
|
||||
<th scope="col">Ablauf</th>
|
||||
<th scope="col">Proxmox</th>
|
||||
<th scope="col">Kundenrechnung</th>
|
||||
<th scope="col" className="d-none d-sm-table-cell">
|
||||
Proxmox
|
||||
</th>
|
||||
<th scope="col" className="d-none d-sm-table-cell">
|
||||
Kundenrechnung
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -137,8 +147,12 @@ export default async function DashboardSeite() {
|
||||
{host.hostname}
|
||||
</Link>
|
||||
{host.meldetNicht ? <KeineMeldungBadge /> : null}
|
||||
{/* Auf schmalen Bildschirmen steht der Kunde hier mit darunter. */}
|
||||
<div className="small text-body-secondary d-md-none">
|
||||
{host.kunde ? host.kunde.name : "Nicht zugeordnet"}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td className="d-none d-md-table-cell">
|
||||
{host.kunde ? (
|
||||
<Link href={`/kunden/${host.kunde.id}`} className="text-decoration-none">
|
||||
{host.kunde.name}
|
||||
@@ -152,16 +166,16 @@ export default async function DashboardSeite() {
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<td className="d-none d-lg-table-cell">
|
||||
<CopyableCode wert={host.subKey} />
|
||||
</td>
|
||||
<td>
|
||||
<AblaufBadge datum={host.nextduedate?.toISOString() ?? null} heute={heute} />
|
||||
</td>
|
||||
<td>
|
||||
<td className="d-none d-sm-table-cell">
|
||||
<EinkaufBadge bezahlt={host.einkaufBezahlt} />
|
||||
</td>
|
||||
<td>
|
||||
<td className="d-none d-sm-table-cell">
|
||||
<VerkaufBadge erstellt={host.verkaufErstellt} bezahlt={host.verkaufBezahlt} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -186,6 +186,19 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fläche hinter dem geöffneten Menü auf schmalen Bildschirmen. Ein Knopf statt eines div,
|
||||
* damit sie auch per Tastatur erreichbar ist.
|
||||
*/
|
||||
.pl-menu-hintergrund {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1037; /* unter dem Menü (1038), über allem anderen */
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ---------- Inhaltsbereich ---------- */
|
||||
|
||||
.app-content-header {
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
||||
import { SearchDialog, type SuchEintrag } from "./SearchDialog";
|
||||
import type { Rolle } from "@/generated/prisma/enums";
|
||||
import { ROLLEN_TEXT } from "@/server/auth/rollen";
|
||||
import { menuUmschalten } from "./menuZustand";
|
||||
|
||||
export interface KopfleistenAlert {
|
||||
id: string;
|
||||
@@ -58,16 +59,9 @@ export function Header({
|
||||
return () => window.removeEventListener("keydown", tasten);
|
||||
}, []);
|
||||
|
||||
/** Sidebar umschalten: auf schmalen Bildschirmen als Overlay, sonst eingeklappt. */
|
||||
/** Seitenmenü umschalten – der Zustand liegt in menuZustand.ts, damit das Menü selbst ihn kennt. */
|
||||
const sidebarUmschalten = useCallback(() => {
|
||||
const body = document.body;
|
||||
if (window.innerWidth < 992) {
|
||||
body.classList.toggle("sidebar-open");
|
||||
body.classList.remove("sidebar-collapse");
|
||||
} else {
|
||||
body.classList.toggle("sidebar-collapse");
|
||||
body.classList.remove("sidebar-open");
|
||||
}
|
||||
menuUmschalten();
|
||||
}, []);
|
||||
|
||||
function themaUmschalten() {
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { LogoMitSchriftzug } from "@/components/Logo";
|
||||
import type { Rolle } from "@/generated/prisma/enums";
|
||||
import { darf } from "@/server/auth/rollen";
|
||||
import { menuSchliessen, useMenuOffen } from "./menuZustand";
|
||||
|
||||
interface MenuEintrag {
|
||||
href: string;
|
||||
@@ -30,6 +31,21 @@ export function Sidebar({
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [suche, setSuche] = useState("");
|
||||
const menuOffen = useMenuOffen();
|
||||
|
||||
// Nach dem Navigieren hat das Menü seinen Zweck erfüllt – auf dem Handy verdeckt es sonst alles.
|
||||
useEffect(() => {
|
||||
menuSchliessen();
|
||||
}, [pathname]);
|
||||
|
||||
// Escape schließt, wie bei jedem anderen Overlay auch.
|
||||
useEffect(() => {
|
||||
function taste(ereignis: KeyboardEvent) {
|
||||
if (ereignis.key === "Escape") menuSchliessen();
|
||||
}
|
||||
window.addEventListener("keydown", taste);
|
||||
return () => window.removeEventListener("keydown", taste);
|
||||
}, []);
|
||||
|
||||
const haupt: MenuEintrag[] = [
|
||||
{ href: "/", titel: "Dashboard", icon: "bi-speedometer2" },
|
||||
@@ -105,11 +121,30 @@ export function Sidebar({
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="app-sidebar shadow" data-bs-theme="dark">
|
||||
<div className="sidebar-brand">
|
||||
<>
|
||||
{/* Fläche hinter dem Menü: antippen schließt. Ohne sie bleibt das Menü auf dem Handy stehen. */}
|
||||
{menuOffen ? (
|
||||
<button
|
||||
type="button"
|
||||
className="pl-menu-hintergrund d-lg-none"
|
||||
aria-label="Menü schließen"
|
||||
onClick={menuSchliessen}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<aside className="app-sidebar shadow" data-bs-theme="dark">
|
||||
<div className="sidebar-brand d-flex align-items-center justify-content-between">
|
||||
<Link href="/" className="brand-link">
|
||||
<LogoMitSchriftzug variante="sidebar" groesse={34} />
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link text-white d-lg-none pl-touch-target me-2"
|
||||
aria-label="Menü schließen"
|
||||
onClick={menuSchliessen}
|
||||
>
|
||||
<i className="bi bi-x-lg" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pl-sidebar-user">
|
||||
@@ -147,6 +182,7 @@ export function Sidebar({
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { useSyncExternalStore } from "react";
|
||||
|
||||
/**
|
||||
* Zustand des Seitenmenüs auf schmalen Bildschirmen (#034).
|
||||
*
|
||||
* AdminLTE bringt dafür eigenes JavaScript mit, das wir bewusst nicht einbinden – die Klasse
|
||||
* `sidebar-open` am `body` allein lässt sich aber nicht wieder loswerden: Kein Hintergrund zum
|
||||
* Antippen, kein Schließen beim Navigieren. Deshalb ein eigener, winziger Zustand, auf den
|
||||
* Kopfzeile und Menü gemeinsam hören.
|
||||
*/
|
||||
|
||||
const SCHMAL = 992;
|
||||
|
||||
let offen = false;
|
||||
const zuhoerer = new Set<() => void>();
|
||||
|
||||
function melden() {
|
||||
for (const ruf of zuhoerer) ruf();
|
||||
}
|
||||
|
||||
/** Setzt die Klassen, die das AdminLTE-Stylesheet auswertet. */
|
||||
function klassenSetzen() {
|
||||
const body = document.body;
|
||||
body.classList.toggle("sidebar-open", offen);
|
||||
// Auf schmalen Bildschirmen liegt das Menü über dem Inhalt; dahinter soll nichts mitscrollen.
|
||||
body.style.overflow = offen && window.innerWidth < SCHMAL ? "hidden" : "";
|
||||
}
|
||||
|
||||
export function menuUmschalten() {
|
||||
if (window.innerWidth >= SCHMAL) {
|
||||
// Breiter Bildschirm: Das Menü bleibt stehen und wird nur schmaler.
|
||||
document.body.classList.toggle("sidebar-collapse");
|
||||
document.body.classList.remove("sidebar-open");
|
||||
return;
|
||||
}
|
||||
|
||||
offen = !offen;
|
||||
document.body.classList.remove("sidebar-collapse");
|
||||
klassenSetzen();
|
||||
melden();
|
||||
}
|
||||
|
||||
export function menuSchliessen() {
|
||||
if (!offen) return;
|
||||
offen = false;
|
||||
klassenSetzen();
|
||||
melden();
|
||||
}
|
||||
|
||||
function abonnieren(ruf: () => void) {
|
||||
zuhoerer.add(ruf);
|
||||
return () => {
|
||||
zuhoerer.delete(ruf);
|
||||
};
|
||||
}
|
||||
|
||||
export function useMenuOffen(): boolean {
|
||||
// Auf dem Server ist das Menü nie offen – sonst käme es beim ersten Rendern zu einem Unterschied.
|
||||
return useSyncExternalStore(
|
||||
abonnieren,
|
||||
() => offen,
|
||||
() => false,
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user