initial

src/pages/docs/DocsLayout.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import { Globe, BookOpen, Rocket, Container, Code2, Key, Building2, Terminal, Users, ExternalLink } from 'lucide-react';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { Button } from '@/components/ui/button';
+
+const navigation = [
+  {
+    title: 'Getting Started',
+    items: [
+      { title: 'Introduction', href: '/docs', icon: BookOpen },
+      { title: 'Quick Start', href: '/docs/quick-start', icon: Rocket },
+    ]
+  },
+  {
+    title: 'Deployment',
+    items: [
+      { title: 'Docker', href: '/docs/docker', icon: Container },
+      { title: 'Configuration', href: '/docs/configuration', icon: Terminal },
+    ]
+  },
+  {
+    title: 'Integration',
+    items: [
+      { title: 'TypeScript SDK', href: '/docs/sdk', icon: Code2 },
+      { title: 'OIDC / OAuth 2.0', href: '/docs/oidc', icon: Key },
+    ]
+  },
+  {
+    title: 'Features',
+    items: [
+      { title: 'Organizations', href: '/docs/organizations', icon: Building2 },
+      { title: 'User Management', href: '/docs/users', icon: Users },
+    ]
+  },
+];
+
+const DocsLayout = () => {
+  const location = useLocation();
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      {/* Header */}
+      <header className="shrink-0 z-50 w-full border-b border-border bg-background">
+        <div className="flex h-14 items-center px-4 md:px-6">
+          <Link to="/" className="flex items-center gap-2 mr-6 group">
+            <Globe className="h-5 w-5 text-foreground/80 group-hover:text-primary transition-colors" />
+            <span className="text-base font-semibold tracking-tight text-foreground">idp.global</span>
+          </Link>
+          <div className="flex items-center gap-1 text-sm text-muted-foreground">
+            <span>/</span>
+            <span className="font-medium text-foreground">Documentation</span>
+          </div>
+          <div className="ml-auto flex items-center gap-3">
+            <a
+              href="https://community.foss.global"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors hidden md:flex items-center gap-1"
+            >
+              Community
+              <ExternalLink className="h-3 w-3" />
+            </a>
+            <a
+              href="https://code.foss.global/idp.global/idp.global"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors hidden md:flex items-center gap-1"
+            >
+              Source
+              <ExternalLink className="h-3 w-3" />
+            </a>
+            <ThemeToggle />
+            <Button size="sm" className="h-8" asChild>
+              <a href="https://idp.global">Sign In</a>
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {/* Content area with independent scrolling */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar - independent scroll */}
+        <aside className="hidden md:flex flex-col w-64 border-r border-border shrink-0 overflow-hidden">
+          <div className="flex-1 overflow-y-auto py-6 px-4">
+            <nav className="space-y-6">
+              {navigation.map((section) => (
+                <div key={section.title}>
+                  <h4 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-2 px-2">
+                    {section.title}
+                  </h4>
+                  <ul className="space-y-1">
+                    {section.items.map((item) => {
+                      const Icon = item.icon;
+                      const isActive = location.pathname === item.href;
+                      return (
+                        <li key={item.href}>
+                          <Link
+                            to={item.href}
+                            className={cn(
+                              "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors",
+                              isActive
+                                ? "bg-primary/10 text-primary font-medium"
+                                : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                            )}
+                          >
+                            <Icon className="h-4 w-4" />
+                            {item.title}
+                          </Link>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </nav>
+
+            {/* Community CTA */}
+            <div className="mt-8 p-4 rounded-lg border border-border bg-muted/30">
+              <h4 className="text-sm font-semibold text-foreground mb-1">Need Help?</h4>
+              <p className="text-xs text-muted-foreground mb-3">
+                Join our community for support and discussions.
+              </p>
+              <Button variant="outline" size="sm" className="w-full" asChild>
+                <a href="https://community.foss.global">
+                  Visit Community
+                  <ExternalLink className="ml-2 h-3 w-3" />
+                </a>
+              </Button>
+            </div>
+          </div>
+        </aside>
+
+        {/* Main content - independent scroll */}
+        <main className="flex-1 overflow-y-auto">
+          <div className="max-w-4xl mx-auto px-4 md:px-8 py-8 md:py-12">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default DocsLayout;