Menu state in admin not saved after page refresh (#2829)

* Menu state in admin not saved after page refresh

* fix openKey

* retry ci

* retry ci

* retry ci

web/components/admin/MainLayout.tsx

@@ -147,85 +147,85 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
   const integrationsMenu = [
     {
       label: <Link href="/admin/webhooks">Webhooks</Link>,
-      key: 'webhooks',
+      key: '/admin/webhooks',
     },
     {
       label: <Link href="/admin/access-tokens">Access Tokens</Link>,
-      key: 'access-tokens',
+      key: '/admin/access-tokens',
     },
     {
       label: <Link href="/admin/actions">External Actions</Link>,
-      key: 'actions',
+      key: '/admin/actions',
     },
   ];
 
   const chatMenu = [
     {
       label: <Link href="/admin/chat/messages">Messages</Link>,
-      key: 'messages',
+      key: '/admin/chat/messages',
     },
     {
       label: <Link href="/admin/chat/users">Users</Link>,
-      key: 'chat-users',
+      key: '/admin/chat/users',
     },
     {
       label: <Link href="/admin/chat/emojis">Emojis</Link>,
-      key: 'emojis',
+      key: '/admin/chat/emojis',
     },
   ];
 
   const utilitiesMenu = [
     {
       label: <Link href="/admin/hardware-info">Hardware</Link>,
-      key: 'hardware-info',
+      key: '/admin/hardware-info',
     },
     {
       label: <Link href="/admin/stream-health">Stream Health</Link>,
-      key: 'stream-health',
+      key: '/admin/stream-health',
     },
     {
       label: <Link href="/admin/logs">Logs</Link>,
-      key: 'logs',
+      key: '/admin/logs',
     },
     federationEnabled && {
       label: <Link href="/admin/federation/actions">Social Actions</Link>,
-      key: 'federation-activities',
+      key: '/admin/federation/actions',
     },
   ];
 
   const configurationMenu = [
     {
       label: <Link href="/admin/config/general">General</Link>,
-      key: 'config-public-details',
+      key: '/admin/config/general',
     },
     {
       label: <Link href="/admin/config/server">Server Setup</Link>,
-      key: 'config-server',
+      key: '/admin/config/server',
     },
     {
       label: <Link href="/admin/config-video">Video</Link>,
-      key: 'config-video',
+      key: '/admin/config-video',
     },
     {
       label: <Link href="/admin/config-chat">Chat</Link>,
-      key: 'config-chat',
+      key: '/admin/config-chat',
     },
     {
       label: <Link href="/admin/config-federation">Social</Link>,
-      key: 'config-federation',
+      key: '/admin/config-federation',
     },
     {
       label: <Link href="/admin/config-notify">Notifications</Link>,
-      key: 'config-notify',
+      key: '/admin/config-notify',
     },
   ];
 
   const menuItems = [
-    { label: <Link href="/admin">Home</Link>, icon: <HomeOutlined />, key: 'home' },
+    { label: <Link href="/admin">Home</Link>, icon: <HomeOutlined />, key: '/admin' },
     {
       label: <Link href="/admin/viewer-info">Viewers</Link>,
       icon: <LineChartOutlined />,
-      key: 'viewer-info',
+      key: '/admin/viewer-info',
     },
     !chatDisabled && {
       label: <span>Chat &amp; Users</span>,
@@ -234,7 +234,7 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       key: 'chat-and-users',
     },
     federationEnabled && {
-      key: 'fediverse-followers',
+      key: '/admin/federation/followers',
       label: <Link href="/admin/federation/followers">Followers</Link>,
       icon: (
         <span
@@ -267,15 +267,30 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       children: integrationsMenu,
     },
     upgradeVersion && {
-      key: 'upgrade',
+      key: '/admin/upgrade',
       label: <Link href="/admin/upgrade">{upgradeMessage}</Link>,
     },
     {
-      key: 'help',
+      key: '/admin/help',
       label: <Link href="/admin/help">Help</Link>,
       icon: <QuestionCircleOutlined />,
     },
   ];
+
+  const [openKeys, setOpenKeys] = useState(openMenuItems);
+
+  const onOpenChange = (keys: string[]) => {
+    setOpenKeys(keys);
+  };
+
+  useEffect(() => {
+    menuItems.forEach(item =>
+      item?.children?.forEach(child => {
+        if (child?.key === route) setOpenKeys([...openMenuItems, item.key]);
+      }),
+    );
+  }, []);
+
   return (
     <Layout id="admin-page" className={appClass}>
       <Head>
@@ -295,11 +310,12 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
           <span className="title-label">Owncast Admin</span>
         </h1>
         <Menu
-          defaultSelectedKeys={[route.substring(1) || 'home']}
-          defaultOpenKeys={openMenuItems}
           mode="inline"
           className="menu-container"
           items={menuItems}
+          selectedKeys={[route || '/admin']}
+          openKeys={openKeys}
+          onOpenChange={onOpenChange}
         />
       </Sider>