header rekated fixes
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,26 +1,34 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSidebar } from "../context/SidebarContext";
|
||||
import { usePageContext } from "../context/PageContext";
|
||||
import { ThemeToggleButton } from "../components/common/ThemeToggleButton";
|
||||
import NotificationDropdown from "../components/header/NotificationDropdown";
|
||||
import UserDropdown from "../components/header/UserDropdown";
|
||||
import { HeaderMetrics } from "../components/header/HeaderMetrics";
|
||||
import SearchModal from "../components/common/SearchModal";
|
||||
import SiteAndSectorSelector from "../components/common/SiteAndSectorSelector";
|
||||
import React from "react";
|
||||
|
||||
// Badge color mappings for light versions
|
||||
const badgeColors: Record<string, { bg: string; light: string }> = {
|
||||
blue: { bg: 'bg-blue-600 dark:bg-blue-500', light: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' },
|
||||
green: { bg: 'bg-green-600 dark:bg-green-500', light: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300' },
|
||||
purple: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
|
||||
orange: { bg: 'bg-orange-600 dark:bg-orange-500', light: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' },
|
||||
red: { bg: 'bg-red-600 dark:bg-red-500', light: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' },
|
||||
indigo: { bg: 'bg-indigo-600 dark:bg-indigo-500', light: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300' },
|
||||
yellow: { bg: 'bg-yellow-600 dark:bg-yellow-500', light: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300' },
|
||||
pink: { bg: 'bg-pink-600 dark:bg-pink-500', light: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-300' },
|
||||
emerald: { bg: 'bg-emerald-600 dark:bg-emerald-500', light: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300' },
|
||||
cyan: { bg: 'bg-cyan-600 dark:bg-cyan-500', light: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300' },
|
||||
amber: { bg: 'bg-amber-600 dark:bg-amber-500', light: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' },
|
||||
teal: { bg: 'bg-teal-600 dark:bg-teal-500', light: 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300' },
|
||||
};
|
||||
|
||||
const AppHeader: React.FC = () => {
|
||||
const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
|
||||
const { isMobileOpen, toggleSidebar, toggleMobileSidebar } = useSidebar();
|
||||
|
||||
const handleToggle = () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
toggleSidebar();
|
||||
} else {
|
||||
toggleMobileSidebar();
|
||||
}
|
||||
};
|
||||
const { pageInfo } = usePageContext();
|
||||
|
||||
const toggleApplicationMenu = () => {
|
||||
setApplicationMenuOpen(!isApplicationMenuOpen);
|
||||
@@ -44,23 +52,6 @@ const AppHeader: React.FC = () => {
|
||||
<header className="sticky top-0 flex w-full bg-white border-gray-200 z-99999 dark:border-gray-800 dark:bg-gray-900 lg:border-b">
|
||||
<div className="flex flex-col items-center justify-between grow lg:flex-row lg:px-6">
|
||||
<div className="flex items-center justify-between w-full gap-2 px-3 py-3 border-b border-gray-200 dark:border-gray-800 sm:gap-4 lg:justify-normal lg:border-b-0 lg:px-0 lg:py-4">
|
||||
{/* Sidebar Toggle */}
|
||||
<button
|
||||
className="items-center justify-center w-10 h-10 text-gray-500 border-gray-200 rounded-lg z-99999 dark:border-gray-800 lg:flex dark:text-gray-400 lg:h-11 lg:w-11 lg:border"
|
||||
onClick={handleToggle}
|
||||
aria-label="Toggle Sidebar"
|
||||
>
|
||||
{isMobileOpen ? (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z" fill="currentColor" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M0.583252 1C0.583252 0.585788 0.919038 0.25 1.33325 0.25H14.6666C15.0808 0.25 15.4166 0.585786 15.4166 1C15.4166 1.41421 15.0808 1.75 14.6666 1.75L1.33325 1.75C0.919038 1.75 0.583252 1.41422 0.583252 1ZM0.583252 11C0.583252 10.5858 0.919038 10.25 1.33325 10.25L14.6666 10.25C15.0808 10.25 15.4166 10.5858 15.4166 11C15.4166 11.4142 15.0808 11.75 14.6666 11.75L1.33325 11.75C0.919038 11.75 0.583252 11.4142 0.583252 11ZM1.33325 5.25C0.919038 5.25 0.583252 5.58579 0.583252 6C0.583252 6.41421 0.919038 6.75 1.33325 6.75L7.99992 6.75C8.41413 6.75 8.74992 6.41421 8.74992 6C8.74992 5.58579 8.41413 5.25 7.99992 5.25L1.33325 5.25Z" fill="currentColor" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Mobile Logo */}
|
||||
<Link to="/" className="lg:hidden">
|
||||
<img className="dark:hidden" src="./images/logo/logo.svg" alt="Logo" />
|
||||
@@ -77,8 +68,27 @@ const AppHeader: React.FC = () => {
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Page Title with Badge - Desktop */}
|
||||
{pageInfo && (
|
||||
<div className="hidden lg:flex items-center gap-3">
|
||||
{pageInfo.badge && (
|
||||
<div className={`flex items-center justify-center w-8 h-8 rounded-lg ${badgeColors[pageInfo.badge.color]?.bg || 'bg-gray-600'} flex-shrink-0`}>
|
||||
{pageInfo.badge.icon && typeof pageInfo.badge.icon === 'object' && 'type' in pageInfo.badge.icon
|
||||
? React.cloneElement(pageInfo.badge.icon as React.ReactElement, { className: 'text-white size-4' })
|
||||
: pageInfo.badge.icon}
|
||||
</div>
|
||||
)}
|
||||
<h1 className="text-lg font-semibold text-gray-800 dark:text-white">{pageInfo.title}</h1>
|
||||
{pageInfo.parent && pageInfo.badge && (
|
||||
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${badgeColors[pageInfo.badge.color]?.light || 'bg-gray-100 text-gray-700'}`}>
|
||||
{pageInfo.parent}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Site and Sector Selector - Desktop */}
|
||||
<div className="hidden lg:flex items-center gap-4 ml-4">
|
||||
<div className="hidden lg:flex items-center gap-4 ml-auto">
|
||||
<SiteAndSectorSelector />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,7 @@ type MenuSection = {
|
||||
};
|
||||
|
||||
const AppSidebar: React.FC = () => {
|
||||
const { isExpanded, isMobileOpen, isHovered, setIsHovered } = useSidebar();
|
||||
const { isExpanded, isMobileOpen, isHovered, setIsHovered, toggleSidebar } = useSidebar();
|
||||
const location = useLocation();
|
||||
const { user, isAuthenticated } = useAuthStore();
|
||||
const { isModuleEnabled, settings: moduleSettings } = useModuleStore();
|
||||
@@ -452,6 +452,22 @@ const AppSidebar: React.FC = () => {
|
||||
onMouseEnter={() => !isExpanded && setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{/* Collapse/Expand Toggle Button - Attached to border */}
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="hidden lg:flex absolute -right-3 top-20 w-6 h-6 items-center justify-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors z-50"
|
||||
aria-label={isExpanded ? "Collapse Sidebar" : "Expand Sidebar"}
|
||||
>
|
||||
<svg
|
||||
className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${isExpanded || isHovered ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="py-4 flex justify-center items-center">
|
||||
<Link to="/" className="flex justify-center items-center">
|
||||
{isExpanded || isHovered || isMobileOpen ? (
|
||||
|
||||
Reference in New Issue
Block a user