サイドバー・ドロワーナビゲーション

'use client';
import { MantineProvider, NavLink } from '@mantine/core';
import { useState } from 'react';
import '@mantine/core/styles.css';

const navItems = [
  { label: 'ダッシュボード', icon: '📊' },
  { label: 'ユーザー管理', icon: '👥' },
  { label: '設定', icon: '⚙️' },
];

export function MantineSidebarDemo() {
  const [active, setActive] = useState('ダッシュボード');
  return (
    <MantineProvider>
      <div style={{ display: 'flex', height: '100vh' }}>
        <nav style={{ width: 220, background: '#f8fafc', borderRight: '1px solid #e2e8f0', padding: 16 }}>
          {navItems.map((item) => (
            <NavLink
              key={item.label}
              label={item.label}
              leftSection={<span>{item.icon}</span>}
              active={active === item.label}
              onClick={() => setActive(item.label)}
            />
          ))}
        </nav>
        <main style={{ flex: 1, padding: 24 }}>メインコンテンツ</main>
      </div>
    </MantineProvider>
  );
}