react/components/Sidebar.tsx - claude-react - ivaninvv/dashboard

react/components/Sidebar.tsx
141 строка5 KB
VladimirIvanin
react
30 ноя 2025, 03:20
30 ноя 2025, 03:20030fe15
'use client'

import { Globe, Type, Table, FileText, User, Smile, Settings } from 'lucide-react'
import Image from 'next/image'

type NavItem = {
  label: string
  icon: React.ReactNode
  href: string
  active?: boolean
}

const Sidebar = () => {
  const homeItems: NavItem[] = [
    {
      label: 'Dashboard',
      icon: <Globe className="w-5 h-5" />,
      href: '/dashboard',
      active: true,
    },
  ]

  const utilityItems: NavItem[] = [
    {
      label: 'Typography',
      icon: <Type className="w-5 h-5" />,
      href: '/typography',
    },
    {
      label: 'Order Table',
      icon: <Table className="w-5 h-5" />,
      href: '/order-table',
    },
    {
      label: 'Form',
      icon: <FileText className="w-5 h-5" />,
      href: '/form',
    },
  ]

  const extraItems: NavItem[] = [
    {
      label: 'Profile',
      icon: <User className="w-5 h-5" />,
      href: '/profile',
    },
    {
      label: 'Icons',
      icon: <Smile className="w-5 h-5" />,
      href: '/icons',
    },
    {
      label: 'Sample Page',
      icon: <Globe className="w-5 h-5" />,
      href: '/sample',
    },
  ]

  const handleItemClick = (href: string) => {
    console.log(`Navigate to: ${href}`)
  }

  const handleItemKeyDown = (e: React.KeyboardEvent, href: string) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handleItemClick(href)
    }
  }

  const renderNavItem = (item: NavItem) => (
    <div
      key={item.label}
      onClick={() => handleItemClick(item.href)}
      onKeyDown={(e) => handleItemKeyDown(e, item.href)}
      tabIndex={0}
      role="button"
      aria-label={item.label}
      className={`
        flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all text-sm
        ${item.active 
          ? 'bg-primary text-white' 
          : 'text-gray-700 hover:bg-gray-100'
        }
      `}
    >
      {item.icon}
      <span className="font-normal">{item.label}</span>
    </div>
  )

  return (
    <aside className="w-60 h-screen bg-white border-r border-gray-200 flex flex-col">
      <div className="px-4 py-5 flex items-center gap-2">
        <div className="relative w-8 h-8">
          <svg width="32" height="32" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M32.5 16.1436C32.5 7.307 25.3366 0.143555 16.5 0.143555C7.66344 0.143555 0.5 7.307 0.5 16.1436C0.5 24.9801 7.66344 32.1436 16.5 32.1436C25.3366 32.1436 32.5 24.9801 32.5 16.1436Z" fill="#184FEB"/>
            <path d="M7.93593 16.543C8.42784 16.454 8.93451 16.4075 9.45203 16.4075C14.1312 16.4075 17.9244 20.2087 17.9244 24.8977C17.9244 25.0281 17.9215 25.1578 17.9157 25.2867C22.5692 24.8596 26.2139 20.9379 26.2139 16.1632C26.2139 11.103 22.1205 7.00098 17.0711 7.00098C12.0216 7.00098 7.92822 11.103 7.92822 16.1632C7.92822 16.2904 7.93081 16.417 7.93593 16.543Z" fill="#3ED9EB"/>
          </svg>
        </div>
        <h1 className="text-xl font-bold text-gray-900">NextKit</h1>
        <button className="ml-auto p-1 hover:bg-gray-100 rounded" aria-label="Settings">
          <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>

      <nav className="flex-1 px-3 py-4 space-y-6 overflow-y-auto">
        <div>
          <h2 className="px-3 mb-2 text-xs font-bold text-gray-500 uppercase tracking-wider">
            HOME
          </h2>
          <div className="space-y-1">
            {homeItems.map(renderNavItem)}
          </div>
        </div>

        <div>
          <h2 className="px-3 mb-2 text-xs font-bold text-gray-500 uppercase tracking-wider">
            UTILITIES
          </h2>
          <div className="space-y-1">
            {utilityItems.map(renderNavItem)}
          </div>
        </div>

        <div>
          <h2 className="px-3 mb-2 text-xs font-bold text-gray-500 uppercase tracking-wider">
            EXTRA
          </h2>
          <div className="space-y-1">
            {extraItems.map(renderNavItem)}
          </div>
        </div>
      </nav>
    </aside>
  )
}

export default Sidebar