Change from sidebar to tabs

src/App.css

@@ -1,5 +1,6 @@
 .app-layout {
   display: flex;
+  flex-direction: column;
   width: 100vw;
   height: 100vh;
   overflow: hidden;

src/components/Sidebar.css

@@ -1,21 +1,26 @@
 .sidebar {
-  width: 280px;
+  width: 100%;
-  height: 100vh;
+  height: 64px;
   background: var(--bg-darker);
-  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  padding: 2rem 0;
+  padding: 0 1.5rem;
-  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  flex-shrink: 0;
 }
 
 .sidebar-header {
-  padding: 0 1.5rem 2rem;
+  padding: 0;
-  border-bottom: 1px solid var(--border-color);
+  margin-right: 3rem;
+  border: none;
+  display: flex;
+  align-items: center;
 }
 
 .sidebar-logo {
-  font-size: 1.75rem;
+  font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
   background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
@@ -24,69 +29,44 @@
   background-clip: text;
 }
 
-.sidebar-tagline {
-  margin: 0.25rem 0 0;
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.5);
-  font-weight: 300;
-}
-
 .sidebar-nav {
   flex: 1;
-  padding: 2rem 1rem;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
   gap: 0.5rem;
+  height: 100%;
+  overflow-x: auto;
 }
 
 .nav-item {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  justify-content: center;
-  padding: 1rem 1.25rem;
+  padding: 0.5rem 1rem;
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid transparent;
-  border-radius: 12px;
+  border-radius: 8px;
   color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
-  font-size: 1rem;
+  font-size: 0.9rem;
-  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
 }
 
 .nav-item:hover {
   background: rgba(255, 255, 255, 0.05);
-  border-color: var(--primary);
   color: rgba(255, 255, 255, 0.9);
-  transform: translateX(4px);
 }
 
 .nav-item.active {
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
+  background: rgba(99, 102, 241, 0.1);
-  border-color: var(--primary);
+  border-color: rgba(99, 102, 241, 0.3);
-  color: #fff;
+  color: var(--primary);
-  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+  font-weight: 500;
-}
-
-.nav-icon {
-  font-size: 1.5rem;
-  line-height: 1;
 }
 
 .nav-name {
   font-weight: 500;
-}
-
-.sidebar-footer {
-  padding: 0 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding-top: 1.5rem;
-}
-
-.footer-text {
-  margin: 0;
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-align: center;
-  font-style: italic;
 }

src/components/Sidebar.tsx

@@ -7,7 +7,6 @@ export interface AppInfo {
   id: AppId;
   path: string;
   name: string;
-  icon: string;
   description: string;
 }
 
@@ -16,45 +15,39 @@ export const APPS: AppInfo[] = [
     id: 'image-approx',
     path: '/image-approx',
     name: 'Image Approximation',
-    icon: '🎨',
     description: 'Evolve triangles to approximate images',
   },
   {
     id: 'snake-ai',
     path: '/snake-ai',
     name: 'Neural Network Snake',
-    icon: '🐍',
     description: 'Evolve neural networks to play Snake',
   },
   {
     id: 'rogue-gen',
     path: '/rogue-gen',
     name: 'Rogue Map Gen',
-    icon: '🏰',
     description: 'Evolve cellular automata for dungeon generation',
   },
   {
     id: 'neat-arena',
     path: '/neat-arena',
     name: 'NEAT Arena',
-    icon: '⚔️',
     description: 'Evolve AI agents to fight in a top-down shooter',
   },
   {
     id: 'lunar-lander',
     path: '/lunar-lander',
     name: 'Lunar Lander',
-    icon: '🚀',
     description: 'Evolve a spaceship to land safely',
   },
 ];
 
 export default function Sidebar() {
   return (
-    <aside className="sidebar">
+    <header className="sidebar">
       <div className="sidebar-header">
         <h1 className="sidebar-logo">🧬 Evolution</h1>
-        <p className="sidebar-tagline">Mini-Apps</p>
       </div>
 
       <nav className="sidebar-nav">
@@ -65,15 +58,10 @@ export default function Sidebar() {
             className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
             title={app.description}
           >
-            <span className="nav-icon">{app.icon}</span>
             <span className="nav-name">{app.name}</span>
           </NavLink>
         ))}
       </nav>
-
+    </header>
-      <div className="sidebar-footer">
-        <p className="footer-text">Select an app to begin</p>
-      </div>
-    </aside>
   );
 }