Fixed Sidebar

STYLEKIT_STYLE_REFERENCE
style_name: Fixed Sidebar
style_slug: sidebar-fixed
style_source: /styles/sidebar-fixed

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a frontend expert specializing in Fixed Sidebar layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make sidebar too wide (max 280px)
- Do NOT keep sidebar expanded on mobile
- Do NOT forget current page indicator
- Do NOT create overly deep navigation
- Do NOT ignore sidebar overflow scroll

## Must Follow

- Sidebar: fixed top-0 left-0 w-64 h-screen
- Main content: ml-64 (matches sidebar width)
- Mobile: sidebar hidden, hamburger menu trigger
- Active state: highlight current page
- Overflow: sidebar nav scrollable if needed

## Structure

Sidebar (top to bottom):
1. Logo/Brand area
2. Search (optional)
3. Main navigation (scrollable)
4. Secondary nav or settings
5. User profile/account

Main content:
- Left margin matches sidebar width
- Own scrolling context
- Header area for page title
- Content area below

## Responsive

Desktop (1024px+):
- Full sidebar visible
- Main content with left margin

Tablet/Mobile (< 1024px):
- Sidebar as off-canvas drawer
- Hamburger menu button
- Overlay when sidebar open
- Main content full width

## Navigation

- Group related items
- Use icons + labels
- Highlight active item
- Support nested items (accordion)
- Tooltips when collapsed

## Animation & Interaction Rules

- Frictionless Utility: High-interaction areas uniformly use duration-150, avoiding flashy effects that interrupt efficiency.
- Magnetic Icon Shift: On hover, icons slightly shift right (translate-x-0.5), guiding the eye toward the main content area.
- Solid Active State: Current item maintains a stable anchor (left accent line or bold border), avoiding floating feel.
- Content Lift: Main area cards hover only allows -translate-y-0.5 and lightweight shadow, ensuring reading stability.

## Self-Check

After generating code, verify:
1. Sidebar is fixed position
2. Main content has correct margin
3. Mobile has hamburger menu
4. Current page is highlighted
5. Sidebar scrolls if content overflows

---

# Fixed Sidebar Design System

> Application layout with a fixed sidebar navigation and scrollable main content area. Ideal for admin dashboards, documentation sites, dashboards, and SaaS applications.

## Design Philosophy

Fixed Sidebar is a classic layout for application-type interfaces, providing persistent visible navigation while maximizing content display space.

Core principles:
- Persistent navigation: Important entry points are always accessible
- Content priority: Maximize the main area utilization
- Clear hierarchy: The sidebar reflects information architecture
- Responsive adaptation: Gracefully collapse on small screens

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-zinc-200
Radius: rounded-lg
```

### Shadow
```
sm: shadow-sm
md: shadow-sm
lg: shadow-md
hover: hover:shadow-md
focus: focus:shadow-sm
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-colors duration-200
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold tracking-tight
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-2xl md:text-3xl
H1: text-xl md:text-2xl
H2: text-lg md:text-xl
H3: text-base md:text-lg
Body: text-sm
Small: text-xs
```

### Spacing
```
Section: py-6 md:py-8
Container: px-4 md:px-6 lg:px-8
Card: p-4 md:p-6
Gap sm: gap-2 md:gap-3
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-8
```

### Color roles
```
Background primary: bg-zinc-50
Background secondary: bg-white
Background accent: bg-blue-500, bg-emerald-500, bg-amber-500, bg-red-500
Text primary: text-zinc-900
Text secondary: text-zinc-600
Text muted: text-zinc-400
Button primary: bg-blue-500 text-white
Button secondary: bg-zinc-100 text-zinc-700
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-2xl`
- `font-black`
- `font-extrabold`
- `text-4xl`
- `text-5xl`
- `text-6xl`

### Banned patterns
- matches `^rounded-(?:2xl|3xl|full)`
- matches `^shadow-2xl`
- matches `^text-[456]xl`

### Why they are banned
- `rounded-2xl`: Sidebar Fixed uses compact rounded-lg for functional UI elements
- `shadow-2xl`: Sidebar Fixed uses subtle shadows for a clean dashboard feel
- `text-5xl`: Sidebar Fixed uses compact typography appropriate for data-dense layouts

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-lg
text-sm font-medium
transition-colors
```

### Every card must include
```
bg-white
rounded-xl
border border-zinc-200
shadow-sm
```

### Every input must include
```
bg-zinc-100
border-0
rounded-lg
text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500/30
```

