relative top bar on mobile
This commit is contained in:
Peer Richelsen
parent
b9125a54c8
commit
59748b4d40
1 changed files with 103 additions and 99 deletions
|
|
@ -67,117 +67,121 @@ export default function Shell(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return session ? (
|
return session ? (
|
||||||
<div className="h-screen flex overflow-hidden bg-gray-100">
|
<>
|
||||||
{/* Static sidebar for desktop */}
|
<div className="h-screen flex overflow-hidden bg-gray-100">
|
||||||
<div className="hidden md:flex md:flex-shrink-0">
|
{/* Static sidebar for desktop */}
|
||||||
<div className="flex flex-col w-64">
|
<div className="hidden md:flex md:flex-shrink-0">
|
||||||
{/* Sidebar component, swap this element with another sidebar if you like */}
|
<div className="flex flex-col w-64">
|
||||||
<div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
|
{/* Sidebar component, swap this element with another sidebar if you like */}
|
||||||
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
|
<div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
|
||||||
<Link href="/event-types">
|
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
|
||||||
<a className="px-4">
|
<Link href="/event-types">
|
||||||
<Logo small />
|
<a className="px-4">
|
||||||
</a>
|
<Logo small />
|
||||||
</Link>
|
</a>
|
||||||
<nav className="mt-5 flex-1 px-2 bg-white space-y-1">
|
</Link>
|
||||||
{navigation.map((item) => (
|
<nav className="mt-5 flex-1 px-2 bg-white space-y-1">
|
||||||
<Link key={item.name} href={item.href}>
|
{navigation.map((item) => (
|
||||||
<a
|
<Link key={item.name} href={item.href}>
|
||||||
className={classNames(
|
<a
|
||||||
item.current
|
|
||||||
? "bg-neutral-100 text-neutral-900"
|
|
||||||
: "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
|
|
||||||
"group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
|
|
||||||
)}>
|
|
||||||
<item.icon
|
|
||||||
className={classNames(
|
className={classNames(
|
||||||
item.current ? "text-neutral-500" : "text-neutral-400 group-hover:text-neutral-500",
|
item.current
|
||||||
"mr-3 flex-shrink-0 h-5 w-5"
|
? "bg-neutral-100 text-neutral-900"
|
||||||
)}
|
: "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
|
||||||
aria-hidden="true"
|
"group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
|
||||||
/>
|
)}>
|
||||||
{item.name}
|
<item.icon
|
||||||
</a>
|
className={classNames(
|
||||||
</Link>
|
item.current
|
||||||
))}
|
? "text-neutral-500"
|
||||||
</nav>
|
: "text-neutral-400 group-hover:text-neutral-500",
|
||||||
</div>
|
"mr-3 flex-shrink-0 h-5 w-5"
|
||||||
<div className="flex-shrink-0 flex border-t border-gray-200 p-4">
|
)}
|
||||||
<UserDropdown session={session} />
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 flex border-t border-gray-200 p-4">
|
||||||
|
<UserDropdown session={session} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="flex flex-col w-0 flex-1 overflow-hidden">
|
<div className="flex flex-col w-0 flex-1 overflow-hidden">
|
||||||
{/* show top navigation for md and smaller (tablet and phones) */}
|
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
|
||||||
<nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
|
{/* show top navigation for md and smaller (tablet and phones) */}
|
||||||
<Link href="/event-types">
|
<nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
|
||||||
<a>
|
<Link href="/event-types">
|
||||||
<Logo />
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
<div className="flex gap-3 items-center self-center">
|
|
||||||
<button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
|
||||||
<span className="sr-only">View notifications</span>
|
|
||||||
<Link href="/settings/profile">
|
|
||||||
<a>
|
<a>
|
||||||
<CogIcon className="h-6 w-6" aria-hidden="true" />
|
<Logo />
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</button>
|
<div className="flex gap-3 items-center self-center">
|
||||||
<div className="mt-1">
|
<button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
||||||
<UserDropdown small bottom session={session} />
|
<span className="sr-only">View notifications</span>
|
||||||
</div>
|
<Link href="/settings/profile">
|
||||||
</div>
|
<a>
|
||||||
</nav>
|
<CogIcon className="h-6 w-6" aria-hidden="true" />
|
||||||
|
|
||||||
<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">
|
|
||||||
<h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
|
|
||||||
<p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4 flex-shrink-0">{props.CTA}</div>
|
|
||||||
</div>
|
|
||||||
<div className="px-4 sm:px-6 md:px-8">{props.children}</div>
|
|
||||||
|
|
||||||
{/* show bottom navigation for md and smaller (tablet and phones) */}
|
|
||||||
<nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
|
|
||||||
{/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
|
|
||||||
{navigation.flatMap((item, itemIdx) =>
|
|
||||||
item.name === "Settings" ? (
|
|
||||||
[]
|
|
||||||
) : (
|
|
||||||
<Link key={item.name} href={item.href}>
|
|
||||||
<a
|
|
||||||
className={classNames(
|
|
||||||
item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
|
|
||||||
itemIdx === 0 ? "rounded-l-lg" : "",
|
|
||||||
itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
|
|
||||||
"group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
|
|
||||||
)}
|
|
||||||
aria-current={item.current ? "page" : undefined}>
|
|
||||||
<item.icon
|
|
||||||
className={classNames(
|
|
||||||
item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
|
|
||||||
"block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
|
|
||||||
)}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<span>{item.name}</span>
|
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
</button>
|
||||||
)}
|
<div className="mt-1">
|
||||||
|
<UserDropdown small bottom session={session} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div className="py-6">
|
||||||
|
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
|
||||||
|
<p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-4 flex-shrink-0">{props.CTA}</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-4 sm:px-6 md:px-8">{props.children}</div>
|
||||||
|
|
||||||
{/* add padding to content for mobile navigation*/}
|
{/* show bottom navigation for md and smaller (tablet and phones) */}
|
||||||
<div className="block md:hidden pt-12" />
|
<nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
|
||||||
</div>
|
{/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
|
||||||
</main>
|
{navigation.flatMap((item, itemIdx) =>
|
||||||
|
item.name === "Settings" ? (
|
||||||
|
[]
|
||||||
|
) : (
|
||||||
|
<Link key={item.name} href={item.href}>
|
||||||
|
<a
|
||||||
|
className={classNames(
|
||||||
|
item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
|
||||||
|
itemIdx === 0 ? "rounded-l-lg" : "",
|
||||||
|
itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
|
||||||
|
"group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-xs sm:text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
|
||||||
|
)}
|
||||||
|
aria-current={item.current ? "page" : undefined}>
|
||||||
|
<item.icon
|
||||||
|
className={classNames(
|
||||||
|
item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
|
||||||
|
"block mx-auto flex-shrink-0 h-5 w-5 mb-1 text-center"
|
||||||
|
)}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* add padding to content for mobile navigation*/}
|
||||||
|
<div className="block md:hidden pt-12" />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
) : null;
|
) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue