154 lines
7.7 KiB
TypeScript
154 lines
7.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import ClientSelectionSection from './ClientSelectionSection';
|
|
import UserProfileSection from './UserProfileSection';
|
|
|
|
interface SidebarProps {
|
|
isSidebarOpen: boolean;
|
|
toggleSidebar: () => void;
|
|
}
|
|
|
|
export default function Sidebar({ isSidebarOpen, toggleSidebar }: SidebarProps) {
|
|
const [openSidebarSubmenus, setOpenSidebarSubmenus] = useState<Record<string, boolean>>({});
|
|
|
|
// Sample user data for demonstration
|
|
const sampleUserData = {
|
|
email: 'user@example.com',
|
|
person: {
|
|
firstname: 'John',
|
|
surname: 'Doe'
|
|
}
|
|
};
|
|
|
|
const sampleOnlineData = {
|
|
userType: 'admin'
|
|
};
|
|
|
|
// Sample client selection data
|
|
const sampleClientData = {
|
|
selectionList: [
|
|
{
|
|
uu_id: '1',
|
|
name: 'Acme Corp',
|
|
description: 'Technology solutions'
|
|
},
|
|
{
|
|
uu_id: '2',
|
|
name: 'Globex',
|
|
description: 'Manufacturing'
|
|
},
|
|
{
|
|
uu_id: '3',
|
|
name: 'Initech',
|
|
description: 'Software development'
|
|
}
|
|
]
|
|
};
|
|
|
|
// Toggle submenu
|
|
const toggleSubmenu = (itemName: string) => {
|
|
setOpenSidebarSubmenus(prev => ({ ...prev, [itemName]: !prev[itemName] }));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className={`fixed left-0 top-0 w-72 h-full bg-[#f8f4f3] z-50 sidebar-menu transition-transform ${isSidebarOpen ? '' : '-translate-x-full'} md:translate-x-0 flex flex-col`}>
|
|
{/* Fixed header section */}
|
|
<div className="p-4 border-b border-b-gray-800 flex-shrink-0">
|
|
<UserProfileSection userData={sampleUserData} onlineData={sampleOnlineData} />
|
|
</div>
|
|
|
|
{/* Scrollable content section */}
|
|
<div className="flex-grow overflow-y-auto custom-scrollbar p-4">
|
|
{/* Client selection menu */}
|
|
<ClientSelectionSection
|
|
selectionData={sampleClientData}
|
|
initialSelectedClient={sampleClientData.selectionList[0]}
|
|
onClientSelect={(client) => console.log('Selected client:', client)}
|
|
/>
|
|
|
|
{/* Add more scrollable content here if needed */}
|
|
<ul className="mt-4">
|
|
<span className="text-gray-400 font-bold">ADMIN</span>
|
|
<li className="mb-1 group active">
|
|
<a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
|
|
<i className="ri-home-2-line mr-3 text-lg"></i>
|
|
<span className="text-sm">Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li className={`mb-1 group ${openSidebarSubmenus['users'] ? 'selected' : ''}`}>
|
|
<a href="#" onClick={(e) => { e.preventDefault(); toggleSubmenu('users'); }} className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle">
|
|
<i className='bx bx-user mr-3 text-lg'></i>
|
|
<span className="text-sm">Users</span>
|
|
<i className={`ri-arrow-right-s-line ml-auto ${openSidebarSubmenus['users'] ? 'rotate-90' : ''}`}></i>
|
|
</a>
|
|
<ul className={`pl-7 mt-2 ${openSidebarSubmenus['users'] ? 'block' : 'hidden'}`}>
|
|
<li className="mb-4">
|
|
<a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">All</a>
|
|
</li>
|
|
<li className="mb-4">
|
|
<a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">Roles</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="mb-1 group">
|
|
<a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
|
|
<i className='bx bx-list-ul mr-3 text-lg'></i>
|
|
<span className="text-sm">Activities</span>
|
|
</a>
|
|
</li>
|
|
<span className="text-gray-400 font-bold">BLOG</span>
|
|
<li className={`mb-1 group ${openSidebarSubmenus['post'] ? 'selected' : ''}`}>
|
|
<a href="#" onClick={(e) => { e.preventDefault(); toggleSubmenu('post'); }} className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle">
|
|
<i className='bx bxl-blogger mr-3 text-lg'></i>
|
|
<span className="text-sm">Post</span>
|
|
<i className={`ri-arrow-right-s-line ml-auto ${openSidebarSubmenus['post'] ? 'rotate-90' : ''}`}></i>
|
|
</a>
|
|
<ul className={`pl-7 mt-2 ${openSidebarSubmenus['post'] ? 'block' : 'hidden'}`}>
|
|
<li className="mb-4">
|
|
<a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">All</a>
|
|
</li>
|
|
<li className="mb-4">
|
|
<a href="#" className="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">Categories</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li className="mb-1 group">
|
|
<a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
|
|
<i className='bx bx-archive mr-3 text-lg'></i>
|
|
<span className="text-sm">Archive</span>
|
|
</a>
|
|
</li>
|
|
<span className="text-gray-400 font-bold">PERSONAL</span>
|
|
<li className="mb-1 group">
|
|
<a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
|
|
<i className='bx bx-bell mr-3 text-lg'></i>
|
|
<span className="text-sm">Notifications</span>
|
|
<span className="md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-red-600 bg-red-200 rounded-full">5</span>
|
|
</a>
|
|
</li>
|
|
<li className="mb-1 group">
|
|
<a href="#" className="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
|
|
<i className='bx bx-envelope mr-3 text-lg'></i>
|
|
<span className="text-sm">Messages</span>
|
|
<span className="md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-green-600 bg-green-200 rounded-full">2 New</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{/* Overlay for mobile */}
|
|
{isSidebarOpen && (
|
|
<div className="fixed top-0 left-0 w-full h-full bg-black/50 z-40 md:hidden sidebar-overlay" onClick={toggleSidebar}></div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
|