SidebarMini

sidebarmini-1779388705793.tsx

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

export default function SidebarMini() {
  const [expanded, setExpanded] = useState(false);
  const [active, setActive] = useState('dashboard');

  const items = [
    { id: 'dashboard', icon: '⊞', label: 'Dashboard' },
    { id: 'projects', icon: '📁', label: 'Projects' },
    { id: 'analytics', icon: '📊', label: 'Analytics' },
    { id: 'team', icon: '👥', label: 'Team' },
    { id: 'settings', icon: '⚙️', label: 'Settings' },
  ];

  return (
    <div style={{ display: 'flex', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{
        width: expanded ? '200px' : '60px',
        background: '#111111',
        border: '1px solid rgba(255,255,255,0.07)',
        borderRadius: '16px',
        padding: '12px',
        transition: 'width 0.3s cubic-bezier(0.4,0,0.2,1)',
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column', gap: '4px',
      }}>
        <button onClick={() => setExpanded(e => !e)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          color: '#C9A84C', fontSize: '18px', padding: '8px',
          borderRadius: '10px', textAlign: 'left', marginBottom: '8px',
          transition: 'background 0.2s',
        }}>{expanded ? '◂' : '▸'}</button>

        {items.map(item => (
          <div
            key={item.id}
            onClick={() => setActive(item.id)}
            title={!expanded ? item.label : ''}
            style={{
              display: 'flex', alignItems: 'center', gap: '12px',
              padding: '10px',
              borderRadius: '10px',
              cursor: 'pointer',
              background: active === item.id ? 'rgba(201,168,76,0.12)' : 'transparent',
              border: `1px solid ${active === item.id ? 'rgba(201,168,76,0.25)' : 'transparent'}`,
              transition: 'all 0.2s ease',
              whiteSpace: 'nowrap',
            }}
            onMouseEnter={e => { if (active !== item.id) e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
            onMouseLeave={e => { if (active !== item.id) e.currentTarget.style.background = 'transparent'; }}
          >
            <span style={{ fontSize: '18px', flexShrink: 0 }}>{item.icon}</span>
            {expanded && <span style={{ color: active === item.id ? '#C9A84C' : 'rgba(245,245,240,0.7)', fontSize: '14px', fontWeight: active === item.id ? 600 : 400 }}>{item.label}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Collapsible icon sidebar with tooltips

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 { 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: '

SidebarNav

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

'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