From 165f02a3a42d94e809200ef7c2a86c1566542c8e Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Fri, 5 Jul 2024 13:28:00 +0300
Subject: [PATCH] fix: sidebar update active when navigated via command menu.
 (#7545)

Currently, if the location changes, it does not update the active item.
I added useEffect to update the active item.

This is required when the user navigates via the command menu.
---
 .../MainLayout/NavigationSidebar/NavigationSidebar.tsx      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index 614522f83d..5953626a51 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -1,5 +1,5 @@
 import { Box, styled } from '@mui/material';
-import { type FC, useState } from 'react';
+import { type FC, useState, useEffect } from 'react';
 import { useNavigationMode } from './useNavigationMode';
 import { ShowAdmin, ShowHide } from './ShowHide';
 import { useRoutes } from './useRoutes';
@@ -67,6 +67,10 @@ export const NavigationSidebar = () => {
     const { lastViewed: lastViewedFlags } = useLastViewedFlags();
     const showRecentFlags = mode === 'full' && lastViewedFlags.length > 0;
 
+    useEffect(() => {
+        setActiveItem(initialPathname);
+    }, [initialPathname]);
+
     return (
         <StretchContainer>
             <NewInUnleash mode={mode} onMiniModeClick={() => setMode('full')} />