maps nav bar active when on maps page

src/renderer/App.tsx

@@ -19,7 +19,7 @@ export default function App() {
 
     const location = useLocation();
 
-    pageState.setState(location.state);
+    pageState.setLocation(location);
 
     useEffect(() => {
         themeService.theme$.subscribe(() => {
@@ -38,9 +38,9 @@ export default function App() {
         <TitleBar/>
         <div className="bg-light-main-color-2 dark:bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
           <Routes>
-            <Route path={"/bs-version/:versionNumber"} element={<VersionViewer/>}/>
-            <Route path={"/maps"} element={<MapsPage/>}/>
-            <Route path={"/settings"} element={<SettingsPage/>}/>
+            <Route path="/bs-version/:versionNumber" element={<VersionViewer/>}/>
+            <Route path="/maps" element={<MapsPage/>}/>
+            <Route path="/settings" element={<SettingsPage/>}/>
             <Route path="*" element={<AvailableVersionsList/>}/>
           </Routes>
           <BsmProgressBar/>

src/renderer/components/nav-bar/nav-bar-items/maps-nav-bar-item.component.tsx

@@ -1,15 +1,21 @@
 import { Link } from "react-router-dom";
 import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { PageStateService } from "renderer/services/page-state.service";
 import { NavBarItem } from "./nav-bar-item.component";
 
 export function MapsNavBarItem() {
 
+    const pageState = PageStateService.getInstance();
+
+    const route = useObservable(pageState.route$);
+
     const color = useThemeColor("first-color");
 
     return (
-        <NavBarItem>
-            <Link to={"maps"} className="w-full flex items-center justify-start content-center max-w-full h-[30px]">
+        <NavBarItem isActive={route === "/maps"}>
+            <Link to="maps" className="w-full flex items-center justify-start content-center max-w-full h-[30px]">
                 <BsmIcon className="w-[19px] h-[19px] mr-[5px] shrink-0 brightness-125" icon="bsMapDifficulty" style={{color}}/>
                 <span className="dark:text-gray-200 text-gray-800 font-bold tracking-wide">Maps</span>
             </Link>

src/renderer/services/page-state.service.ts

@@ -1,10 +1,12 @@
-import { BehaviorSubject } from "rxjs";
+import { Location } from "history";
+import { map } from "rxjs/operators";
+import { BehaviorSubject, Observable } from "rxjs";
 
 export class PageStateService {
 
     private static instance: PageStateService;
 
-    private readonly _state$: BehaviorSubject<any> = new BehaviorSubject(undefined);
+    private readonly location$: BehaviorSubject<Location> = new BehaviorSubject(null);;
 
     public static getInstance(): PageStateService{
         if(!PageStateService.instance){ PageStateService.instance = new PageStateService(); }
@@ -13,16 +15,24 @@ export class PageStateService {
 
     private constructor(){}
 
-    public setState(state: unknown){
-        this._state$.next(state);
+    public setLocation(location: Location){
+        this.location$.next(location);
     }
 
     public getState<T = unknown>(): T{
-        return this._state$.value;
+        return this.location$.getValue().state as T;
     }
 
-    public get state$(){
-        return this._state$.asObservable();
+    public getRoute(): string{
+        return this.location$.value.pathname;
+    }
+
+    public get state$(): Observable<unknown>{
+        return this.location$.pipe(map(location => location.state));
+    }
+
+    public get route$(): Observable<string>{
+        return this.location$.pipe(map(location => location.pathname));
     }
 
 }