polish

frontend/app/src/components/HeaderComponent.tsx

@@ -6,7 +6,7 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 import { Layout, Menu, MenuProps, Popover } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
 import { StorePrototype, logOut, setLanguage, store } from "../config/store";
@@ -24,7 +24,6 @@ const HeaderComponent = () => {
 
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [languageSelectOpen, setLanguageSelectOpen] = useState(false);
   const currentLanguage = useSelector(
     (state: StorePrototype) => state.settings.language
   );
@@ -33,6 +32,14 @@ const HeaderComponent = () => {
     (state: StorePrototype) => state.auth.user
   );
 
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  useEffect(() => {
+    const keys = [];
+    user && keys.push("login");
+    currentLanguage && keys.push(currentLanguage);
+    setSelectedKeys(keys);
+  }, [user, currentLanguage]);
+
   const languageSelectItems: MenuProps["items"] = [
     {
       label: "English",
@@ -84,26 +91,11 @@ const HeaderComponent = () => {
       disabled: !user,
     },
     {
-      label: (
-        <Popover
-          trigger="click"
-          open={languageSelectOpen}
-          onOpenChange={(isOpen) => setLanguageSelectOpen(isOpen)}
-          content={
-            <Menu
-              theme="dark"
-              mode="vertical"
-              items={languageSelectItems}
-              selectedKeys={currentLanguage ? [currentLanguage] : undefined}
-            />
-          }
-        >
-          {tr("Language")}
-        </Popover>
-      ),
+      label: tr("Language"),
       key: "language",
       icon: <GlobalOutlined />,
-      onClick: () => setLanguageSelectOpen(true),
+      children: languageSelectItems,
+      style: { background: "#001529" },
     },
     {
       label: user ? (
@@ -133,8 +125,10 @@ const HeaderComponent = () => {
           mode="horizontal"
           items={items}
           style={{ flex: 1, minWidth: 0 }}
-          selectedKeys={[]}
+          selectedKeys={selectedKeys}
           className="header-container"
+          triggerSubMenuAction="click"
+          defaultActiveFirst={false}
         />
       </Header>
     </>