---

## [COMPARE] Fixed Sidebar wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-lg text-sm font-medium transition-colors bg-blue-500 text-white">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white rounded-xl border border-zinc-200 shadow-sm p-4 md:p-6">
 <h3 class="font-semibold tracking-tight text-base md:text-lg">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-zinc-100 border-0 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Fixed Sidebar page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-zinc-50 text-zinc-900 border border-zinc-200 px-4 md:px-6 lg:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
 <a href="/" class="font-semibold tracking-tight text-base md:text-lg">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-sans text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-blue-500 text-zinc-900 py-6 md:py-8 px-4 md:px-6 lg:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold tracking-tight text-2xl md:text-3xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-lg text-sm font-medium transition-colors bg-blue-500 text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-zinc-50 text-zinc-900 py-6 md:py-8 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold tracking-tight text-lg md:text-xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 <!-- Card template - repeat for each card -->
 <div class="bg-white rounded-xl border border-zinc-200 shadow-sm p-4 md:p-6">
 <h3 class="font-semibold tracking-tight text-base md:text-lg">{CARD_TITLE}</h3>
 <p class="font-sans text-sm text-zinc-400">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-zinc-100 border-0 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-zinc-600 py-6 md:py-8 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
 <div>
 <span class="font-semibold tracking-tight text-base md:text-lg">{LOGO_TEXT}</span>
 <p class="font-sans text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold tracking-tight text-base md:text-lg">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Fixed Sidebar post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-lg text-sm font-medium transition-colors`
- [ ] Card includes: `bg-white rounded-xl border border-zinc-200 shadow-sm`
- [ ] Input includes: `bg-zinc-100 border-0 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30`

### Forbidden check
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-2xl`
- [ ] Not using `font-black`
- [ ] Not using `font-extrabold`
- [ ] Not using `text-4xl`
- [ ] Not using `text-5xl`

### Style rule check
- [ ] Sidebar uses fixed or sticky positioning
- [ ] Main content area sets left margin ml-64 or pl-64
- [ ] Mobile sidebar collapses to drawer or hamburger menu
- [ ] Provide expand/collapse sidebar controls
- [ ] Sidebar width unified at w-64 (256px) or w-72 (288px)

### Style drift check
- [ ] Does not violate: Do not make sidebar too wide affecting main content area
- [ ] Does not violate: Do not keep sidebar expanded on mobile
- [ ] Does not violate: Do not ignore current page state indication
- [ ] Does not violate: Do not create overly deep navigation levels
- [ ] Does not violate: Do not let sidebar content overflow without scrolling

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Fixed Sidebar

---

## [EXAMPLES] Example prompts

### 1. 

```
Create an admin dashboard with fixed sidebar:
1. Fixed sidebar with logo, search, navigation, user
2. Navigation groups: Dashboard, Content, Users, Settings
3. Active page highlighted in nav
4. Main area with header and content grid
5. Mobile: hamburger menu, slide-out sidebar
6. Collapsible sidebar option (icons only)
7. User dropdown at bottom of sidebar
Professional look with blue accent color
```

### 2. 

```
Create a documentation site with fixed sidebar:
1. Sidebar with doc sections (Getting Started, API, Examples)
2. Nested navigation with accordion expand
3. Search at top of sidebar
4. Main content area with article
5. Right sidebar with table of contents (optional)
6. Previous/Next article navigation at bottom
7. Mobile: slide-out sidebar menu
Clean minimal design focused on readability
```

### 3. SaaS 

SaaS 

```
Create a SaaS application shell with fixed sidebar:
1. Sidebar with workspace switcher at top
2. Main nav: Home, Projects, Team, Reports
3. Secondary nav at bottom: Settings, Help
4. Notification badge on nav item
5. Main content with toolbar and data table
6. Mobile: slide-out navigation
7. Collapsible sidebar with keyboard shortcut hint
Modern SaaS aesthetic with subtle shadows
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- make sidebar too wide affecting main content area
- keep sidebar expanded on mobile
- ignore current page state indication
- create overly deep navigation levels
- let sidebar content overflow without scrolling
- use bouncy, spinning, or flashy animations for sidebar menus
- leave active items without a clear visual anchor

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not make sidebar too wide affecting main content area
- [ ] do not keep sidebar expanded on mobile
- [ ] do not ignore current page state indication
- [ ] do not create overly deep navigation levels
- [ ] do not let sidebar content overflow without scrolling