adaptivity for moble devices

frontend/app/src/components/HeaderComponent.tsx

@@ -2,11 +2,12 @@ import {
   DesktopOutlined,
   GlobalOutlined,
   LogoutOutlined,
+  MenuOutlined,
   SettingOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Layout, Menu, MenuProps, Popover } from "antd";
-import React, { useEffect, useState } from "react";
+import { Drawer, Layout, Menu, MenuProps, Popover } from "antd";
+import React, { Children, useEffect, useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
 import { StorePrototype, logOut, setLanguage, store } from "../config/store";
@@ -14,6 +15,7 @@ import { useSelector } from "react-redux";
 import tr from "../config/translation";
 import { Link, useNavigate } from "react-router-dom";
 import logo from "../../static/android-chrome-192x192.png";
+import { isMobile } from "react-device-detect";
 
 const { Header } = Layout;
 
@@ -23,7 +25,8 @@ const HeaderComponent = () => {
   const navigate = useNavigate();
 
   const [authModalOpen, setAuthModalOpen] = useState(false);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
   const currentLanguage = useSelector(
     (state: StorePrototype) => state.settings.language
   );
@@ -98,21 +101,51 @@ const HeaderComponent = () => {
       style: { background: "#001529" },
     },
     {
-      label: user ? (
-        <Popover
-          trigger="click"
-          open={userMenuOpen}
-          onOpenChange={(isOpen) => setUserMenuOpen(isOpen)}
-          content={<Menu theme="dark" mode="vertical" items={userMenuItems} />}
-        >
-          {user.username}
-        </Popover>
-      ) : (
-        tr("Log in")
-      ),
+      label: user ? user.username : tr("Log in"),
       key: "login",
       icon: <UserOutlined />,
-      onClick: () => (user ? setUserMenuOpen(true) : setAuthModalOpen(true)),
+      onClick: () => setAuthModalOpen(true),
+      ...(user ? { children: userMenuItems } : {}),
+    },
+  ];
+
+  const mobileItems: MenuProps["items"] = [
+    {
+      label: (
+        <div className="header-logo">
+          <img className="logo" src={logo} alt="logo" />
+        </div>
+      ),
+      key: "logo",
+      onClick: () => navigate("/"),
+    },
+    {
+      icon: <MenuOutlined />,
+      key: "drawer",
+      onClick: () => setDrawerOpen(true),
+    },
+  ];
+
+  const drawerItems: MenuProps["items"] = [
+    {
+      label: <Link to={user ? "/dashboard" : "#"}>{tr("Dashboard")}</Link>,
+      key: "dashboard",
+      icon: <DesktopOutlined />,
+      disabled: !user,
+    },
+    {
+      label: tr("Language"),
+      key: "language",
+      icon: <GlobalOutlined />,
+      children: languageSelectItems,
+      style: { background: "#001529" },
+    },
+    {
+      label: user ? user.username : tr("Log in"),
+      key: "login",
+      icon: <UserOutlined />,
+      onClick: () => setAuthModalOpen(true),
+      ...(user ? { children: userMenuItems } : {}),
     },
   ];
 
@@ -123,14 +156,29 @@ const HeaderComponent = () => {
         <Menu
           theme="dark"
           mode="horizontal"
-          items={items}
+          items={isMobile ? mobileItems : items}
           style={{ flex: 1, minWidth: 0 }}
           selectedKeys={selectedKeys}
           className="header-container"
           triggerSubMenuAction="click"
           defaultActiveFirst={false}
+          overflowedIndicator={<MenuOutlined />}
         />
       </Header>
+      <Drawer
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        style={{ marginLeft: "3rem", paddingRight: "3rem" }}
+      >
+        <Menu
+          theme="dark"
+          mode="inline"
+          items={drawerItems}
+          selectedKeys={selectedKeys}
+          triggerSubMenuAction="click"
+          defaultActiveFirst={false}
+        />
+      </Drawer>
     </>
   );
 };