jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #166 from life-itself/165-fix-navbar 

[site/nav]: sticky navbar + responsive adjustments
This commit is contained in:
Khalil Ali 2022-05-24 11:37:16 +03:00 committed by GitHub
parent 7def64b5c2 75e63c6bbf
commit 8c249af204
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
site/components/Nav.js
View File

@ -12,14 +12,14 @@ function classNames(...classes) {
export default function Nav() {
return (
<Disclosure as="nav" className="shadow">
<Disclosure as="nav" className="shadow-md bg-slate-900 sticky top-0 z-10">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div className="relative flex justify-between h-16">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
<div className="flex justify-between h-16">
<div className="flex items-center xl:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<Disclosure.Button className="inline-flex items-center justify-center p-2 mr-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
{open ? (
<XIcon className="block h-6 w-6" aria-hidden="true" />
@ -28,13 +28,13 @@ export default function Nav() {
)}
</Disclosure.Button>
</div>
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex-shrink-0 flex items-center uppercase text-yellow-500">
<div className="flex-1 flex justify-between">
<div className="text-sm sm:text-base flex-shrink-0 flex items-center uppercase text-yellow-500">
<Link href="/">
<a>{siteConfig.title}</a>
</Link>
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
<div className="hidden xl:flex mx-auto space-x-4">
{/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
{navLinks.map((item, i) => (
<Link key={i} href={item.href}>
@ -53,7 +53,7 @@ export default function Nav() {
</Link>
))}
</div>
<div className="hidden sm:flex items-center justify-end w-full space-x-4">
<div className="hidden md:flex items-center justify-end space-x-4">
{siteConfig.social.map(
({ name, href, icon: Icon }) =>
["YouTube", "GitHub", "Life Itself"].includes(name) && (
@ -77,8 +77,7 @@ export default function Nav() {
</div>
</div>
</div>
<Disclosure.Panel className="sm:hidden">
<Disclosure.Panel className="xl:hidden">
<div className="pt-2 pb-4 space-y-1">
{/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" */}
{navLinks.map((item, i) => (