From a3f12be1aef4e9926fbdce6391f28bb6de331a9b Mon Sep 17 00:00:00 2001
From: Z-100 <marvin131t@gmail.com>
Date: Mon, 15 Apr 2024 08:46:10 +0200
Subject: [PATCH 1/2] feature(improve-ux): Add scroll to top

---
 src/App.tsx                               |  3 ++-
 src/components/navigation/ScrollToTop.tsx | 12 ++++++++++++
 src/components/navigation/index.js        |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/components/navigation/ScrollToTop.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c5efd8d..7d854e9 100644
--- a/src/App.tsx
+++ b/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/>
diff --git a/src/components/navigation/ScrollToTop.tsx b/src/components/navigation/ScrollToTop.tsx
new file mode 100644
index 0000000..bd9fce2
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
index d5ea8f5..b09a0c6 100644
--- a/src/components/navigation/index.js
+++ b/src/components/navigation/index.js
@@ -1 +1,2 @@
 export * from './Navbar'
+export * from './ScrollToTop'

From 6535085c809972c816bb1a8c03ad6b3d42e21a08 Mon Sep 17 00:00:00 2001
From: Z-100 <marvin131t@gmail.com>
Date: Mon, 15 Apr 2024 09:19:59 +0200
Subject: [PATCH 2/2] feature(improve-ux): Improve usability of navbar

---
 src/components/navigation/Navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx
index 114c066..31e2600 100644
--- a/src/components/navigation/Navbar.tsx
+++ b/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>