Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(gtm): add responsive collapsible sidebar for mobile

Browse Source
This commit is contained in:
Floke
2026-01-04 19:53:21 +00:00
parent 8a575c1f29
commit 7cd90f77e3
4 changed files with 326 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
gtm-architect/components/Layout.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import React, { useState } from 'react';
import { Phase, Language, Theme } from '../types';
import { Activity, Target, Crosshair, Map, FileText, CheckCircle, Lock, Moon, Sun, Languages, ShieldCheck, Terminal, LayoutTemplate, TrendingUp, Shield } from 'lucide-react';
import { Activity, Target, Crosshair, Map, FileText, CheckCircle, Lock, Moon, Sun, Languages, ShieldCheck, Terminal, LayoutTemplate, TrendingUp, Shield, Menu, X } from 'lucide-react';
interface LayoutProps {
currentPhase: Phase;
@@ -41,6 +41,7 @@ export const Layout: React.FC<LayoutProps> = ({
setLanguage,
labels
}) => {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const steps = [
{ id: Phase.Input, label: labels.initTitle ? 'Input' : 'Input' },
@@ -57,17 +58,33 @@ export const Layout: React.FC<LayoutProps> = ({
return (
<div className={`min-h-screen flex font-sans transition-colors duration-300 ${theme === 'dark' ? 'dark bg-robo-900 text-slate-200' : 'bg-slate-50 text-slate-900'}`}>
{/* Mobile Backdrop */}
{isSidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-40 md:hidden backdrop-blur-sm"
onClick={() => setIsSidebarOpen(false)}
/>
)}
{/* Sidebar */}
<div className="w-80 border-r flex-shrink-0 flex flex-col transition-colors duration-300
bg-white border-slate-200
dark:bg-robo-800 dark:border-robo-700
">
<div className="p-6 border-b transition-colors duration-300 border-slate-200 dark:border-robo-700">
<h1 className="text-xl font-bold font-mono tracking-tighter flex items-center gap-2 text-slate-900 dark:text-white">
<div className="w-3 h-3 bg-robo-500 dark:bg-robo-accent rounded-full animate-pulse"></div>
ROBOPLANET
</h1>
<p className="text-xs mt-1 uppercase tracking-widest text-slate-500 dark:text-robo-400">GTM Architect Engine</p>
<div className={`
fixed inset-y-0 left-0 z-50 w-80 border-r flex-shrink-0 flex flex-col transition-all duration-300 transform
bg-white border-slate-200 dark:bg-robo-800 dark:border-robo-700
${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
md:relative md:translate-x-0
`}>
<div className="p-6 border-b transition-colors duration-300 border-slate-200 dark:border-robo-700 flex justify-between items-center">
<div>
<h1 className="text-xl font-bold font-mono tracking-tighter flex items-center gap-2 text-slate-900 dark:text-white">
<div className="w-3 h-3 bg-robo-500 dark:bg-robo-accent rounded-full animate-pulse"></div>
ROBOPLANET
</h1>
<p className="text-xs mt-1 uppercase tracking-widest text-slate-500 dark:text-robo-400">GTM Architect Engine</p>
</div>
<button onClick={() => setIsSidebarOpen(false)} className="md:hidden p-2 text-slate-500">
<X size={20} />
</button>
</div>
<div className="px-4 py-4 flex gap-2">
@@ -101,7 +118,12 @@ export const Layout: React.FC<LayoutProps> = ({
return (
<button
key={step.id}
onClick={() => isUnlocked && onPhaseSelect(step.id)}
onClick={() => {
if (isUnlocked) {
onPhaseSelect(step.id);
setIsSidebarOpen(false);
}
}}
disabled={!isUnlocked}
className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all border text-left
${isActive
@@ -149,6 +171,14 @@ export const Layout: React.FC<LayoutProps> = ({
bg-slate-50
dark:bg-gradient-to-br dark:from-robo-900 dark:to-[#0b1120]
">
{/* Mobile Header Toggle */}
<header className="md:hidden flex items-center p-4 border-b bg-white dark:bg-robo-800 border-slate-200 dark:border-robo-700">
<button onClick={() => setIsSidebarOpen(true)} className="p-2 text-slate-600 dark:text-slate-300">
<Menu size={24} />
</button>
<h1 className="ml-2 font-bold font-mono tracking-tighter text-slate-900 dark:text-white">ROBOPLANET</h1>
</header>
<div className="max-w-5xl mx-auto p-8 pb-32">
{children}
</div>