diff --git a/frontend/app/src/components/HeaderComponent.tsx b/frontend/app/src/components/HeaderComponent.tsx index 6b754f7..ff3ca2c 100644 --- a/frontend/app/src/components/HeaderComponent.tsx +++ b/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([]); + 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: ( - setLanguageSelectOpen(isOpen)} - content={ - - } - > - {tr("Language")} - - ), + label: tr("Language"), key: "language", icon: , - 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} /> diff --git a/frontend/app/src/config/translationMap.json b/frontend/app/src/config/translationMap.json index ae2d4a7..08a58c8 100644 --- a/frontend/app/src/config/translationMap.json +++ b/frontend/app/src/config/translationMap.json @@ -70,5 +70,8 @@ }, "You have no queues! Create one here": { "ru": "У вас нет очередей! Создайте новую" + }, + "Log in first": { + "ru": "Сначала войдите в аккаунт" } } \ No newline at end of file diff --git a/frontend/app/src/pages/AppRoutes.tsx b/frontend/app/src/pages/AppRoutes.tsx index 3ddd5e4..d561f96 100644 --- a/frontend/app/src/pages/AppRoutes.tsx +++ b/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 ( {children} } /> - : } - /> + } /> } /> diff --git a/frontend/app/src/pages/DashboardPage.tsx b/frontend/app/src/pages/DashboardPage.tsx index 5ea0d15..a632713 100644 --- a/frontend/app/src/pages/DashboardPage.tsx +++ b/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 ; + const user = useSelector((state: StorePrototype) => state.auth.user); + return user ? : {tr("Log in first")}; }; export default DashboardPage;