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

[components/nav][s]: responsiveness adjstmnt

This commit is contained in:
olayway 2022-05-23 22:34:16 +02:00
parent 7def64b5c2
commit 466944599b
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
site/components/Nav.js
View File

@ -12,14 +12,14 @@ function classNames(...classes) {
export default function Nav() { export default function Nav() {
return ( return (
<Disclosure as="nav" className="shadow"> <Disclosure as="nav" className="shadow-md bg-slate-900 sticky top-0">
{({ open }) => ( {({ open }) => (
<> <>
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <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="flex justify-between h-16">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden"> <div className="flex items-center xl:hidden">
{/* Mobile menu button */} {/* 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> <span className="sr-only">Open main menu</span>
{open ? ( {open ? (
<XIcon className="block h-6 w-6" aria-hidden="true" /> <XIcon className="block h-6 w-6" aria-hidden="true" />
@ -28,13 +28,13 @@ export default function Nav() {
)} )}
</Disclosure.Button> </Disclosure.Button>
</div> </div>
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"> <div className="flex-1 flex justify-between">
<div className="flex-shrink-0 flex items-center uppercase text-yellow-500"> <div className="flex-shrink-0 flex items-center uppercase text-yellow-500">
<Link href="/"> <Link href="/">
<a>{siteConfig.title}</a> <a>{siteConfig.title}</a>
</Link> </Link>
</div> </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" */} {/* 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) => ( {navLinks.map((item, i) => (
<Link key={i} href={item.href}> <Link key={i} href={item.href}>
@ -53,7 +53,7 @@ export default function Nav() {
</Link> </Link>
))} ))}
</div> </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( {siteConfig.social.map(
({ name, href, icon: Icon }) => ({ name, href, icon: Icon }) =>
["YouTube", "GitHub", "Life Itself"].includes(name) && ( ["YouTube", "GitHub", "Life Itself"].includes(name) && (
@ -77,8 +77,7 @@ export default function Nav() {
</div> </div>
</div> </div>
</div> </div>
<Disclosure.Panel className="xl:hidden">
<Disclosure.Panel className="sm:hidden">
<div className="pt-2 pb-4 space-y-1"> <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" */} {/* 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) => ( {navLinks.map((item, i) => (