xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-10 08:09:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add current page logic to navbar, increase text size

Browse Source
This commit is contained in:
Xevion
2022-12-30 20:50:01 -06:00
parent 55fc7168b1
commit 7426450ce9
4 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/AppWrapper.tsx
View File

@@ -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>

4
src/pages/contact.tsx
View File

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

2
src/pages/portal.tsx
View File

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

2
src/pages/projects.tsx
View File

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