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>
     </>

frontend/app/src/config/translationMap.json

@@ -70,5 +70,8 @@
     },
     "You have no queues! Create one here": {
         "ru": "У вас нет очередей! Создайте новую"
+    },
+    "Log in first": {
+        "ru": "Сначала войдите в аккаунт"
     }
 }

frontend/app/src/pages/AppRoutes.tsx

@@ -16,17 +16,12 @@ const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
   store.dispatch(loadLanguage());
 
-  const user = useSelector((state: StorePrototype) => state.auth.user);
-
   return (
     <BrowserRouter>
       {children}
       <Routes>
         <Route path="/" element={<MainPage />} />
-        <Route
-          path="/dashboard"
-          element={user ? <DashboardPage /> : <NotFoundPage />}
-        />
+        <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>

frontend/app/src/pages/DashboardPage.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 import "./styles.css";
 import QueuesList from "../components/queue/QueuesList";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../config/store";
+import tr from "../config/translation";
+import Title from "antd/es/typography/Title";
 
 const DashboardPage = () => {
-  return <QueuesList />;
+  const user = useSelector((state: StorePrototype) => state.auth.user);
+  return user ? <QueuesList /> : <Title level={2}>{tr("Log in first")}</Title>;
 };
 
 export default DashboardPage;