NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migration to tailwind 3.0. Also adjust navbar to new standards and theme switch.

Browse Source
This commit is contained in:
Nick Bland 2022-09-09 14:02:05 +10:00
parent 86ff16c0e6
commit 2594cc630b
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
3 changed files with 63 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
components/navbar.tsx
View File

@ -1,5 +1,4 @@
import React, {Fragment, ReactNode, useState} from "react"; import React, {Fragment, ReactNode, useState} from "react";
import {Disclosure, Transition} from "@headlessui/react";
import {HiX, HiMenu} from "react-icons/hi" import {HiX, HiMenu} from "react-icons/hi"
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; 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 NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const handleCheck = () => {
setIsOpen(!isOpen);
}
return ( return (
<header> <header>
<Head> <Head>
@ -24,76 +28,54 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Disclosure as="nav" className="dark:bg-black bg-white m-0 p-0"> <div className="navbar dark:bg-black bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="navbar-start">
<div className="flex items-center justify-between h-16"> <div className="flex-shrink-0 hidden dark:block">
<div className="flex items-center"> <Image
<div className="flex-shrink-0 hidden dark:block"> className=""
<Image src="/logo-white.svg"
className="" alt="logo"
src="/logo-white.svg" height={100}
alt="logo" width={100}
height={100} />
width={100} </div>
/> <div className="flex-shrink-0 dark:hidden block">
</div> <Image
<div className="flex-shrink-0 dark:hidden block"> className=""
<Image src="/logo-black.svg"
className="" alt="logo"
src="/logo-black.svg" height={100}
alt="logo" width={100}
height={100} />
width={100} </div>
/> </div>
</div> <div className="navbar-center lg:hidden">
<div className="hidden md:block"> <div className="dropdown">
<div className="ml-10 flex items-baseline space-x-4"> <label tabIndex={0} className="btn btn-ghost swap swap-rotate lg:hidden">
<Link href="/"><a className="dark:text-white text-black">Home</a></Link> <input type="checkbox" checked={isOpen} onChange={handleCheck} />
<Link href="/"><a className="dark:text-white text-black">About</a></Link> <HiMenu className="block h-6 w-6 swap-off text-gray-400 hover:text-white hover:bg-gray-800" />
<Link href="/"><a className="dark:text-white text-black">Projects</a></Link> <HiX className="block h-6 w-6 swap-on text-gray-400 hover:text-white hover:bg-gray-800" />
</div> </label>
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3"> <ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow dark:bg-black bg-white rounded-box w-52">
<ThemeSwitch></ThemeSwitch> <li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">Home</a></Link></li>
</div> <li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">About</a></Link></li>
</div> <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>
<div className="-mr-2 flex md:hidden"> <div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<button <ThemeSwitch />
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> </div>
</div> </div>
</div> </div>
<Transition show={isOpen} appear={true}> </div>
<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>
</header> </header>
) )
} }

18
components/themeSwitch.tsx
View File

@ -1,12 +1,16 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Switch } from "@headlessui/react"; import { HiSun, HiMoon } from "react-icons/hi";
export const ThemeSwitch = () => { export const ThemeSwitch = () => {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const [enabled, setEnabled] = useState(true); 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) { if (enabled) {
setTheme("dark"); setTheme("dark");
} else { } else {
@ -15,7 +19,13 @@ export const ThemeSwitch = () => {
return ( return (
<div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative"> <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"> <div className="flex items-center">
<Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label> <Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
<Switch <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`} /> 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> </Switch>
</div> </div>
</Switch.Group> </Switch.Group> */}
</div> </div>
); );
}; };

1
tailwind.config.js
View File

@ -1,5 +1,4 @@
module.exports = { module.exports = {
purge: [],
darkMode: "class", darkMode: "class",
content: [ content: [
"./pages/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}",