Fix routing

package.json

@@ -14,8 +14,7 @@
     "@tauri-apps/api": "2.6.0",
     "@tauri-apps/plugin-opener": "2.4.0",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react-dom": "19.1.0"
-    "react-router-dom": "7.7.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "6.7.2",

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>
+        {renderContent()}
-          <Route path='/' element={<Home />} />
-        </Routes>
       </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="#installs" className={`link ${(window.location.hash || '#installs') === '#installs' ? '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="#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>
+    </>
+  )
+}

yarn.lock

@@ -910,11 +910,6 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
-cookie@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
-  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
-
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -1245,21 +1240,6 @@ react-refresh@^0.17.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.17.0.tgz#b7e579c3657f23d04eccbe4ad2e58a8ed51e7e53"
   integrity sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==
 
-react-router-dom@7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.7.0.tgz#25be91ba474b934cdeb36b54551789c2361fbcad"
-  integrity sha512-wwGS19VkNBkneVh9/YD0pK3IsjWxQUVMDD6drlG7eJpo1rXBtctBqDyBm/k+oKHRAm1x9XWT3JFC82QI9YOXXA==
-  dependencies:
-    react-router "7.7.0"
-
-react-router@7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.7.0.tgz#9e5dc8a3be0c7a1931fcff6f32624b66a285b56a"
-  integrity sha512-3FUYSwlvB/5wRJVTL/aavqHmfUKe0+Xm9MllkYgGo9eDwNdkvwlJGjpPxono1kCycLt6AnDTgjmXvK3/B4QGuw==
-  dependencies:
-    cookie "^1.0.1"
-    set-cookie-parser "^2.6.0"
-
 react@19.1.0:
   version "19.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-19.1.0.tgz#926864b6c48da7627f004795d6cce50e90793b75"
@@ -1320,11 +1300,6 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-set-cookie-parser@^2.6.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
-  integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
-
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"