From 05a9933c78f218f847cd96dbae03ada636f4a54f Mon Sep 17 00:00:00 2001 From: Nick Bland Date: Tue, 19 Apr 2022 20:49:23 +1000 Subject: [PATCH] Navbar setup changes. Still not working yet. --- components/navbar.tsx | 96 +++++++++++++++++++++++++++++++++++++++++-- pages/index.tsx | 17 ++++---- 2 files changed, 103 insertions(+), 10 deletions(-) diff --git a/components/navbar.tsx b/components/navbar.tsx index 522098b..e6717be 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,7 +1,10 @@ -import React, {ReactNode} from "react"; +import React, {Fragment, ReactNode, useState} from "react"; 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 Link from "next/link"; +import Image from "next/image"; type Props = { children?: ReactNode @@ -9,8 +12,18 @@ type Props = { 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 {theme, setTheme} = useTheme(); + const [isOpen, setIsOpen] = useState(false); return (
@@ -21,7 +34,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
-
) diff --git a/pages/index.tsx b/pages/index.tsx index f660155..64495dd 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,18 @@ import type {NextPage} from 'next'; import NavBar from "../components/navbar"; +import {useTheme} from "next-themes"; const Home: NextPage = () => { - return ( -
- + const {theme, setTheme} = useTheme(); + return ( +
+ -
- -
-
+
+

Test Comment

+ +
+
) }