adaptivity for moble devices

frontend/app/package-lock.json

@@ -13,6 +13,7 @@
         "antd": "^5.15.4",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
         "react-redux": "^9.1.0",
         "react-router-dom": "^6.22.3"
@@ -3967,6 +3968,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-device-detect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
+      "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==",
+      "dependencies": {
+        "ua-parser-js": "^1.0.33"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0",
+        "react-dom": ">= 0.14.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4646,6 +4659,28 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

frontend/app/package.json

@@ -13,6 +13,7 @@
     "antd": "^5.15.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3"

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>
     </>
   );
 };