1
import { useCallback, useState } from "react";
2
import { Outlet } from "@tanstack/react-router";
3
import { STORAGE_KEYS } from "@/client/lib/constants";
4
import { Header } from "@/client/components/header";
5
import { Footer } from "@/client/components/footer";
6
import { Banners } from "@/client/components/ui/banners";
7
import { readStorageString, writeStorageString } from "@/client/lib/storage";
8
import { selectHasLocalSession, useAuthStore } from "@/client/stores/auth-store";
9
 
10
const NARROW_SHELL_CONTENT_CLASS = "mx-auto w-full max-w-7xl";
11
const NARROW_SHELL_ROW_CLASS = `${NARROW_SHELL_CONTENT_CLASS} border-l border-zinc-800/60`;
12
 
13
export function StandaloneLayout() {
14
  const hasLocalSession = useAuthStore(selectHasLocalSession);
15
  const [storedLayout, setStoredLayout] = useState(() => readStorageString(STORAGE_KEYS.LAYOUT));
16
  const expanded = hasLocalSession && storedLayout === "expanded";
17
 
18
  const toggleLayout = useCallback(() => {
19
    const next = expanded ? "default" : "expanded";
20
    writeStorageString(STORAGE_KEYS.LAYOUT, next);
21
    setStoredLayout(next);
22
  }, [expanded]);
23
  return (
24
    <div className="flex h-screen flex-col">
25
      <a
26
        href="#main-content"
27
        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[200] focus:rounded-lg focus:bg-zinc-800 focus:px-4 focus:py-2 focus:text-accent-400 focus:ring-2 focus:ring-accent-500/50"
28
      >
29
        Skip to content
30
      </a>
31
      <Header expanded={expanded} onToggleLayout={toggleLayout} />
32
      <Banners />
33
      <div className={`flex flex-1 overflow-hidden ${expanded ? "" : NARROW_SHELL_ROW_CLASS}`}>
34
        <main id="main-content" tabIndex={-1} className="flex-1 overflow-y-auto outline-none">
35
          <Outlet />
36
        </main>
37
      </div>
38
      <Footer expanded={expanded} />
39
    </div>
40
  );
41
}