From 7426450ce9a39207c18e5baa2253a407477e3fba Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Fri, 30 Dec 2022 20:50:01 -0600
Subject: [PATCH] Add current page logic to navbar, increase text size

---
 src/components/AppWrapper.tsx | 21 +++++++++++----------
 src/pages/contact.tsx         |  4 ++--
 src/pages/portal.tsx          |  2 +-
 src/pages/projects.tsx        |  2 +-
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/AppWrapper.tsx b/src/components/AppWrapper.tsx
index 9d6b68c..01d0b64 100644
--- a/src/components/AppWrapper.tsx
+++ b/src/components/AppWrapper.tsx
@@ -4,17 +4,18 @@ import {HiBars3, HiXMark} from "react-icons/hi2";
 import {classNames} from "../utils/helpers";
 import Link from "next/link";
 
-const navigation = [
-    {name: 'Home', href: '/', current: true},
-    {name: 'Projects', href: '/projects', current: false},
-    {name: 'Contact', href: '/contact', current: false},
+const navigation: { id: string, name: string, href: string }[] = [
+    {id: 'home', name: 'Home', href: '/',},
+    {id: 'projects', name: 'Projects', href: '/projects'},
+    {id: 'contact', name: 'Contact', href: '/contact'},
 ]
 
 type WrapperProps = {
+    current?: string;
     children?: ReactNode | ReactNode[] | null;
 };
 
-const AppWrapper: FunctionComponent<WrapperProps> = ({children}: WrapperProps) => {
+const AppWrapper: FunctionComponent<WrapperProps> = ({current, children}: WrapperProps) => {
     return <div className="min-h-screen bg-zinc-800 text-zinc-50">
         <Disclosure as="nav" className="bg-zinc-900">
             {({open}) => (
@@ -41,10 +42,10 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({children}: WrapperProps) =
                                                 key={item.name}
                                                 href={item.href}
                                                 className={classNames(
-                                                    item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
-                                                    'px-3 py-2 rounded-md text-sm font-medium'
+                                                    item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
+                                                    'px-3 py-2 rounded-md text-sm font-medium text-lg'
                                                 )}
-                                                aria-current={item.current ? 'page' : undefined}
+                                                aria-current={item.id == current ? 'page' : undefined}
                                             >
                                                 {item.name}
                                             </Link>
@@ -63,10 +64,10 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({children}: WrapperProps) =
 
                                         as="a"
                                         className={classNames(
-                                            item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
+                                            item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
                                             'block px-3 py-2 rounded-md text-base font-medium'
                                         )}
-                                        aria-current={item.current ? 'page' : undefined}
+                                        aria-current={item.id == current ? 'page' : undefined}
                                     >
                                         {item.name}
                                     </Disclosure.Button>
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index d2fda70..3694d27 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -3,8 +3,8 @@ import AppWrapper from "../components/AppWrapper";
 import WorkInProgress from "../components/WorkInProgress";
 
 const ContactPage: NextPage = () => {
-    return <AppWrapper>
-        <WorkInProgress />
+    return <AppWrapper current='contact'>
+        <WorkInProgress/>
     </AppWrapper>
 }
 
diff --git a/src/pages/portal.tsx b/src/pages/portal.tsx
index af68823..1c0132e 100644
--- a/src/pages/portal.tsx
+++ b/src/pages/portal.tsx
@@ -59,7 +59,7 @@ const PhototagPage: NextPage = () => {
                             <li>Cutting Edge - the latest technology</li>
                         </ul>
                         <h3>Screenshots</h3>
-                        <div className="relative space-y-3">
+                        <div className="relative space-y-8">
                             {images.map(([src, description]) => {
                                     return <div key={src} className="flex flex-col justify-center w-full">
                                         <Image fill sizes="100vw" src={src} alt=""
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index aad525b..f4e4aa0 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -3,7 +3,7 @@ import AppWrapper from "../components/AppWrapper";
 import WorkInProgress from "../components/WorkInProgress";
 
 const ProjectsPage: NextPage = () => {
-    return <AppWrapper>
+    return <AppWrapper current='projects'>
         <WorkInProgress/>
     </AppWrapper>;
 }