Use hashrouter for navigation.

src/App.tsx

@@ -31,11 +31,6 @@ export const RootElement = ()=>{
     </div>
 }
 
-
-
-
-
-
 export const App = ()=> {
 
     return (

src/components/MobileDrawer.tsx

@@ -3,6 +3,7 @@ import {faInfoCircle, faDownload, faWrench, faExternalLink, faContactCard} from
 import {FC} from "react";
 import {ThemeToggler} from "./ThemeToggler.tsx";
 import {useUIStore} from "../store/store.ts";
+import {useNavigate} from "react-router-dom";
 
 type MobileDrawerProps = {
     isOpen: boolean,
@@ -11,9 +12,10 @@ type MobileDrawerProps = {
 
 export const MobileDrawer:FC<MobileDrawerProps> = ({isOpen, setOpen}) => {
     const toggleTheme = useUIStore(state=>state.toggleDarkMode)
+    const navigate = useNavigate()
     const navigateToElement = (elementId: string)=>{
-        location.hash = elementId
-        setOpen(false)
+        document.getElementById(elementId)?.scrollIntoView({block: "start", inline: "nearest"})
+        navigate('#'+elementId)
     }
 
     return <div className={` ${!isOpen?'h-0  overflow-hidden':' h-[100vh]'} w-full bg-transparent md:hidden z-10 absolute pointer-events-none`}

src/components/ThemeToggler.tsx

@@ -2,12 +2,8 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faMoon, faSun} from "@fortawesome/free-solid-svg-icons";
 import {useUIStore} from "../store/store.ts";
 import {useEffect} from "react";
+import {handleManualThemeChange} from "../utils/ThemeChanger.ts";
 
-export const handleManualThemeChange = ()=>{
-    const newState = !useUIStore.getState().isDarkMode
-    useUIStore.getState().toggleDarkMode()
-    localStorage.setItem('isDarkMode', newState.toString())
-}
 
 export const ThemeToggler = ()=>{
     const darkMode = useUIStore(state=>state.isDarkMode)

src/main.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {App, RootElement} from './App.tsx'
 import './index.css'
-import {createBrowserRouter, RouterProvider} from "react-router-dom";
+import {createHashRouter, RouterProvider} from "react-router-dom";
 import {createRoutesFromElements, Route} from "react-router";
 import {PluginViewer} from "./pages/PluginViewer.tsx";
 
 
-const router = createBrowserRouter(createRoutesFromElements(
+const router = createHashRouter(createRoutesFromElements(
     <Route element={<RootElement/>}>
         <Route index element={<App/>}/>
         <Route path="/plugins" element={<PluginViewer/>}/>

src/pages/Header.tsx

@@ -1,43 +1,19 @@
 import brandSvg from '../assets/img/brand.svg';
-import {Suspense, useCallback, useEffect, useState} from "react";
+import {Suspense, useState} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBars} from "@fortawesome/free-solid-svg-icons";
 import {MobileDrawer} from "../components/MobileDrawer.tsx";
 import {ThemeToggler} from "../components/ThemeToggler.tsx";
+import {useNavigate} from "react-router-dom";
 export const Header = () => {
-    const [hash, setHash] = useState<string>(window.location.hash)
     const [mobileDrawerOpen, setMobileDrawerOpen] = useState<boolean>(false)
-
-    const hashChangeHandler = useCallback(() => {
-        setHash(window.location.hash);
-    }, []);
+    const navigate = useNavigate()
 
     const navigateToElement = (elementId: string)=>{
-        location.hash = elementId
+        document.getElementById(elementId)?.scrollIntoView({block: "start", inline: "nearest"})
+        navigate('#'+elementId)
     }
 
-    useEffect(() => {
-        window.addEventListener('hashchange', hashChangeHandler);
-        return () => {
-            window.removeEventListener('hashchange', hashChangeHandler);
-        };
-    }, []);
-
-    useEffect(()=> {
-            if(location.hash && location.hash.length>0){
-                const elements = document.getElementsByClassName("active")
-                for (let i = 0; i < elements.length; i++) {
-                    elements[i].classList.remove("active")
-                }
-                document.querySelector("[title='"+hash.slice(1)+"']")?.classList.add("active")
-                const element = document.getElementById(hash.slice(1))
-                if(element){
-                    element.scrollIntoView({block: "start", inline: "nearest"})
-                }
-            }
-        }
-        ,[hash])
-
 
 
 
@@ -51,11 +27,11 @@ export const Header = () => {
 
             <div id="nav">
                 <ul>
-                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('#about')} title="about">About</a></li>
-                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('#download')} title="download">Download</a></li>
-                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('#contribute')} title="contribute">Contribute</a></li>
-                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement("#links")} title="links">Links</a></li>
-                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('#contact')} title="contact">Contact</a></li>
+                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('about')} title="about">About</a></li>
+                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('download')} title="download">Download</a></li>
+                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('contribute')} title="contribute">Contribute</a></li>
+                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement("links")} title="links">Links</a></li>
+                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('contact')} title="contact">Contact</a></li>
                     <li className="dark:bg-secondary-dark"><ThemeToggler/></li>
                 </ul>
             </div>

src/utils/ThemeChanger.ts

@@ -0,0 +1,7 @@
+import {useUIStore} from "../store/store.ts";
+
+export const handleManualThemeChange = ()=>{
+    const newState = !useUIStore.getState().isDarkMode
+    useUIStore.getState().toggleDarkMode()
+    localStorage.setItem('isDarkMode', newState.toString())
+}