Fix routing

src/App.scss

@@ -7,4 +7,5 @@ body {
   font-family: 'Roboto', sans-serif;
   background-color: $backgroundColor;
   color: white;
+  user-select: none;
 }

src/App.tsx

@@ -1,17 +1,33 @@
-import { HashRouter, Route, Routes } from 'react-router-dom'
+import { useEffect, useState } from 'react'
 import './App.scss'
-import Home from './routes/Home'
 import Sidebar from './componets/Sidebar'
+import Settings from './routes/Settings'
+import Installs from './routes/Installs'
 
 export default function App () {
+  const [hash, setHash] = useState(window.location.hash || '#installs')
+
+  useEffect(() => {
+    const onHashChange = () => setHash(window.location.hash || '#installs')
+    window.addEventListener('hashchange', onHashChange)
+    return () => window.removeEventListener('hashchange', onHashChange)
+  }, [])
+
+  function renderContent() {
+    if (hash === "#installs") {
+      return <Installs />
+    } else if (hash === "#settings") {
+      return <Settings />
+    }
+    return null
+  }
+
   return (
-    <HashRouter>
+    <>
       <Sidebar />
       <main style={{ marginLeft: '15rem' }}>
-        <Routes>
-          <Route path='/' element={<Home />} />
-        </Routes>
+        {renderContent()}
       </main>
-    </HashRouter>
+    </>
   )
 }

src/componets/Sidebar.tsx

@@ -37,8 +37,8 @@ const Sidebar = () => {
         />
       </div>
       <nav className="nav-links">
-        <a href="/" className={`link ${window.location.pathname === "/" ? "active" : ""}`}><FontAwesomeIcon icon={faServer} className="mr-2" /> Installs</a>
-        <a href="/settings" className={`link ${window.location.pathname === "/settings" ? "active" : ""}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
+        <a href="#installs" className={`link ${(window.location.hash || '#installs') === '#installs' ? 'active' : ''}`}><FontAwesomeIcon icon={faServer} className="mr-2" /> Installs</a>
+        <a href="#settings" className={`link ${(window.location.hash || '#installs') === '#settings' ? 'active' : ''}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
         <a onClick={() => openUrl("https://berrydash.lncvrt.xyz/discord")} className="link"><FontAwesomeIcon icon={faDiscord} className="mr-2" /> Support</a>
       </nav>
     </aside>

src/routes/Home.tsx

@@ -1,3 +0,0 @@
-export default function Home () {
-  return <p>Berry Dash Manager</p>
-}

src/routes/Installs.scss

@@ -0,0 +1 @@
+@use 'tailwindcss' as *;

src/routes/Installs.tsx

@@ -0,0 +1,9 @@
+import './Installs.scss'
+
+export default function Installs () {
+  return (
+    <>
+      <p>Installs</p>
+    </>
+  )
+}

src/routes/Settings.scss

@@ -0,0 +1 @@
+@use 'tailwindcss' as *;

src/routes/Settings.tsx

@@ -0,0 +1,9 @@
+import './Settings.scss'
+
+export default function Settings () {
+  return (
+    <>
+      <p>Settings</p>
+    </>
+  )
+}