Initial commit

js/components/topbar.js

@@ -0,0 +1,46 @@
+window.GDD = window.GDD || {};
+
+const GDD = window.GDD;
+
+const PAGE_TITLES = {
+  'overview': 'Overview',
+  'architecture': 'Architecture',
+  'techstack': 'Tech Stack',
+  'backend': 'Backend Model',
+  'agents': 'Agent Lifecycle & Scheduling',
+  'gameplay': 'Gameplay Loop',
+  'roadmap': 'Roadmap',
+  'risks': 'Risks & Questions',
+  'demo-starmap': 'Star Map',
+  'demo-movement': 'Ship Movement',
+  'demo-combat': 'Combat System',
+  'demo-market': 'Market Interface',
+};
+
+function TopBar({ collapsed, currentPage, onToggle }) {
+  const isDemo = currentPage.startsWith('demo-');
+  const section = isDemo ? 'Demos' : 'Docs';
+  const title = PAGE_TITLES[currentPage] || currentPage;
+
+  return (
+    <div className="topbar">
+      <button className="topbar-toggle" onClick={onToggle}>
+        {collapsed ? '→' : '←'}
+      </button>
+      <div className="topbar-breadcrumb">
+        <span className="bc-root">GDD</span>
+        <span className="bc-sep">/</span>
+        <span>{section}</span>
+        <span className="bc-sep">/</span>
+        <span className="bc-current">{title}</span>
+      </div>
+      <div className="topbar-status">
+        <span><span className="status-dot online"></span> Connected</span>
+        <span style={{ color: 'var(--accent)' }}>●</span>
+        <span>Prototype v0.1.0</span>
+      </div>
+    </div>
+  );
+}
+
+GDD.TopBar = TopBar;