init
This commit is contained in:
Constantin
@@ -0,0 +1,149 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { X } from 'lucide-react';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
function Sidebar({ navigation, isOnline }) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile sidebar */}
|
||||
<div className={clsx(
|
||||
'fixed inset-0 z-50 lg:hidden',
|
||||
sidebarOpen ? 'block' : 'hidden'
|
||||
)}>
|
||||
<div className="fixed inset-0 bg-gray-900/80" onClick={() => setSidebarOpen(false)} />
|
||||
|
||||
<div className="fixed inset-y-0 left-0 z-50 w-72 bg-white">
|
||||
<div className="flex h-full flex-col gap-y-5 overflow-y-auto px-6 py-4">
|
||||
<div className="flex h-16 shrink-0 items-center">
|
||||
<h1 className="text-xl font-semibold text-gray-900">
|
||||
Personal Internet Cell
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex flex-1 flex-col">
|
||||
<ul role="list" className="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" className="-mx-2 space-y-1">
|
||||
{navigation.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
to={item.href}
|
||||
className={clsx(
|
||||
location.pathname === item.href
|
||||
? 'bg-primary-50 text-primary-600'
|
||||
: 'text-gray-700 hover:text-primary-600 hover:bg-primary-50',
|
||||
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
|
||||
)}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<item.icon
|
||||
className={clsx(
|
||||
location.pathname === item.href ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-600',
|
||||
'h-6 w-6 shrink-0'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop sidebar */}
|
||||
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
||||
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4">
|
||||
<div className="flex h-16 shrink-0 items-center">
|
||||
<h1 className="text-xl font-semibold text-gray-900">
|
||||
Personal Internet Cell
|
||||
</h1>
|
||||
</div>
|
||||
<nav className="flex flex-1 flex-col">
|
||||
<ul role="list" className="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" className="-mx-2 space-y-1">
|
||||
{navigation.map((item) => (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
to={item.href}
|
||||
className={clsx(
|
||||
location.pathname === item.href
|
||||
? 'bg-primary-50 text-primary-600'
|
||||
: 'text-gray-700 hover:text-primary-600 hover:bg-primary-50',
|
||||
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
|
||||
)}
|
||||
>
|
||||
<item.icon
|
||||
className={clsx(
|
||||
location.pathname === item.href ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-600',
|
||||
'h-6 w-6 shrink-0'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
<li className="mt-auto">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className={clsx(
|
||||
'h-2 w-2 rounded-full',
|
||||
isOnline ? 'bg-success-500' : 'bg-danger-500'
|
||||
)} />
|
||||
<span className="text-xs text-gray-500">
|
||||
{isOnline ? 'Connected' : 'Disconnected'}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="-m-2.5 p-2.5 text-gray-700 lg:hidden"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
<span className="sr-only">Open sidebar</span>
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="flex-1 text-sm font-semibold leading-6 text-gray-900">
|
||||
Personal Internet Cell
|
||||
</div>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className={clsx(
|
||||
'h-2 w-2 rounded-full',
|
||||
isOnline ? 'bg-success-500' : 'bg-danger-500'
|
||||
)} />
|
||||
<span className="text-xs text-gray-500">
|
||||
{isOnline ? 'Connected' : 'Disconnected'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
Reference in New Issue
Block a user