Merge pull request #109 from Z-100/feature/improve-ux

feature(improve-ux): Add scroll to top

src/App.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import './index.css'
 import {BrowserRouter} from 'react-router-dom';
-import {Footer, Navbar, Router} from './components';
+import {Footer, Navbar, Router, ScrollToTop} from './components';
 import {Analytics} from "@vercel/analytics/react";
 
 function App() {
 
     return (
         <BrowserRouter>
+            <ScrollToTop/>
             <div className="flex flex-col min-h-screen justify-between items-center">
                 <Navbar/>
                 <Router/>

src/components/navigation/Navbar.tsx

@@ -14,12 +14,12 @@ export const Navbar = () => {
     return (
         <>
             <div className="fixed top-0 w-full bg-dark-1 h-16 z-50">
-                <div className="w-[50%] ml-[25%] h-full flex gap-6 items-center justify-center">
+                <div className="w-[50%] ml-[25%] h-full flex gap-2 items-center justify-center text-lg">
                     {getRouterData(RouteGroup.NAVBAR).map(route => (
                         <Link key={route.name}
                               to={route.path}>
 
-                            <p className={url === route.path ? "font-bold" : "text-light-2"}>{route.name}</p>
+                            <p className={`hover:text-light-3 transition-colors px-3 ${url === route.path ? "font-medium text-light-3" : "text-light-2"}`}>{route.name}</p>
                         </Link>
                     ))}
                 </div>

src/components/navigation/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export function ScrollToTop() {
+    const { pathname } = useLocation();
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [pathname]);
+
+    return null;
+}

src/components/navigation/index.js

@@ -1 +1,2 @@
 export * from './Navbar'
+export * from './ScrollToTop'