Add SaaS UI redesign with sidebar navigation and new components

.claude/skills/saas-ui-redesign/QUICK_START.md

@@ -0,0 +1,284 @@
+# SaaS UI Redesign - Quick Start Guide
+
+## 30-Second Overview
+
+Transform your Vue 3 app from top-nav to SaaS-style sidebar layout:
+
+1. **Create sidebar navigation** (left fixed position)
+2. **Move header to top-right** (user profile, language)
+3. **Adjust main content margin** (account for sidebar)
+4. **Apply consistent spacing** (use 8px/16px/24px units)
+5. **Style with colors** (use 6 core colors)
+
+## Before & After
+
+**Before (Top Nav):**
+```
+┌─────────────────────────────┐
+│ Logo │ Nav │ Lang │ Profile │
+├─────────────────────────────┤
+│  Filters                    │
+├─────────────────────────────┤
+│  Main Content               │
+│                             │
+└─────────────────────────────┘
+```
+
+**After (Sidebar SaaS):**
+```
+┌──────┬──────────────────────┐
+│      │ Lang │ Profile       │
+│ Nav  ├──────────────────────┤
+│      │  Filters             │
+│      ├──────────────────────┤
+│      │  Main Content        │
+│      │                      │
+└──────┴──────────────────────┘
+```
+
+## Minimal Implementation (2 hours)
+
+### 1. Create Sidebar Component
+Create `client/src/components/Sidebar.vue`:
+```vue
+<template>
+  <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-logo">App Name</div>
+    <nav class="sidebar-nav">
+      <router-link to="/" class="nav-item" active-class="active">
+        📊 Dashboard
+      </router-link>
+      <router-link to="/inventory" class="nav-item" active-class="active">
+        📦 Inventory
+      </router-link>
+      <router-link to="/orders" class="nav-item" active-class="active">
+        📋 Orders
+      </router-link>
+      <!-- Add more items -->
+    </nav>
+  </aside>
+</template>
+
+<script>
+export default {
+  data() {
+    return { collapsed: false }
+  }
+}
+</script>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 240px;
+  height: 100vh;
+  background: white;
+  border-right: 1px solid #e2e8f0;
+  overflow-y: auto;
+  padding: 24px 0;
+  z-index: 1000;
+}
+
+.sidebar-logo {
+  padding: 0 20px;
+  font-weight: bold;
+  margin-bottom: 24px;
+  font-size: 1.125rem;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-item {
+  padding: 12px 16px;
+  color: #475569;
+  text-decoration: none;
+  transition: all 0.2s;
+  margin: 0 8px;
+  border-radius: 6px;
+}
+
+.nav-item:hover {
+  background: #f1f5f9;
+  color: #1e293b;
+}
+
+.nav-item.active {
+  background: #dbeafe;
+  color: #0369a1;
+  font-weight: 600;
+}
+</style>
+```
+
+### 2. Update App.vue Layout
+```vue
+<template>
+  <div class="app">
+    <Sidebar />
+
+    <div class="main-layout">
+      <header class="top-header">
+        <div></div>
+        <div class="header-right">
+          <LanguageSwitcher />
+          <ProfileMenu />
+        </div>
+      </header>
+
+      <FilterBar />
+
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  display: flex;
+  min-height: 100vh;
+  background: #f9fafb;
+}
+
+.main-layout {
+  flex: 1;
+  margin-left: 240px;
+  display: flex;
+  flex-direction: column;
+}
+
+.top-header {
+  height: 64px;
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  gap: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+</style>
+```
+
+### 3. Add Responsive Behavior
+```css
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    z-index: 1100;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .main-layout {
+    margin-left: 0;
+  }
+}
+```
+
+## Color Palette Quickstart
+
+Copy-paste these into your CSS:
+```css
+:root {
+  --color-primary: #3b82f6;      /* Blue */
+  --color-text: #0f172a;          /* Dark navy */
+  --color-muted: #64748b;         /* Gray */
+  --color-bg: #f8fafc;            /* Light gray */
+  --color-border: #e2e8f0;        /* Border gray */
+  --color-success: #10b981;       /* Green */
+  --color-warning: #f59e0b;       /* Orange */
+  --color-error: #ef4444;         /* Red */
+}
+```
+
+## Spacing Quickstart
+
+Use these units everywhere:
+- **8px** - Padding inside components
+- **12px** - Gap between small elements
+- **16px** - Gap between items in lists
+- **24px** - Section padding/margins
+- **32px** - Major section breaks
+
+## Checklist
+
+- [ ] Created Sidebar.vue with all nav items
+- [ ] Updated App.vue to use sidebar layout
+- [ ] Added CSS for sidebar styling
+- [ ] Moved header items to top-right
+- [ ] Updated main-content padding
+- [ ] Tested on mobile (sidebar hidden)
+- [ ] Applied consistent colors
+- [ ] Checked spacing alignment
+
+## Common Questions
+
+**Q: How wide should the sidebar be?**
+A: 240px is standard (30% of typical desktop). Use 280px for desktop-only apps.
+
+**Q: Should filters stay below header?**
+A: Yes, between header and main content. Or move inside pages for better UX.
+
+**Q: How do I hide sidebar on mobile?**
+A: Use `transform: translateX(-100%)` and toggle with a button.
+
+**Q: What about dark mode?**
+A: Add `prefers-color-scheme` media query, update CSS variables.
+
+**Q: How do I make multi-level navigation?**
+A: Add a `submenu` array to nav items, use `v-if` to show/hide.
+
+## What Changed from Top-Nav
+
+| Aspect | Top-Nav | Sidebar |
+|--------|---------|---------|
+| Navigation | Horizontal tabs | Vertical links |
+| Content space | Narrow (navbar overhead) | Wide (sidebar fixed) |
+| Discoverability | All items visible | Groups by section |
+| Mobile UX | Cramped | Better (drawer) |
+| Professional feel | Dated | Modern |
+
+## Real-World Example
+
+This codebase transformed from top-nav to sidebar:
+- Added `Sidebar.vue` (50 lines)
+- Modified `App.vue` (30 line changes)
+- Added CSS (60 lines)
+- **Total: 140 lines of code for complete redesign**
+
+## Next Level
+
+Once sidebar works:
+1. **Add animations** - Smooth transitions
+2. **Add icons** - Better visual hierarchy
+3. **Add collapsible groups** - Organize navigation
+4. **Add breadcrumbs** - Show location
+5. **Add search** - Find pages quickly
+
+---
+
+**Total Time: 1-2 hours for basic sidebar redesign**