diff --git a/src/components/admin/ui-kit/navigation-demo.tsx b/src/components/admin/ui-kit/navigation-demo.tsx index 9fe1416..a43e4af 100644 --- a/src/components/admin/ui-kit/navigation-demo.tsx +++ b/src/components/admin/ui-kit/navigation-demo.tsx @@ -1,16 +1,17 @@ -"use client" +"use client"; -import { useState } from 'react' -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Badge } from '@/components/ui/badge' -import { Button } from '@/components/ui/button' -import { Avatar, AvatarFallback } from '@/components/ui/avatar' -import { Progress } from '@/components/ui/progress' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { - Home, - Users, - MessageCircle, +import { useState } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { Progress } from "@/components/ui/progress"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Switch } from "@/components/ui/switch"; +import { + Home, + Users, + MessageCircle, Settings, Building, Package, @@ -18,6 +19,8 @@ import { Store, ChevronRight, ChevronLeft, + ChevronDown, + ChevronUp, Menu, X, Search, @@ -25,15 +28,632 @@ import { ArrowLeft, ArrowRight, MoreHorizontal, - Check -} from 'lucide-react' + Check, + Shield, + BarChart3, + Wallet, + FileText, + Calendar, + HelpCircle, + LogOut, + Sun, + Moon, + Zap, + Globe, + Heart, + Star, + Filter, + Download, + Upload, + Eye, + EyeOff, + PanelLeftClose, + PanelLeftOpen, + Layers, + Database, + Cloud, + Smartphone, + Monitor, + Tablet, + Clock +} from "lucide-react"; export function NavigationDemo() { - const [activeTab, setActiveTab] = useState('nav') - const [currentStep, setCurrentStep] = useState(2) + const [activeTab, setActiveTab] = useState("nav"); + const [currentStep, setCurrentStep] = useState(2); + const [sidebarCollapsed, setSidebarCollapsed] = useState(false); + const [expandedMenus, setExpandedMenus] = useState(["analytics"]); + const [darkMode, setDarkMode] = useState(true); + const [notifications, setNotifications] = useState(true); + + const toggleMenu = (menuId: string) => { + setExpandedMenus((prev) => + prev.includes(menuId) + ? prev.filter((id) => id !== menuId) + : [...prev, menuId] + ); + }; return (
+ {/* Современные сайдбары */} + + + Современные сайдбары + + + {/* Premium Sidebar with Profile */} +
+

+ Премиум сайдбар с профилем +

+
+ {/* Profile Section */} +
+
+ + + SF + + +
+

+ Александр Смирнов +

+

+ alex@sferav.com +

+
+ +
+
+
+
+ Онлайн +
+ + Pro + +
+
+ + {/* Navigation */} + + + {/* Quick Actions */} +
+
+ + Быстрые действия + +
+
+ + +
+
+ + {/* Footer */} +
+ + +
+
+
+ + {/* Collapsible Multi-level Sidebar */} +
+

+ Многоуровневый сайдбар с коллапсом +

+
+ {/* Header with Toggle */} +
+ {!sidebarCollapsed && ( +
+
+ +
+ SferaV +
+ )} + +
+ + {/* Navigation */} + + + {/* Settings Section */} + {!sidebarCollapsed && ( +
+
+ + Настройки + +
+
+
+
+ + + Темная тема + +
+ +
+
+
+ + + Уведомления + +
+ +
+
+
+ )} +
+
+ + {/* Dashboard-style Sidebar */} +
+

+ Дашборд сайдбар +

+
+ {/* Stats Overview */} +
+

Обзор

+
+
+
+ 1,234 +
+
Заказы
+
+
+
+ ₽89K +
+
Доход
+
+
+
+ + {/* Quick Navigation */} +
+

+ Быстрая навигация +

+
+ + + + + +
+
+ + {/* Recent Activity */} +
+

+ Последняя активность +

+
+
+
+
+

Новый заказ #1234

+

2 минуты назад

+
+
+
+
+
+

+ Сообщение от клиента +

+

5 минут назад

+
+
+
+
+
+

Обновление товара

+

10 минут назад

+
+
+
+
+
+
+ + {/* Adaptive Sidebar Showcase */} +
+

+ Адаптивные варианты +

+
+ {/* Desktop */} +
+
+ + Desktop +
+
+ + + +
+
+ + {/* Tablet */} +
+
+ + Tablet +
+
+ + + +
+
+ + {/* Mobile */} +
+
+ + Mobile +
+
+
+ + + +
+
+
+
+
+ + + {/* Навигационное меню */} @@ -42,7 +662,9 @@ export function NavigationDemo() { {/* Horizontal Navigation */}
-

Горизонтальная навигация

+

+ Горизонтальная навигация +

@@ -65,73 +695,20 @@ export function NavigationDemo() { - SF + + SF +
- {/* Vertical Sidebar Navigation */} -
-

Вертикальная навигация (Sidebar)

-
- {/* Compact Sidebar */} -
-
Mini
- - - - - -
- - {/* Full Sidebar */} -
-
Full Sidebar
-
- - - - - - -
-
-
-
- {/* Mobile Navigation */}
-

Мобильная навигация

+

+ Мобильная навигация +

{/* Mobile Header */}
@@ -152,19 +729,31 @@ export function NavigationDemo() { Главная - - - - @@ -175,80 +764,146 @@ export function NavigationDemo() { - {/* Табы */} + {/* Табы и вкладки */} Табы и вкладки - {/* Basic Tabs */} + {/* Enhanced Tabs */}
-

Базовые табы

+

Улучшенные табы

- + + Навигация + Формы + Данные + Настройки - -
-

Содержимое вкладки "Навигация"

+ +
+
+
+ +
+
+
Навигация
+

Компоненты для навигации по приложению

+
+
+
+
+ Сайдбары + Готово +
+
+ Меню + В работе +
+
- -
-

Содержимое вкладки "Формы"

+ +
+
+
+ +
+
+
Формы
+

Элементы для ввода и обработки данных

+
+
- -
-

Содержимое вкладки "Данные"

+ +
+
+
+ +
+
+
Данные
+

Компоненты для отображения данных

+
+
- -
-

Содержимое вкладки "Настройки"

+ +
+
+
+ +
+
+
Настройки
+

Элементы управления настройками

+
+
- {/* Icon Tabs */} + {/* Pill Tabs */}
-

Табы с иконками

-
- - - +
+
+ + {/* Segmented Control */} +
+

Сегментированный контрол

+
+ + +
@@ -256,24 +911,49 @@ export function NavigationDemo() { {/* Vertical Tabs */}

Вертикальные табы

-
-
- - - +
-
-
Главная панель
-

Содержимое выбранной вкладки отображается здесь

+
+
+
+ +
+
+
Главная панель
+

Обзор системы и быстрый доступ к функциям

+
+
+
+
+
2,847
+
Всего пользователей
+
+
+
156
+
Активных сессий
+
+
@@ -283,23 +963,36 @@ export function NavigationDemo() { {/* Breadcrumbs */} - Breadcrumbs (Хлебные крошки) + + Breadcrumbs (Хлебные крошки) + {/* Standard Breadcrumbs */}
-

Стандартные breadcrumbs

+

+ Стандартные breadcrumbs +