make navbar not update when changing page and make it work on mobile

Author: DFelipehDEV

src/App.jsx

@@ -1,10 +1,12 @@
 import { HashRouter, Routes, Route } from 'react-router'
 import Home from './pages/Home.jsx'
 import Projects from './pages/Projects.jsx'
+import Navbar from './components/Navbar.jsx'
 
 function App() {
     return (
         <>
+            <Navbar />
             <HashRouter>
                 <Routes>
                     <Route path="/" element={<Home />} />

src/components/Navbar.jsx

@@ -1,19 +1,21 @@
 function Navbar() {
     return (
         <nav
-            className="sticky top-4 z-10 mb-8 mx-auto w-[75%] sm:w-4/6 
+            className="sticky top-4 z-10 mb-8 mx-auto w-[75%]
                  bg-white/5 backdrop-blur-xs border border-white/15 
                  rounded-full"
         >
-            <div className="flex justify-between items-center px-8 py-4 text-gray-200 text-lg font-extralight">
-                <a
-                    href="#"
-                    className="font-light text-white tracking-wide hover:text-brand"
-                >
-                    DFelipeh's Corner
-                </a>
+            <div className="flex justify-center sm:justify-between items-center px-8 py-4 text-gray-200 text-lg font-extralight">
+                <div className="hidden sm:block">
+                    <a
+                        href="#"
+                        className="font-light text-white tracking-wide hover:text-brand"
+                    >
+                        DFelipeh's Corner
+                    </a>
+                </div>
 
-                <div className="space-x-4 hidden sm:flex">
+                <div className="space-x-4 flex">
                     <a href="#" className="hover:text-brand">
                         Home
                     </a>

src/pages/Home.jsx

@@ -4,7 +4,6 @@ import Navbar from '../components/Navbar'
 function App() {
     return (
         <>
-            <Navbar />
             <div className="flex gap-2 items-center justify-center">
                 <h1 className="text-3xl text-center">
                     DFelipeh

src/pages/Projects.jsx

@@ -3,7 +3,6 @@ import Navbar from '../components/Navbar'
 function App() {
     return (
         <>
-            <Navbar />
             <div className="flex gap-2 items-center justify-center">
                 <h1 className="text-3xl text-center">
                     Projects page