import React, { useEffect, useState } from 'react' import Head from 'next/head' import { Transition } from '@headlessui/react' export default function App() { const [mobileOpen, setMobileOpen] = useState(false) useEffect(() => { function handleEscape(event) { if (!mobileOpen) return if (event.key === 'Escape') { setMobileOpen(false) } } document.addEventListener('keyup', handleEscape) return () => document.removeEventListener('keyup', handleEscape) }, [mobileOpen]) return ( <> Transition Component - Layout with sidebar
{/* Off-canvas menu for mobile */} {/* Off-canvas menu overlay, show/hide based on off-canvas menu state. */} {ref => (
setMobileOpen(false)} className="absolute inset-0 opacity-75 bg-cool-gray-600" />
)} {/* Off-canvas menu, show/hide based on off-canvas menu state. */}
setMobileOpen(false)} >
Easywire logo
{/* Dummy element to force sidebar to shrink to fit close icon */}
{/* Static sidebar for desktop */}
{/* Sidebar component, swap this element with another sidebar if you like */}
Easywire logo
{/* Search bar */}
{/* Replace with your content */}
{/* /End replace */}
) }