import { Fragment, useState } from 'react' import { Dialog, Transition } from '@headlessui/react' import { Bars3Icon, CalendarIcon, ChartPieIcon, DocumentDuplicateIcon, FolderIcon, HomeIcon, UsersIcon, XMarkIcon, } from '@heroicons/react/24/outline' const navigation = [ { name: 'Dashboard', href: '#', icon: HomeIcon, current: true }, { name: 'Team', href: '#', icon: UsersIcon, current: false }, { name: 'Projects', href: '#', icon: FolderIcon, current: false }, { name: 'Calendar', href: '#', icon: CalendarIcon, current: false }, { name: 'Documents', href: '#', icon: DocumentDuplicateIcon, current: false }, { name: 'Reports', href: '#', icon: ChartPieIcon, current: false }, ] const teams = [ { id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false }, { id: 2, name: 'Tailwind Labs', href: '#', initial: 'T', current: false }, { id: 3, name: 'Workcation', href: '#', initial: 'W', current: false }, ] function classNames(...classes) { return classes.filter(Boolean).join(' ') } export default function Example() { const [sidebarOpen, setSidebarOpen] = useState(false) return ( <> {/* This example requires updating your template: ``` ``` */}
{/* Sidebar component, swap this element with another sidebar if you like */}
Your Company
{/* Static sidebar for desktop */}
{/* Sidebar component, swap this element with another sidebar if you like */}
Your Company
Dashboard
Your profile
{/* Your content */}
) }