<ul class="list-unstyled" style="margin:0;background:#fff;width:220px;padding:8px 0;">
<li class="nav-item" style="margin:0;">
<a href="#" class="d-flex align-items-center" style="padding:8px 17px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;">
<span style="margin-right:10px;font-size:1.1rem;">📊</span>
<span style="flex:1;">Dashboard</span>
</a>
</li>
<li class="nav-item active" style="margin:0;">
<a href="#" class="d-flex align-items-center" style="padding:8px 17px;border-left:3px solid var(--primary-color);background:var(--primary-light);color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;">
<span style="margin-right:10px;font-size:1.1rem;">✍️</span>
<span style="flex:1;">Script Generator</span>
<span class="badge ms-auto">AI</span>
</a>
</li>
<li class="nav-item" style="margin:0;">
<a href="#" class="d-flex align-items-center" style="padding:8px 17px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;">
<span style="margin-right:10px;font-size:1.1rem;">💡</span>
<span style="flex:1;">Video Ideas</span>
<span class="badge ms-auto">AI</span>
</a>
</li>
<li class="nav-item" style="margin:0;">
<a href="#" class="d-flex align-items-center" style="padding:8px 17px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;">
<span style="margin-right:10px;font-size:1.1rem;">🖼️</span>
<span style="flex:1;">Thumbnail Editor</span>
</a>
</li>
</ul>
<ul class="list-unstyled" style="margin:0;background:#fff;width:220px;padding:8px 0;">
{{#each items}}
<li class="nav-item{{#if this.active}} active{{/if}}" style="margin:0;">
<a href="#" class="d-flex align-items-center" style="padding:8px 17px;border-left:3px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};background:{{#if this.active}}var(--primary-light){{else}}transparent{{/if}};color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;">
<span style="margin-right:10px;font-size:1.1rem;">{{this.icon}}</span>
<span style="flex:1;">{{this.label}}</span>
{{#if this.badge}}<span class="badge ms-auto">{{this.badge}}</span>{{/if}}
{{#if this.expandable}}<span style="font-size:0.6rem;color:var(--paragraph);margin-left:4px;">{{#if this.expanded}}▲{{else}}▼{{/if}}</span>{{/if}}
</a>
{{! Sub-items }}
{{#if this.expanded}}
<ul class="list-unstyled" style="margin:0;padding:0;">
{{#each this.children}}
<li>
<a href="#" style="display:flex;align-items:center;padding:6px 17px 6px 44px;color:{{#if this.active}}var(--primary-color){{else}}var(--paragraph){{/if}};text-decoration:none;font-family:'Satoshi';font-size:0.8125rem;font-weight:{{#if this.active}}700{{else}}400{{/if}};background:{{#if this.active}}var(--primary-light){{else}}transparent{{/if}};border-left:3px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};">
{{this.label}}
</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{
"items": [
{
"icon": "📊",
"label": "Dashboard",
"active": false
},
{
"icon": "✍️",
"label": "Script Generator",
"active": true,
"badge": "AI"
},
{
"icon": "💡",
"label": "Video Ideas",
"active": false,
"badge": "AI"
},
{
"icon": "🖼️",
"label": "Thumbnail Editor",
"active": false
}
]
}
Sidebar navigation item. Active state uses --primary-light background and --primary-color left border (3px). Supports expandable groups with sub-items. AI-powered tools show the AI badge.
Appears in: The persistent app sidebar on every authenticated page. Groups: Dashboard, Ideas, Discover, Plan, Projects, Growth, Settings.