Add current page logic to navbar, increase text size

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 = [
+const navigation: { id: string, name: string, href: string }[] = [
-    {name: 'Home', href: '/', current: true},
+    {id: 'home', name: 'Home', href: '/',},
-    {name: 'Projects', href: '/projects', current: false},
+    {id: 'projects', name: 'Projects', href: '/projects'},
-    {name: 'Contact', href: '/contact', current: false},
+    {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',
+                                                    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'
+                                                    '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>

src/pages/contact.tsx

@@ -3,8 +3,8 @@ import AppWrapper from "../components/AppWrapper";
 import WorkInProgress from "../components/WorkInProgress";
 
 const ContactPage: NextPage = () => {
-    return <AppWrapper>
+    return <AppWrapper current='contact'>
-        <WorkInProgress />
+        <WorkInProgress/>
     </AppWrapper>
 }
 

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=""

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>;
 }