-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
328 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,76 @@ | ||
| import Link from "next/link"; | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { ProfilePicture } from "./images/ProfilePicture"; | ||
| import { Hamburger } from "./nav/Hamburger"; | ||
| import { Links } from "./nav/Links"; | ||
| import { Close } from "./icons/Close"; | ||
| import Link from "next/link"; | ||
| import { Dialog } from "@headlessui/react"; | ||
| import { usePathname } from "next/navigation"; | ||
|
|
||
| export const NavBar = () => { | ||
| const path = usePathname(); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const checkPath = (href: string) => { | ||
| if (href === path) { | ||
| setIsOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <nav className="border-b-2 border-surface1"> | ||
| <div className="flex flex-row items-center justify-center text-lg lg:text-xl xl:text-2xl"> | ||
| <div className="p-2 flex flex-row gap-x-4 items-center tracking-tight font-bold"> | ||
| <> | ||
| <nav className="self-center w-full max-w-xl lg:max-w-3xl xl:max-w-6xl"> | ||
| <div className="p-4 flex flex-row items-center justify-between text-md lg:text-lg xl:text-xl"> | ||
| <ProfilePicture /> | ||
| <Link href="/" className="transition duration-300 group"> | ||
| <span className="group-hover:text-blue transition-all duration-300"> | ||
| < Home /> | ||
| </span> | ||
| <span className="block max-w-0 group-hover:max-w-full transition-all h-0.5 bg-blue duration-300"></span> | ||
| <div className="hidden md:flex flex-row gap-x-4 font-bold tracking-tight"> | ||
| <Links /> | ||
| </div> | ||
| <div | ||
| className="md:hidden px-4 py-2 hover:bg-crust dark:hover:bg-base rounded-lg" | ||
| onClick={() => setIsOpen((prev) => !prev)} | ||
| > | ||
| <Hamburger /> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <Dialog | ||
| className={ | ||
| isOpen | ||
| ? "block w-full h-screen absolute overflow-hidden inset-0 bg-crust z-10 flex-col items-center" | ||
| : "hidden" | ||
| } | ||
| open={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| // initialFocus={focusedRef} | ||
| > | ||
| <div className="p-4 w-full flex flex-row items-center justify-between"> | ||
| <ProfilePicture /> | ||
| <div | ||
| className="px-4 py-2 hover:bg-crust dark:hover:bg-base rounded-lg" | ||
| onClick={() => setIsOpen((prev) => !prev)} | ||
| > | ||
| <Close /> | ||
| </div> | ||
| </div> | ||
| <ul className="flex flex-col space-y-6 items-center text-2xl font-semibold justify-center"> | ||
| <Link | ||
| href="/" | ||
| // ref={focusedRef} | ||
| onClick={() => checkPath("/")} | ||
| > | ||
| < Home /> | ||
| </Link> | ||
| <Link | ||
| href="/projects" | ||
| className="transition duration-300 group" | ||
| // ref={focusedRef} | ||
| onClick={() => checkPath("/projects")} | ||
| > | ||
| <span className="group-hover:text-blue transition-all duration-300"> | ||
| < Projects /> | ||
| </span> | ||
| <span className="block max-w-0 group-hover:max-w-full transition-all h-0.5 bg-blue duration-300"></span> | ||
| < Projects /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </ul> | ||
| </Dialog> | ||
| </> | ||
| ); | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export const Archived = () => { | ||
| return ( | ||
| <svg | ||
| className="h-5 w-5 xl:h-6 xl:w-6 inline align-text-bottom fill-yellow" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="32" | ||
| height="32" | ||
| viewBox="0 0 256 256" | ||
| > | ||
| <path d="M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"></path> | ||
| </svg> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export const Close = () => { | ||
| return ( | ||
| <svg | ||
| className="h-8 w-8 fill-overlay0 group-hover:bg-subtext1" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="32" | ||
| height="32" | ||
| viewBox="0 0 256 256" | ||
| > | ||
| <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path> | ||
| </svg> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export const ExternalLink = () => { | ||
| return ( | ||
| <svg | ||
| className="h-4 w-4 inline-block align-text-top fill-text opacity-50" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="32" | ||
| height="32" | ||
| viewBox="0 0 256 256" | ||
| > | ||
| <path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path> | ||
| </svg> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.