73 lines
4.3 KiB
TypeScript
73 lines
4.3 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { NavLink } from 'react-router-dom'
|
|
import { XMarkIcon } from '@heroicons/react/24/outline'
|
|
|
|
interface SidebarProps {
|
|
isOpen: boolean
|
|
onToggle: () => void
|
|
}
|
|
|
|
export default function Sidebar({ isOpen, onToggle }: SidebarProps) {
|
|
const [currentMenu, setCurrentMenu] = useState<string>('')
|
|
|
|
const toggleMenu = (value: string) => {
|
|
setCurrentMenu((oldValue) => (oldValue === value ? '' : value))
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isOpen && <div className="fixed inset-0 z-40 bg-black/60 lg:hidden" onClick={onToggle}></div>}
|
|
|
|
<nav role="navigation" aria-label="Menú lateral" className={`fixed top-0 bottom-0 z-50 h-full w-[260px] transition-all duration-300 ${isOpen ? 'left-0' : '-left-[260px]'} lg:left-0`}>
|
|
<div className="h-full bg-white">
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<div className="main-logo flex items-center shrink-0">
|
|
<span className="text-2xl font-semibold text-accent">AvanzaCast</span>
|
|
</div>
|
|
<button type="button" aria-label="Cerrar menú" className="collapse-icon p-2 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary" onClick={onToggle}><XMarkIcon className="w-5 h-5" aria-hidden /></button>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<ul className="space-y-2">
|
|
<li className="nav-item">
|
|
<NavLink to="/landing" className="w-full block text-left font-semibold focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Página pública</NavLink>
|
|
</li>
|
|
<hr className="my-2 border-t" />
|
|
<li className={`nav-item`}>
|
|
<NavLink to="/broadcasts" className={({isActive}) => `w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2 ${isActive ? 'font-medium active' : ''}`} end>Transmisiones</NavLink>
|
|
</li>
|
|
<h2 className="mt-4 mb-2 uppercase text-xs font-extrabold">Streaming</h2>
|
|
<li className={`nav-item`}>
|
|
<NavLink to="/studio" className={({isActive}) => `w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2 ${isActive ? 'font-medium active' : ''}`}>Estudio Virtual</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button className="w-full text-left rounded-md px-2 py-2" onClick={() => toggleMenu('streams')}>Transmisiones</button>
|
|
{currentMenu === 'streams' && (
|
|
<ul className="pl-4 mt-2 space-y-1 text-sm" role="menu" aria-label="Submenú Transmisiones">
|
|
<li role="none"><NavLink role="menuitem" to="/streams" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Todas</NavLink></li>
|
|
<li role="none"><NavLink role="menuitem" to="/streams/create" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Nueva Transmisión</NavLink></li>
|
|
<li role="none"><NavLink role="menuitem" to="/streams/scheduled" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Programadas</NavLink></li>
|
|
<li role="none"><NavLink role="menuitem" to="/streams/history" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary">Historial</NavLink></li>
|
|
</ul>
|
|
)}
|
|
</li>
|
|
|
|
<li className="nav-item mt-4">
|
|
<NavLink to="/analytics" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Analytics</NavLink>
|
|
</li>
|
|
|
|
<h2 className="mt-6 mb-2 uppercase text-xs font-extrabold">Configuración</h2>
|
|
<li className="nav-item">
|
|
<NavLink to="/platforms" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Plataformas</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink to="/settings" className="w-full block text-left focus:outline-none focus:ring-2 focus:ring-primary rounded-md px-2 py-2">Configuración</NavLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|