NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
86ff16c0e6
website-2/components/navbar.tsx

101 lines
5.0 KiB
TypeScript
Raw Normal View History

Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
import React, {Fragment, ReactNode, useState} from "react";
Export toggle switch to new component file Refactored for future code maintainability. Also added in default to dark theme and adjusted some styling on the toggle switch.
2022-04-24 00:19:38 +10:00
import {Disclosure, Transition} from "@headlessui/react";
Update to use a new icon package Use react-icons library over hericons. There is a greater variety of icons available; including heroicons as a part of it. Using this so I can use stuff like a github logo SVG and others.
2022-05-14 16:47:40 +10:00
import {HiX, HiMenu} from "react-icons/hi"
Set up framework for my content remove all nextJS framework stuff, add in logo files, add in a healthcheck API endpoint, navbar component starter.
2022-04-16 21:19:04 +10:00
import Head from "next/head";
import Link from "next/link";
Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
import Image from "next/image";
Export toggle switch to new component file Refactored for future code maintainability. Also added in default to dark theme and adjusted some styling on the toggle switch.
2022-04-24 00:19:38 +10:00
import { ThemeSwitch } from "./themeSwitch";
Set up framework for my content remove all nextJS framework stuff, add in logo files, add in a healthcheck API endpoint, navbar component starter.
2022-04-16 21:19:04 +10:00
Add in fixes for navbar on mobile plus toggle switch
2022-04-23 00:46:37 +10:00
Set up framework for my content remove all nextJS framework stuff, add in logo files, add in a healthcheck API endpoint, navbar component starter.
2022-04-16 21:19:04 +10:00
type Props = {
children?: ReactNode
title?: string
description?: string
}
const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
const [isOpen, setIsOpen] = useState(false);
Set up framework for my content remove all nextJS framework stuff, add in logo files, add in a healthcheck API endpoint, navbar component starter.
2022-04-16 21:19:04 +10:00
return (
Change navbar to sit inside of header tag Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
2022-05-15 23:33:15 +10:00
<header>
Set up framework for my content remove all nextJS framework stuff, add in logo files, add in a healthcheck API endpoint, navbar component starter.
2022-04-16 21:19:04 +10:00
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="author" content="Nick Bland" />
<meta name="description" content={description} />
<link rel="icon" href="/favicon.ico" />
</Head>
Change navbar to sit inside of header tag Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
2022-05-15 23:33:15 +10:00
<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>
Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
</div>
Change navbar to sit inside of header tag Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
2022-05-15 23:33:15 +10:00
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<ThemeSwitch></ThemeSwitch>
Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
</div>
</div>
Change navbar to sit inside of header tag Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
2022-05-15 23:33:15 +10:00
</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>
Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
</div>
</div>
Change navbar to sit inside of header tag Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
2022-05-15 23:33:15 +10:00
</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>
Navbar setup changes. Still not working yet.
2022-04-19 20:49:23 +10:00
</div>
Change navbar to sit inside of header tag Reflect that both the head and nav tag are inside of a header rather than nesting both inside of an empty div
2022-05-15 23:33:15 +10:00
</div>
</Transition.Child>
</Transition>
</Disclosure>
</header>
Set up framework for my content remove all nextJS framework stuff, add in logo files, add in a healthcheck API endpoint, navbar component starter.
2022-04-16 21:19:04 +10:00
)
}
export default NavBar
Reference in New Issue Copy Permalink