Fix issue with sidebar closing right away on first click

Sidebar items not being rendered caused the currentTab to be undefined,
until the sidebar is opened, and then currentTab is set - which then
caused a useEffect that closes sidebar to fire.
This lead to the sidebar closing right away on the first click.

To fix this the sidebar item state was moved to navigationHook,
and changing the list of items on a sidebar updates currentTab
at the same time to prevent sidebar rendering setting it again.

Plan/react/dashboard/src/hooks/navigationHook.js

@@ -8,8 +8,22 @@ export const NavigationContextProvider = ({children}) => {
     const [updating, setUpdating] = useState(false);
     const [lastUpdate, setLastUpdate] = useState({date: 0, formatted: ""});
 
+    const [items, setItems] = useState([]);
     const [sidebarExpanded, setSidebarExpanded] = useState(window.innerWidth > 1350);
 
+    const setSidebarItems = useCallback((items) => {
+        const pathname = window.location.href;
+        setItems(items);
+        for (const item of items) {
+            if ('/' !== item.href && pathname.includes(item.href)) setCurrentTab(item.name);
+            if (item.contents) {
+                for (const subItem of item.contents) {
+                    if ('/' !== subItem.href && pathname.includes(subItem.href)) setCurrentTab(subItem.name);
+                }
+            }
+        }
+    }, [setItems]);
+
     const requestUpdate = useCallback(() => {
         if (!updating) {
             setUpdateRequested(Date.now());
@@ -32,7 +46,7 @@ export const NavigationContextProvider = ({children}) => {
     const sharedState = {
         currentTab, setCurrentTab,
         lastUpdate, updateRequested, updating, requestUpdate, finishUpdate,
-        sidebarExpanded, setSidebarExpanded, toggleSidebar
+        sidebarExpanded, setSidebarExpanded, toggleSidebar, sidebarItems: items, setSidebarItems
     }
     return (<NavigationContext.Provider value={sharedState}>
             {children}

Plan/react/dashboard/src/views/layout/PlayerPage.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect} from "react";
 import Sidebar from "../../components/navigation/Sidebar";
 import {Outlet, useOutletContext, useParams} from "react-router-dom";
 import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
@@ -17,7 +17,7 @@ import ErrorPage from "./ErrorPage";
 const PlayerPage = () => {
     const {t, i18n} = useTranslation();
 
-    const [sidebarItems, setSidebarItems] = useState([]);
+    const {sidebarItems, setSidebarItems} = useNavigation();
 
     const {identifier} = useParams();
     const {currentTab, updateRequested, finishUpdate} = useNavigation();
@@ -46,7 +46,7 @@ const PlayerPage = () => {
         window.document.title = `Plan | ${player.info.name}`;
 
         finishUpdate(player.timestamp, player.timestamp_f);
-    }, [player, t, i18n, finishUpdate])
+    }, [player, t, i18n, finishUpdate, setSidebarItems])
 
     const {hasPermissionOtherThan} = useAuth();
     const showBackButton = hasPermissionOtherThan('page.player.self');

Plan/react/dashboard/src/views/layout/PlayersPage.js

@@ -15,7 +15,7 @@ const PlayersPage = () => {
     const {isProxy, serverName} = useMetadata();
 
     const [error] = useState(undefined);
-    const [sidebarItems, setSidebarItems] = useState([]);
+    const {sidebarItems, setSidebarItems} = useNavigation();
 
     const {currentTab, setCurrentTab} = useNavigation();
 
@@ -28,7 +28,7 @@ const PlayersPage = () => {
         setSidebarItems(items);
         window.document.title = `Plan | Player list`;
         setCurrentTab('html.label.players')
-    }, [t, i18n, setCurrentTab])
+    }, [t, i18n, setCurrentTab, setSidebarItems])
 
     // const {authRequired, user} = useAuth();
     const showBackButton = true; // TODO

Plan/react/dashboard/src/views/layout/ServerPage.js

@@ -31,7 +31,7 @@ import {ServerExtensionContextProvider, useServerExtensionContext} from "../../h
 
 const ServerSidebar = () => {
     const {t, i18n} = useTranslation();
-    const [sidebarItems, setSidebarItems] = useState([]);
+    const {sidebarItems, setSidebarItems} = useNavigation();
     const {extensionData} = useServerExtensionContext();
     const {authRequired, loggedIn, user} = useAuth();
 
@@ -99,7 +99,7 @@ const ServerSidebar = () => {
 
         setSidebarItems(items);
         window.document.title = `Plan | Server Analysis`;
-    }, [t, i18n, extensionData])
+    }, [t, i18n, extensionData, setSidebarItems])
 
     return (
         <Sidebar items={sidebarItems} showBackButton={showBackButton}/>