relative top bar on mobile

This commit is contained in:
Peer Richelsen 2021-08-03 13:13:48 +02:00
parent b9125a54c8
commit 59748b4d40

View file

@ -67,6 +67,7 @@ export default function Shell(props) {
}
return session ? (
<>
<div className="h-screen flex overflow-hidden bg-gray-100">
{/* Static sidebar for desktop */}
<div className="hidden md:flex md:flex-shrink-0">
@ -91,7 +92,9 @@ export default function Shell(props) {
)}>
<item.icon
className={classNames(
item.current ? "text-neutral-500" : "text-neutral-400 group-hover:text-neutral-500",
item.current
? "text-neutral-500"
: "text-neutral-400 group-hover:text-neutral-500",
"mr-3 flex-shrink-0 h-5 w-5"
)}
aria-hidden="true"
@ -108,7 +111,9 @@ export default function Shell(props) {
</div>
</div>
</div>
<div className="flex flex-col w-0 flex-1 overflow-hidden">
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
{/* show top navigation for md and smaller (tablet and phones) */}
<nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
<Link href="/event-types">
@ -130,8 +135,6 @@ export default function Shell(props) {
</div>
</div>
</nav>
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<div className="py-6">
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
<div className="mb-6">
@ -178,6 +181,7 @@ export default function Shell(props) {
</main>
</div>
</div>
</>
) : null;
}