form 1 topics added

components/layout/collapsible-sidebar.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Shared state + styling for a sidebar that collapses in place on large screens
+ * and opens as a slide-in drawer on small ones. One toggle drives both, choosing
+ * the right behaviour by media query at click time. Defaults: open on desktop
+ * (CSS `lg:` classes), closed on mobile (state) — so SSR and hydration agree.
+ */
+export function useCollapsibleSidebar() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [desktopCollapsed, setDesktopCollapsed] = useState(false);
+
+  function toggle() {
+    if (typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches) {
+      setDesktopCollapsed((c) => !c);
+    } else {
+      setMobileOpen((o) => !o);
+    }
+  }
+
+  return {
+    mobileOpen,
+    desktopCollapsed,
+    toggle,
+    closeMobile: () => setMobileOpen(false),
+  };
+}
+
+export function sidebarAsideClass(mobileOpen: boolean, desktopCollapsed: boolean) {
+  return cn(
+    "z-40 w-64 shrink-0 border-r border-border/60 bg-surface",
+    // Small screens: a fixed slide-in drawer sitting below the header.
+    "fixed bottom-0 left-0 top-[4.125rem] transition-transform duration-200",
+    mobileOpen ? "translate-x-0 shadow-[var(--shadow-lg)]" : "-translate-x-full",
+    // Large screens: part of the layout flow, collapsible in place.
+    "lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-none",
+    desktopCollapsed ? "lg:hidden" : "lg:block",
+  );
+}
+
+export const sidebarNavClass =
+  "h-full overflow-y-auto p-4 lg:sticky lg:top-[4.125rem] lg:h-[calc(100vh-4.125rem)]";
+
+export function SidebarBackdrop({ show, onClick }: { show: boolean; onClick: () => void }) {
+  if (!show) return null;
+  return (
+    <div
+      className="fixed inset-0 z-30 bg-foreground/30 lg:hidden"
+      onClick={onClick}
+      aria-hidden="true"
+    />
+  );
+}
+
+export function SidebarToggle({ onClick, className }: { onClick: () => void; className?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      aria-label="Toggle topics menu"
+      className={cn(
+        "mb-5 inline-flex items-center gap-2 rounded-xl border border-border/60 bg-surface px-3 py-2 text-sm font-bold text-muted shadow-[var(--shadow-sm)] transition-colors hover:text-foreground",
+        className,
+      )}
+    >
+      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+      Topics
+    </button>
+  );
+}