Migration to tailwind 3.0. Also adjust navbar to new standards and theme switch.
This commit is contained in:
parent
86ff16c0e6
commit
2594cc630b
GPG Key ID:
31CADD9E5FDD798C
@ -1,5 +1,4 @@
|
||||
import React, {Fragment, ReactNode, useState} from "react";
|
||||
import {Disclosure, Transition} from "@headlessui/react";
|
||||
import {HiX, HiMenu} from "react-icons/hi"
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
@ -15,6 +14,11 @@ type Props = {
|
||||
|
||||
const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleCheck = () => {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Head>
|
||||
@ -24,76 +28,54 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
|
||||
<meta name="description" content={description} />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Disclosure as="nav" className="dark:bg-black bg-white m-0 p-0">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 hidden dark:block">
|
||||
<Image
|
||||
className=""
|
||||
src="/logo-white.svg"
|
||||
alt="logo"
|
||||
height={100}
|
||||
width={100}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-shrink-0 dark:hidden block">
|
||||
<Image
|
||||
className=""
|
||||
src="/logo-black.svg"
|
||||
alt="logo"
|
||||
height={100}
|
||||
width={100}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-4">
|
||||
<Link href="/"><a className="dark:text-white text-black">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-white text-black">About</a></Link>
|
||||
<Link href="/"><a className="dark:text-white text-black">Projects</a></Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
|
||||
<ThemeSwitch></ThemeSwitch>
|
||||
</div>
|
||||
</div>
|
||||
<div className="navbar dark:bg-black bg-white">
|
||||
<div className="navbar-start">
|
||||
<div className="flex-shrink-0 hidden dark:block">
|
||||
<Image
|
||||
className=""
|
||||
src="/logo-white.svg"
|
||||
alt="logo"
|
||||
height={100}
|
||||
width={100}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-shrink-0 dark:hidden block">
|
||||
<Image
|
||||
className=""
|
||||
src="/logo-black.svg"
|
||||
alt="logo"
|
||||
height={100}
|
||||
width={100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="navbar-center lg:hidden">
|
||||
<div className="dropdown">
|
||||
<label tabIndex={0} className="btn btn-ghost swap swap-rotate lg:hidden">
|
||||
<input type="checkbox" checked={isOpen} onChange={handleCheck} />
|
||||
<HiMenu className="block h-6 w-6 swap-off text-gray-400 hover:text-white hover:bg-gray-800" />
|
||||
<HiX className="block h-6 w-6 swap-on text-gray-400 hover:text-white hover:bg-gray-800" />
|
||||
</label>
|
||||
<ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow dark:bg-black bg-white rounded-box w-52">
|
||||
<li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">Home</a></Link></li>
|
||||
<li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">About</a></Link></li>
|
||||
<li><ThemeSwitch /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="navbar-end">
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-4">
|
||||
<Link href="/"><a className="dark:text-white text-black">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-white text-black">About</a></Link>
|
||||
<Link href="/"><a className="dark:text-white text-black">Projects</a></Link>
|
||||
</div>
|
||||
<div className="-mr-2 flex md:hidden">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
type="button"
|
||||
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
||||
>
|
||||
<span className="sr-only">Open Mobile Menu</span>
|
||||
{!isOpen ? (
|
||||
<HiMenu className="block h-6 w-6" aria-hidden="true" />
|
||||
) : (
|
||||
<HiX className="block h-6 w-6" aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
|
||||
<ThemeSwitch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Transition show={isOpen} appear={true}>
|
||||
<Transition.Child
|
||||
|
||||
enter="transition ease-out duration-100 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
as={Fragment}
|
||||
>
|
||||
<div id="mobile-menu">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">About</a></Link>
|
||||
<div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</Transition>
|
||||
</Disclosure>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { HiSun, HiMoon } from "react-icons/hi";
|
||||
|
||||
export const ThemeSwitch = () => {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [enabled, setEnabled] = useState(true);
|
||||
|
||||
// Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and following translates that to a string.
|
||||
const handleCheck = () => {
|
||||
setEnabled(!enabled);
|
||||
}
|
||||
|
||||
// Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and the following block translates that to a string.
|
||||
if (enabled) {
|
||||
setTheme("dark");
|
||||
} else {
|
||||
@ -15,7 +19,13 @@ export const ThemeSwitch = () => {
|
||||
|
||||
return (
|
||||
<div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
|
||||
<Switch.Group>
|
||||
<label className="swap swap-rotate">
|
||||
<input type="checkbox" checked={enabled} onChange={handleCheck}/>
|
||||
<HiSun className="swap-off relative inline-flex items-center w-10 h-10 text-black" />
|
||||
<HiMoon className="swap-on relative inline-flex items-center w-10 h-10 text-white" />
|
||||
</label>
|
||||
|
||||
{/* <Switch.Group>
|
||||
<div className="flex items-center">
|
||||
<Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
|
||||
<Switch
|
||||
@ -27,7 +37,7 @@ export const ThemeSwitch = () => {
|
||||
className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
|
||||
</Switch>
|
||||
</div>
|
||||
</Switch.Group>
|
||||
</Switch.Group> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
module.exports = {
|
||||
purge: [],
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user