changed SideBarMenu to Smartphone with clock

ProjektAdLer · Nov 11, 2024 · 051bdb7 · 051bdb7
1 parent debbc2c
commit 051bdb7
Showing 1 changed file with 90 additions and 4 deletions.
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx
@@ -17,12 +17,22 @@ import tailwindMerge from "../../../Utils/TailwindMerge";
 import HelpDeskButton from "~ReactComponents/GeneralComponents/HelpDeskButton/HelpDeskButton";
 import HelpDeskModal from "~ReactComponents/GeneralComponents/HelpDeskModal/HelpDeskModal";
 import { useTranslation } from "react-i18next";
+import React, { useState, useEffect } from "react";
 
 export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
   const [, controller] = useBuilder<SideBarViewModel, SideBarController>(
     BUILDER_TYPES.IMenuBarBuilder,
   );
   const { t: translate } = useTranslation("learningSpace");
+  const [dateTime, setDateTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
 
   return (
     <CustomDropdown
@@ -39,8 +49,84 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
       initialOpen={false}
       useAsTriggerOnly={true}
     >
-      <StyledContainer className="flex flex-col p-2 rounded-lg w-44 lg:w-64 bg-whitetrans">
-        <div className="flex flex-row items-center">
+      <StyledContainer className="flex flex-col rounded-lg w-44 lg:w-64 bg-white border-8 border-black h-fit">
+        <header className="h-4 flex pb-1 pr-1 justify-end relative">
+          <div className="absolute left-1/2 -translate-x-1/2 top-0 bg-black rounded-b-lg w-24 h-6"></div>
+          <div className="roboto font-bold text-adlerdarkblue">
+            {dateTime.toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </div>
+        </header>
+        <section className="grid grid-cols-3 grid-rows-4 gap-2 mt-2">
+          <div className="flex flex-col items-center">
+            <StyledButton onClick={controller.onMainMenuButtonClicked}>
+              <img src={engineLogo} alt="" />
+            </StyledButton>
+            <p className="pl-2 text-sm font-bold text-adlerdarkblue">
+              {translate("sidebar_mainMenu")}
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <StyledButton onClick={controller.onWorldMenuButtonClicked}>
+              <img src={worldIcon} alt="" />
+            </StyledButton>
+            <p className="pl-2 text-sm font-bold text-adlerdarkblue">
+              {translate("sidebar_learningWorldMenu")}
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <StyledButton onClick={controller.onSpaceMenuButtonClicked}>
+              <img src={spaceMenuIcon} alt="" />
+            </StyledButton>
+            <p className="pl-2 text-sm font-bold text-adlerdarkblue">
+              {translate("sidebar_learningSpaceMenu")}
+            </p>
+          </div>
+
+          {/* <div className="flex flex-row items-center">
+          <StyledButton onClick={controller.onBreakTimeButtonClicked}>
+            <img src={pauseIcon} alt="" />
+          </StyledButton>
+          <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
+            {translate("sidebar_breakTime")}
+          </p>
+        </div> */}
+
+          <div className="flex flex-col items-center">
+            <StyledButton
+              onClick={controller.onControlsExplanationButtonClicked}
+            >
+              <img src={controlsIcon} alt="Steuerungserklärung" />
+            </StyledButton>
+            <p className="pl-2 text-sm font-bold text-adlerdarkblue">
+              {translate("sidebar_controls")}
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <FullscreenSwitch />
+            <p className="pl-2 text-sm font-bold text-adlerdarkblue">
+              {translate("sidebar_fullScreen")}
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <HelpDeskButton />
+            <HelpDeskModal />
+            <p className="pl-2 text-sm font-bold text-adlerdarkblue">
+              {translate("sidebar_help")}
+            </p>
+          </div>
+        </section>
+        <footer className="h-4 flex pb-1 pr-1 justify-end relative">
+          <div className="absolute left-1/2 -translate-x-1/2 bottom-1 bg-white border-4 border-black rounded-full w-12 h-12"></div>
+        </footer>
+
+        {/* <div className="flex flex-row items-center">
           <StyledButton onClick={controller.onMainMenuButtonClicked}>
             <img src={engineLogo} alt="" />
           </StyledButton>
@@ -74,7 +160,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
             {translate("sidebar_breakTime")}
           </p>
-        </div> */}
+        </div>
 
         <div className="flex flex-row items-center">
           <StyledButton onClick={controller.onControlsExplanationButtonClicked}>
@@ -98,7 +184,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
             {translate("sidebar_help")}
           </p>
-        </div>
+        </div> */}
       </StyledContainer>
     </CustomDropdown>
   );