SidebarNav

sidebarnav-1779379671686.tsx

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: 'Buttons' }, { id: 'cards', label: 'Cards' }, { id: 'forms', label: 'Forms' },
  ]},
  { id: 'categories', icon: '⊞', label: 'Categories', shortcut: 'G K' },
  { id: 'mcp', icon: '⚡', label: 'MCP Server', shortcut: 'G M' },
  { id: 'docs', icon: '📄', label: 'Documentation', shortcut: 'G D' },
  { id: 'settings', icon: '⚙', label: 'Settings', shortcut: 'G S' },
]

export default function SidebarNav() {
  const [active, setActive] = useState('components')
  const [collapsed, setCollapsed] = useState(false)
  const [expanded, setExpanded] = useState<string | null>('components')

  return (
    <div style={{ display: 'flex', height: 360, background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, overflow: 'hidden' }}>
      {/* Sidebar */}
      <div style={{ width: collapsed ? 56 : 220, background: '#0D0D0D', borderRight: '1px solid rgba(255,255,255,0.06)', display: 'flex', flexDirection: 'column', transition: 'width 0.25s ease', overflow: 'hidden', flexShrink: 0 }}>
        {/* Logo */}
        <div style={{ padding: collapsed ? '18px 14px' : '18px 20px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
          <span style={{ fontSize: 20, flexShrink: 0 }}>⬡</span>
          {!collapsed && <span style={{ color: '#F5F5F0', fontSize: 15, fontWeight: 800, whiteSpace: 'nowrap' }}>Empire UI</span>}
        </div>

        {/* Nav items */}
        <div style={{ flex: 1, padding: '12px 8px', overflowY: 'auto', overflowX: 'hidden' }}>
          {NAV.map(item => (
            <div key={item.id}>
              <button onClick={() => {
                setActive(item.id)
                if (item.children) setExpanded(e => e === item.id ? null : item.id)
              }} style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: collapsed ? '10px 14px' : '9px 12px',
                border: 'none', borderRadius: 8, cursor: 'pointer', textAlign: 'left', marginBottom: 2,
                background: active === item.id ? 'rgba(201,168,76,0.1)' : 'transparent',
                color: active === item.id ? '#C9A84C' : 'rgba(255,255,255,0.55)',
                transition: 'all 0.15s',
              }} title={collapsed ? item.label : undefined}>
                <span style={{ fontSize: 16, flexShrink: 0 }}>{item.icon}</span>
                {!collapsed && (
                  <>
                    <span style={{ flex: 1, fontSize: 13, fontWeight: active === item.id ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.label}</span>
                    {item.badge && <span style={{ background: 'rgba(201,168,76,0.15)', color: '#C9A84C', fontSize: 10, padding: '1px 5px', borderRadius: 10, flexShrink: 0 }}>{item.badge}</span>}
                    {item.children && <span style={{ fontSize: 10, opacity: 0.5, transform: expanded === item.id ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', flexShrink: 0 }}>▾</span>}
                  </>
                )}
              </button>
              {!collapsed && item.children && expanded === item.id && (
                <div style={{ marginLeft: 28, marginBottom: 4 }}>
                  {item.children.map(child => (
                    <button key={child.id} onClick={() => setActive(child.id)} style={{ width: '100%', display: 'block', padding: '6px 12px', border: 'none', borderRadius: 6, cursor: 'pointer', textAlign: 'left', background: active === child.id ? 'rgba(201,168,76,0.08)' : 'transparent', color: active === child.id ? '#C9A84C' : 'rgba(255,255,255,0.35)', fontSize: 12, marginBottom: 1 }}>{child.label}</button>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Collapse toggle */}
        <div style={{ padding: '12px 8px', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          <button onClick={() => setCollapsed(c => !c)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: collapsed ? 'center' : 'flex-start', gap: 8, padding: '8px 12px', border: 'none', borderRadius: 8, background: 'rgba(255,255,255,0.04)', cursor: 'pointer', color: 'rgba(255,255,255,0.4)', fontSize: 13 }}>
            <span style={{ transform: collapsed ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', fontSize: 16 }}>◀</span>
            {!collapsed && <span>Collapse</span>}
          </button>
        </div>
      </div>

      {/* Content */}
      <div style={{ flex: 1, padding: 24 }}>
        <div style={{ color: '#F5F5F0', fontSize: 18, fontWeight: 700, marginBottom: 8 }}>
          {NAV.find(n => n.id === active)?.label || active}
        </div>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 14 }}>Active page: {active}</div>
      </div>
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Collapsible sidebar navigation with icon mode, nested items, active state, and keyboard shortcuts

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

// @types/react
// @types/react-dom
import React, { useState } from 'react';
import './MegaMenu.css';

interface MegaMenuProps {
  title: string;
  items: {
    column: string;
    link: string;
    text: string;
  }[];
}

const MegaMenu: React.FC<Me

MegaMenu

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation