show logo on mobile

src/App.js

@@ -1,7 +1,7 @@
 import "antd/dist/reset.css";
 import "./App.css";
 import Login from "./Pages/Login";
-import { Layout, Space, Spin, Typography } from "antd";
+import { Layout, Spin, Typography } from "antd";
 import { Constants, UseUserSession, myFetch } from "./utils";
 import DashboardLayout from "./Components/DashboardLayout";
 import SideBarProvider from "./Contexts/SideBarContext";
@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 import StoresProvider from "./Contexts/StoresContext";
 import { clarity } from "react-microsoft-clarity";
 import { useTranslation } from "react-i18next";
-import { ReactComponent as ZeitAdler } from "./ZeitAdler.svg";
+import MyAppLogo from "./Components/MyAppLogo";
 
 export function Loading() {
   const { t } = useTranslation();
@@ -28,7 +28,7 @@ export function Loading() {
         height: "100vh",
       }}
     >
-      <ZeitAdler
+      <MyAppLogo
         style={{
           width: 320,
           height: 90,

src/Components/Header/index.js

@@ -1,6 +1,8 @@
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import { Header } from "antd/es/layout/layout";
+import MyAppLogo from "../MyAppLogo";
+import { BreakpointLgWidth } from "../../utils";
 
 export default function HeaderMenu({
   isSideMenuCollapsed,
@@ -28,6 +30,14 @@ export default function HeaderMenu({
         onClick={() => setIsSideMenuCollapsed(!isSideMenuCollapsed)}
         style={{ fontSize: "16px", width: 64, height: 64 }}
       />
+
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        {window.document.body.clientWidth < BreakpointLgWidth && (
+          <MyAppLogo height={60} width={200} />
+        )}
+      </div>
+
+      <div style={{ width: 64, height: 64 }} />
     </Header>
   );
 }

src/Components/MyAppLogo/index.js

@@ -0,0 +1,5 @@
+import { ReactComponent as ZeitAdler } from "../../ZeitAdler.svg";
+
+export default function MyAppLogo({ ...props }) {
+  return <ZeitAdler {...props} />;
+}

src/Components/SideMenu/index.js

@@ -17,7 +17,7 @@ import { BreakpointLgWidth, Constants, isDevelopmentEnv } from "../../utils";
 import { useTranslation } from "react-i18next";
 import { useSideBarContext } from "../../Contexts/SideBarContext";
 import { useStoresContext } from "../../Contexts/StoresContext";
-import { ReactComponent as ZeitAdler } from "../../ZeitAdler.svg";
+import MyAppLogo from "../MyAppLogo";
 
 export function SideMenuContent({
   setIsSideMenuCollapsed,
@@ -181,7 +181,7 @@ export function SideMenuContent({
             padding: 10,
           }}
         >
-          <ZeitAdler width={200} height={60} />
+          <MyAppLogo width={200} height={60} />
 
           {isDevelopmentEnv() && (
             <p style={{ color: "#6878d6", fontWeight: "bold" }}>DEV</p>

src/Pages/Login/index.js

@@ -13,7 +13,7 @@ import {
   MyUsernameFormInput,
 } from "../../Components/MyFormInputs";
 import { useTranslation } from "react-i18next";
-import { ReactComponent as ZeitAdler } from "../../ZeitAdler.svg";
+import MyAppLogo from "../../Components/MyAppLogo";
 
 export default function Login() {
   const { t } = useTranslation();
@@ -95,7 +95,7 @@ export default function Login() {
             justifyContent: "center",
           }}
         >
-          <ZeitAdler height={80} />
+          <MyAppLogo height={80} />
         </div>
 
         <Tabs