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

Navbar setup changes. Still not working yet.

Browse Source
This commit is contained in:
Nick Bland 2022-04-19 20:49:23 +10:00
parent a10772c958
commit 05a9933c78
No known key found for this signature in database
GPG Key ID: B46CF88E4DAB4A2C
2 changed files with 103 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
components/navbar.tsx
View File

@ -1,7 +1,10 @@
import React, {ReactNode} from "react"; import React, {Fragment, ReactNode, useState} from "react";
import {useTheme} from "next-themes"; import {useTheme} from "next-themes";
import {Disclosure, Menu, Transition} from "@headlessui/react";
import {XIcon, MenuIcon, BellIcon} from "@heroicons/react/outline"
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
type Props = { type Props = {
children?: ReactNode children?: ReactNode
@ -9,8 +12,18 @@ type Props = {
description?: string description?: string
} }
const places = [
{name: "Home", href: "#", current: "true"},
{name: "About", href: "/about", current: "false"},
];
// Combine classNames together to form a single string based on whether it is selected or not. See comment below
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(" ")
}
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 {theme, setTheme} = useTheme(); const [isOpen, setIsOpen] = useState(false);
return ( return (
<div> <div>
<Head> <Head>
@ -21,7 +34,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<header> <header>
<nav> {/* <nav>
<Link href="/"> <Link href="/">
<a>nickbland.dev</a> <a>nickbland.dev</a>
</Link> </Link>
@ -30,6 +43,83 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
</Link> </Link>
<button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Toggle Theme</button> <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Toggle Theme</button>
</nav> </nav>
<Image
className="block lg:hidden h-8 w-auto"
src="/logo-white.svg"
alt="Workflow"
height={100}
width={100}
/>
*/}
<nav className="dark:bg-white bg-black">
<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 dark:hidden block">
<Image
className=""
src="/logo-white.svg"
alt="logo"
height={100}
width={100}
/>
</div>
<div className="flex-shrink-0 hidden dark: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-black">Home</a></Link>
<Link href="/"><a className="dark:text-black">Home 2</a></Link>
</div>
</div>
</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 ? (
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<XIcon className="block h-6 w-6" aria-hidden="true" />
)}
</button>
</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">Home</a></Link>
<Link href="/"><a className="dark:text-white">Home 2</a></Link>
</div>
</div>
</Transition.Child>
</Transition>
</nav>
</header> </header>
</div> </div>
) )

17
pages/index.tsx
View File

@ -1,15 +1,18 @@
import type {NextPage} from 'next'; import type {NextPage} from 'next';
import NavBar from "../components/navbar"; import NavBar from "../components/navbar";
import {useTheme} from "next-themes";
const Home: NextPage = () => { const Home: NextPage = () => {
return ( const {theme, setTheme} = useTheme();
<div className=""> return (
<NavBar title="Home | nickbland.dev"></NavBar> <div className="">
<NavBar title="Home | nickbland.dev"></NavBar>
<main className=""> <main className="">
<h1>Test Comment</h1>
</main> <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Toggle Theme</button>
</div> </main>
</div>
) )
} }