Update button behavior to work as link

components/MobileNav.tsx

@@ -1,6 +1,5 @@
 import { FC, useContext, useRef, useEffect } from 'react';
 import { DarkModeContext } from './DarkMode';
-import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import IconButton from './IconButton';
 import Button from './Button';
@@ -44,7 +43,7 @@ const Bar = styled.nav<StyledProps>`
 		display: flex;
 		margin: 0rem 1rem;
 
-		button {
+		a {
 			color: var(--text-inverted) !important;
 		}
 	}
@@ -53,7 +52,6 @@ const Bar = styled.nav<StyledProps>`
 const MobileNav: FC<Props> = ({ open, close }) => {
 	const { dark, toggle } = useContext(DarkModeContext);
 	const ref = useRef<HTMLDivElement>(null);
-	const router = useRouter();
 
 	useEffect(() => {
 		document.addEventListener('mousedown', (event: MouseEvent) => {
@@ -83,37 +81,18 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 				/>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button onClick={() => toggle()}>{dark ? 'Light Mode' : 'Dark Mode'}</Button>
-			</div>
-			<div className='mobile-button-wrapper'>
-				<Button
-					onClick={() => {
-						close();
-						router.push('/about');
-					}}
-				>
-					About
+				<Button href='#' onClick={() => toggle()}>
+					{dark ? 'Light Mode' : 'Dark Mode'}
 				</Button>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button
-					onClick={() => {
-						close();
-						router.push('/portfolio');
-					}}
-				>
-					Portfolio
-				</Button>
+				<Button href='/about'>About</Button>
 			</div>
 			<div className='mobile-button-wrapper'>
-				<Button
-					onClick={() => {
-						close();
-						router.push('/blog');
-					}}
-				>
-					Blog
-				</Button>
+				<Button href='/portfolio'>Portfolio</Button>
+			</div>
+			<div className='mobile-button-wrapper'>
+				<Button href='/blog'>Blog</Button>
 			</div>
 		</Bar>
 	);