Разработка интерфейса фронт
This commit is contained in:
iv_vuytsik
54
frontend/components/ui/ExportMenu.tsx
Normal file
54
frontend/components/ui/ExportMenu.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface ExportMenuProps {
|
||||
onExport: (format: 'csv' | 'pdf') => void
|
||||
}
|
||||
|
||||
const ExportMenu: React.FC<ExportMenuProps> = ({ onExport }) => {
|
||||
const [selectedFormat, setSelectedFormat] = useState<'csv' | 'pdf'>('csv')
|
||||
|
||||
const handleExport = () => {
|
||||
onExport(selectedFormat)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 bg-[#161824] rounded-lg p-3 border border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="format"
|
||||
value="csv"
|
||||
checked={selectedFormat === 'csv'}
|
||||
onChange={(e) => setSelectedFormat(e.target.value as 'csv' | 'pdf')}
|
||||
className="w-3 h-3 text-blue-600"
|
||||
/>
|
||||
<span className="text-gray-300 text-sm">CSV</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="format"
|
||||
value="pdf"
|
||||
checked={selectedFormat === 'pdf'}
|
||||
onChange={(e) => setSelectedFormat(e.target.value as 'csv' | 'pdf')}
|
||||
className="w-3 h-3 text-blue-600"
|
||||
/>
|
||||
<span className="text-gray-300 text-sm">PDF</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors"
|
||||
>
|
||||
Экспорт
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExportMenu
|
||||
72
frontend/components/ui/LoadingSpinner.tsx
Normal file
72
frontend/components/ui/LoadingSpinner.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
progress?: number // 0-100
|
||||
size?: number // diameter in pixels
|
||||
strokeWidth?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||||
progress = 0,
|
||||
size = 120,
|
||||
strokeWidth = 8,
|
||||
className = ''
|
||||
}) => {
|
||||
const radius = (size - strokeWidth) / 2
|
||||
const circumference = radius * 2 * Math.PI
|
||||
const strokeDasharray = circumference
|
||||
const strokeDashoffset = circumference - (progress / 100) * circumference
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col items-center justify-center ${className}`}>
|
||||
<div className="relative" style={{ width: size, height: size }}>
|
||||
{/* Background circle */}
|
||||
<svg
|
||||
className="transform -rotate-90"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="rgba(255, 255, 255, 0.1)"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="transparent"
|
||||
/>
|
||||
{/* Progress circle */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="#389ee8"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="transparent"
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-300 ease-out"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Percentage text */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-white text-xl font-semibold">
|
||||
{Math.round(progress)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading text */}
|
||||
<div className="mt-4 text-white text-base font-medium">
|
||||
Loading Model...
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoadingSpinner
|
||||
474
frontend/components/ui/Sidebar.tsx
Normal file
474
frontend/components/ui/Sidebar.tsx
Normal file
@@ -0,0 +1,474 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter, usePathname } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import useUIStore from '../../app/store/uiStore'
|
||||
import useNavigationStore from '../../app/store/navigationStore'
|
||||
import { useNavigationService } from '@/services/navigationService'
|
||||
|
||||
interface NavigationItem {
|
||||
id: number
|
||||
label: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
interface SidebarProps {
|
||||
navigationItems?: NavigationItem[]
|
||||
logoSrc?: string
|
||||
userInfo?: {
|
||||
name: string
|
||||
role: string
|
||||
avatar?: string
|
||||
}
|
||||
activeItem?: number | null
|
||||
onCustomItemClick?: (itemId: number) => boolean
|
||||
}
|
||||
|
||||
// Иконки-заглушки
|
||||
const BookOpen = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L3 7v10c0 5.55 3.84 10 9 10s9-4.45 9-10V7l-9-5z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const Bot = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const SquareTerminal = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const CircleDot = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const BellDot = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9v7l-2 2v1h16v-1l-2-2V9c0-3.87-3.13-7-7-7z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const History = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const Settings2 = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const Monitor = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h3l-1 1v1h12v-1l-1-1h3c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 13H4V5h16v11z" />
|
||||
<circle cx="8" cy="10" r="2" />
|
||||
<circle cx="16" cy="10" r="2" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const Building = ({ className }: { className?: string }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 10 9 10s9-4.45 9-10V7l-9-5zM12 4.14L18 7.69V17c0 3.31-2.69 6-6 6s-6-2.69-6-6V7.69L12 4.14z" />
|
||||
<rect x="8" y="10" width="2" height="2" />
|
||||
<rect x="14" y="10" width="2" height="2" />
|
||||
<rect x="8" y="14" width="2" height="2" />
|
||||
<rect x="14" y="14" width="2" height="2" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
// основные routes
|
||||
const mainNavigationItems: NavigationItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: BookOpen,
|
||||
label: 'Дашборд'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: Bot,
|
||||
label: 'Навигация по зданию'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
icon: History,
|
||||
label: 'История тревог'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
icon: Settings2,
|
||||
label: 'Отчеты'
|
||||
}
|
||||
]
|
||||
|
||||
// суб-меню под "Навигация по зданию"
|
||||
const navigationSubItems: NavigationItem[] = [
|
||||
{
|
||||
id: 3,
|
||||
icon: Monitor,
|
||||
label: 'Зоны Мониторинга'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: Building,
|
||||
label: 'Навигация по этажам'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: BellDot,
|
||||
label: 'Уведомления'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: CircleDot,
|
||||
label: 'Сенсоры'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
icon: SquareTerminal,
|
||||
label: 'Список датчиков'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const Sidebar: React.FC<SidebarProps> = ({
|
||||
logoSrc,
|
||||
userInfo = {
|
||||
name: 'Александр',
|
||||
role: 'Администратор'
|
||||
},
|
||||
activeItem: propActiveItem,
|
||||
onCustomItemClick
|
||||
}) => {
|
||||
const navigationService = useNavigationService()
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const [internalActiveItem, setInternalActiveItem] = useState<number | null>(null)
|
||||
const [isHydrated, setIsHydrated] = useState(false)
|
||||
const [manuallyToggled, setManuallyToggled] = useState(false)
|
||||
const activeItem = propActiveItem !== undefined ? propActiveItem : internalActiveItem
|
||||
const {
|
||||
isSidebarCollapsed: isCollapsed,
|
||||
toggleSidebar,
|
||||
isNavigationSubMenuExpanded: showNavigationSubItems,
|
||||
setNavigationSubMenuExpanded: setShowNavigationSubItems,
|
||||
toggleNavigationSubMenu
|
||||
} = useUIStore()
|
||||
|
||||
const {
|
||||
openMonitoring,
|
||||
openFloorNavigation,
|
||||
openNotifications,
|
||||
closeMonitoring,
|
||||
closeFloorNavigation,
|
||||
closeNotifications,
|
||||
showMonitoring,
|
||||
showFloorNavigation,
|
||||
showNotifications
|
||||
} = useNavigationStore()
|
||||
|
||||
useEffect(() => {
|
||||
setIsHydrated(true)
|
||||
}, [])
|
||||
|
||||
// Чек если суб-меню активны
|
||||
const isNavigationSubItemActive = activeItem && [3, 4, 5, 6, 7].includes(activeItem)
|
||||
const shouldShowNavigationAsActive = activeItem === 2 || isNavigationSubItemActive
|
||||
|
||||
// Авто-расткрытие меню, если суб-меню стало активным (только если не было ручного переключения)
|
||||
useEffect(() => {
|
||||
if (isNavigationSubItemActive && !showNavigationSubItems && !manuallyToggled) {
|
||||
setShowNavigationSubItems(true)
|
||||
}
|
||||
}, [isNavigationSubItemActive, showNavigationSubItems, manuallyToggled, setShowNavigationSubItems])
|
||||
|
||||
const handleItemClick = (itemId: number) => {
|
||||
let handled = false
|
||||
|
||||
// Handle submenu items directly with navigation store
|
||||
switch (itemId) {
|
||||
case 2: // Navigation - only navigate to page, don't open submenus
|
||||
if (pathname !== '/navigation') {
|
||||
router.push('/navigation')
|
||||
}
|
||||
handled = true
|
||||
break
|
||||
case 3: // Monitoring
|
||||
if (pathname !== '/navigation') {
|
||||
// Navigate to navigation page first, then open monitoring
|
||||
router.push('/navigation')
|
||||
setTimeout(() => openMonitoring(), 100)
|
||||
} else if (showMonitoring) {
|
||||
// Close if already open
|
||||
closeMonitoring()
|
||||
} else {
|
||||
openMonitoring()
|
||||
}
|
||||
handled = true
|
||||
break
|
||||
case 4: // Floor Navigation
|
||||
if (pathname !== '/navigation') {
|
||||
// Navigate to navigation page first, then open floor navigation
|
||||
router.push('/navigation')
|
||||
setTimeout(() => openFloorNavigation(), 100)
|
||||
} else if (showFloorNavigation) {
|
||||
// Close if already open
|
||||
closeFloorNavigation()
|
||||
} else {
|
||||
openFloorNavigation()
|
||||
}
|
||||
handled = true
|
||||
break
|
||||
case 5: // Notifications
|
||||
if (pathname !== '/navigation') {
|
||||
// Navigate to navigation page first, then open notifications
|
||||
router.push('/navigation')
|
||||
setTimeout(() => openNotifications(), 100)
|
||||
} else if (showNotifications) {
|
||||
// Close if already open
|
||||
closeNotifications()
|
||||
} else {
|
||||
openNotifications()
|
||||
}
|
||||
handled = true
|
||||
break
|
||||
default:
|
||||
// For other items, use navigation service
|
||||
if (navigationService) {
|
||||
handled = navigationService.handleSidebarItemClick(itemId, pathname)
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
if (handled) {
|
||||
// Update internal active item state
|
||||
if (propActiveItem === undefined) {
|
||||
setInternalActiveItem(itemId)
|
||||
}
|
||||
|
||||
// Call custom handler if provided (for additional logic)
|
||||
if (onCustomItemClick) {
|
||||
onCustomItemClick(itemId)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`flex flex-col items-start gap-6 relative bg-[#161824] transition-all duration-300 h-screen ${
|
||||
isCollapsed ? 'w-16' : 'w-64'
|
||||
}`}
|
||||
role="navigation"
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
<header className="flex items-center gap-2 pt-2 pb-2 px-4 relative self-stretch w-full flex-[0_0_auto] bg-[#161824]">
|
||||
{!isCollapsed && (
|
||||
<div className="relative w-[169.83px] h-[34px]">
|
||||
{logoSrc && (
|
||||
<Image
|
||||
className="absolute w-12 h-[33px] top-0 left-0"
|
||||
alt="AerBIM Monitor Logo"
|
||||
src={logoSrc}
|
||||
width={48}
|
||||
height={33}
|
||||
/>
|
||||
)}
|
||||
<div className="absolute w-[99px] top-[21px] left-[50px] [font-family:'Open_Sans-Regular',Helvetica] font-normal text-[#389ee8] text-[13px] tracking-[0] leading-[13px] whitespace-nowrap">
|
||||
AMS HT Viewer
|
||||
</div>
|
||||
<div className="absolute top-px left-[50px] [font-family:'Open_Sans-SemiBold',Helvetica] font-semibold text-[#f1f6fa] text-[15px] tracking-[0] leading-[15px] whitespace-nowrap">
|
||||
AerBIM Monitor
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<nav className="flex flex-col items-end gap-2 relative flex-1 self-stretch w-full grow">
|
||||
<div className="flex flex-col items-end gap-2 px-4 py-2 relative self-stretch w-full flex-[0_0_auto]">
|
||||
<ul className="flex flex-col items-start gap-3 relative self-stretch w-full flex-[0_0_auto]" role="list">
|
||||
{mainNavigationItems.map((item) => {
|
||||
const IconComponent = item.icon
|
||||
const isActive = item.id === 2 ? shouldShowNavigationAsActive : activeItem === item.id
|
||||
|
||||
return (
|
||||
<li key={item.id} className="flex-col flex items-center relative self-stretch w-full" role="listitem">
|
||||
<button
|
||||
className={`gap-2 pt-2 pr-2 pb-2 pl-2 rounded-md flex h-9 items-center relative self-stretch w-full transition-colors duration-200 hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
|
||||
isActive ? 'bg-gray-700' : ''
|
||||
}`}
|
||||
onClick={() => handleItemClick(item.id)}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
type="button"
|
||||
>
|
||||
<IconComponent
|
||||
className="!relative !w-5 !h-5 text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!isCollapsed && (
|
||||
<span className="flex-1 [font-family:'Inter-Regular',Helvetica] font-normal text-white text-sm leading-[14px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical] text-left">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
{item.id === 2 && !isCollapsed && (
|
||||
<div
|
||||
className="p-1 hover:bg-gray-600 rounded transition-colors duration-200 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setManuallyToggled(true)
|
||||
// Close all active submenus when collapsing navigation menu
|
||||
if (showNavigationSubItems || isNavigationSubItemActive) {
|
||||
closeMonitoring()
|
||||
closeFloorNavigation()
|
||||
closeNotifications()
|
||||
}
|
||||
toggleNavigationSubMenu()
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setManuallyToggled(true)
|
||||
// Close all active submenus when collapsing navigation menu
|
||||
if (showNavigationSubItems || isNavigationSubItemActive) {
|
||||
closeMonitoring()
|
||||
closeFloorNavigation()
|
||||
closeNotifications()
|
||||
}
|
||||
toggleNavigationSubMenu()
|
||||
}
|
||||
}}
|
||||
aria-label={isHydrated ? (showNavigationSubItems || isNavigationSubItemActive ? 'Collapse navigation menu' : 'Expand navigation menu') : 'Toggle navigation menu'}
|
||||
>
|
||||
<svg
|
||||
className={`!relative !w-4 !h-4 text-white transition-transform duration-200 ${
|
||||
isHydrated && (showNavigationSubItems || isNavigationSubItemActive) ? 'rotate-90' : ''
|
||||
}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Суб-меню */}
|
||||
{item.id === 2 && !isCollapsed && (showNavigationSubItems || isNavigationSubItemActive) && (
|
||||
<ul className="flex flex-col items-start gap-1 mt-1 ml-6 relative w-full" role="list">
|
||||
{navigationSubItems.map((subItem) => {
|
||||
const SubIconComponent = subItem.icon
|
||||
const isSubActive = activeItem === subItem.id
|
||||
|
||||
return (
|
||||
<li key={subItem.id} className="flex-col flex h-8 items-center relative self-stretch w-full" role="listitem">
|
||||
<button
|
||||
className={`gap-2 pt-1.5 pr-2 pb-1.5 pl-2 rounded-md flex h-8 items-center relative self-stretch w-full transition-colors duration-200 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
|
||||
isSubActive ? 'bg-gray-600' : ''
|
||||
}`}
|
||||
onClick={() => handleItemClick(subItem.id)}
|
||||
aria-current={isSubActive ? 'page' : undefined}
|
||||
type="button"
|
||||
>
|
||||
<SubIconComponent
|
||||
className="!relative !w-4 !h-4 text-gray-300"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="flex-1 [font-family:'Inter-Regular',Helvetica] font-normal text-gray-300 text-sm leading-[14px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical] text-left">
|
||||
{subItem.label}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<button
|
||||
className="!relative !w-6 !h-6 p-1 rounded hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
|
||||
onClick={() => {
|
||||
// If navigation submenu is open, first collapse it (which closes all submenus)
|
||||
if (showNavigationSubItems) {
|
||||
setShowNavigationSubItems(false)
|
||||
setManuallyToggled(true)
|
||||
// Close all active submenus when collapsing navigation menu
|
||||
closeMonitoring()
|
||||
closeFloorNavigation()
|
||||
closeNotifications()
|
||||
}
|
||||
// Always collapse the sidebar
|
||||
toggleSidebar()
|
||||
}}
|
||||
aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
type="button"
|
||||
>
|
||||
<svg className={`!relative !w-4 !h-4 text-white transition-transform duration-200 ${isCollapsed ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{!isCollapsed && (
|
||||
<footer className="flex w-64 items-center gap-2 pt-2 pr-2 pb-2 pl-2 mt-auto bg-[#161824]">
|
||||
<div className="inline-flex flex-[0_0_auto] items-center gap-2 relative rounded-md">
|
||||
<div className="inline-flex items-center relative flex-[0_0_auto]">
|
||||
<div
|
||||
className="relative w-8 h-8 rounded-lg bg-white"
|
||||
role="img"
|
||||
aria-label="User avatar"
|
||||
>
|
||||
{userInfo.avatar && (
|
||||
<Image
|
||||
src={userInfo.avatar}
|
||||
alt="User avatar"
|
||||
className="w-full h-full rounded-lg object-cover"
|
||||
fill
|
||||
sizes="32px"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex p-2 flex-1 grow items-center gap-2 relative rounded-md">
|
||||
<div className="flex flex-col items-start justify-center gap-0.5 relative flex-1 grow">
|
||||
<div className="self-stretch mt-[-1.00px] [font-family:'Inter-SemiBold',Helvetica] font-semibold text-white text-sm leading-[14px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical]">
|
||||
{userInfo.name}
|
||||
</div>
|
||||
<div className="self-stretch [font-family:'Inter-Regular',Helvetica] font-normal text-[#71717a] text-[10px] leading-[10px] relative tracking-[0] overflow-hidden text-ellipsis [display:-webkit-box] [-webkit-line-clamp:1] [-webkit-box-orient:vertical]">
|
||||
{userInfo.role}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="relative w-4 h-4 aspect-[1] p-1 rounded hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200"
|
||||
aria-label="User menu"
|
||||
type="button"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</footer>
|
||||
)}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
Reference in New Issue
Block a user