hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
|
|
import { useUiStore } from '../../stores/uiStore';
|
|
|
|
export default function Topbar() {
|
|
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
|
|
const darkMode = useUiStore((s) => s.darkMode);
|
|
const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
|
|
|
|
return (
|
|
<header className="h-14 bg-white dark:bg-gray-900 border-b border-slate-200 dark:border-gray-700/50 flex items-center justify-between px-4 lg:px-6 shrink-0 transition-colors duration-200">
|
|
{/* Left side (RTL: right side visually) */}
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="lg:hidden w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
|
>
|
|
<Bars3Icon className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex-1" />
|
|
|
|
{/* Right side actions */}
|
|
<div className="flex items-center gap-1">
|
|
{/* Dark mode toggle */}
|
|
<button
|
|
onClick={toggleDarkMode}
|
|
className="w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
|
title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
|
|
>
|
|
{darkMode
|
|
? <SunIcon className="w-5 h-5 text-amber-400" />
|
|
: <MoonIcon className="w-5 h-5" />}
|
|
</button>
|
|
|
|
{/* Notifications */}
|
|
<button className="relative w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
|
|
<BellIcon className="w-5 h-5" />
|
|
<span className="absolute top-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
|
|
</button>
|
|
|
|
{/* Divider */}
|
|
<div className="w-px h-6 bg-slate-200 dark:bg-gray-700 mx-1" />
|
|
|
|
{/* Avatar */}
|
|
<div className="flex items-center gap-2.5 cursor-pointer pl-1">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-sm font-bold shadow-sm">
|
|
A
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<p className="text-sm font-semibold text-slate-700 dark:text-slate-200 leading-none">Admin</p>
|
|
<p className="text-[11px] text-slate-400 dark:text-slate-500 leading-none mt-0.5">مدیر سیستم</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|