v1.1 frontend

- Rollback stop

cdrm-frontend/src/App.jsx

@@ -1,43 +1,33 @@
-import HomePage from "./components/HomePage";
+import { useState } from "react";
+import Home from "./components/Pages/HomePage";
 import NavBar from "./components/NavBar";
 import NavBarMain from "./components/NavBarMain";
-import SideMenu from "./components/SideMenu"; // New side menu component
+import SideMenu from "./components/SideMenu"; // Add this import
 import { Routes, Route } from "react-router-dom";
-import { useState } from 'react';
 
 function App() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false); // Track if the menu is open
-
-  // Function to toggle the side menu
-  const handleMenuToggle = () => {
-    setIsMenuOpen(prevState => !prevState);
-  };
 
   return (
     <div id="appcontainer" className="flex flex-row w-full h-full bg-black">
-      <div
+      {/* The SideMenu should be visible when isMenuOpen is true */}
-        id="navbarcontainer"
+      <SideMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
-        className="hidden lg:flex lg:w-2xs bg-gray-950/55 border-r border-white/5 shadow-lg shadow-blue-900/50"
+
-      >
+      <div id="navbarcontainer" className="hidden lg:flex lg:w-2xs bg-gray-950/55 border-r border-white/5 shadow-lg shadow-blue-900/50">
         <NavBar />
       </div>
 
       <div id="maincontainer" className="w-full lg:w-5/6 bg-gray-950/50 flex flex-col">
-        <div
+        <div id="navbarmaincontainer" className="w-full lg:hidden h-16 bg-gray-950/10 border-b border-white/5 shadow-md shadow-blue-900/35 sticky top-0 z-10">
-          id="navbarmaincontainer"
+          <NavBarMain setIsMenuOpen={setIsMenuOpen} />
-          className="w-full lg:hidden h-16 bg-gray-950/10 border-b border-white/5 shadow-md shadow-blue-900/35 sticky top-0 z-10"
-        >
-          <NavBarMain handleMenuToggle={handleMenuToggle} />
         </div>
 
         <div id="maincontentcontainer" className="w-full grow">
           <Routes>
-            <Route path="/" element={<HomePage />} />
+            <Route path="/" element={<Home />} />
           </Routes>
         </div>
       </div>
-
-      <SideMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} /> {/* Pass setIsMenuOpen as a prop */}
     </div>
   );
 }

cdrm-frontend/src/components/HomePage.jsx

@@ -1,10 +0,0 @@
-function HomePage () {
-
-
-    return (
-        <div className="flex flex-col w-full h-full">
-        </div>
-    )
-}
-
-export default HomePage

cdrm-frontend/src/components/NavBar.jsx

@@ -11,7 +11,7 @@ function NavBar() {
     return (
         <div className="flex flex-col w-full h-full bg-white/1">
             <div>
-                <p className='text-white text-2xl font-bold p-3 text-center mb-5 bg-black/25'>
+                <p className='text-white text-2xl font-bold p-3 text-center mb-5'>
                     <a href='/'>
                         CDRM-Project
                     </a>

cdrm-frontend/src/components/NavBarMain.jsx

@@ -1,7 +1,11 @@
-import { useState } from 'react';
+import { useState } from "react";
-import hamburgerIcon from '../assets/icons/hamburger.svg';
+import hamburgerIcon from "../assets/icons/hamburger.svg";
+
+function NavBarMain({ setIsMenuOpen }) {
+  const handleMenuToggle = () => {
+    setIsMenuOpen((prevState) => !prevState); // Toggle the menu state
+  };
 
-function NavBarMain({ handleMenuToggle }) {  // Receive handleMenuToggle as a prop
   return (
     <div className="flex flex-row w-full h-full bg-white/1">
       <button className="w-24 p-4" onClick={handleMenuToggle}>

cdrm-frontend/src/components/Pages/HomePage.jsx

@@ -0,0 +1,10 @@
+function HomePage () {
+
+
+    return (
+        <div className="flex flex-col w-full h-full overflow-y-auto p-4">
+        </div>
+    )
+}
+
+export default HomePage

cdrm-frontend/src/components/SideMenu.jsx

@@ -1,8 +1,12 @@
+import { NavLink } from 'react-router-dom';
 import closeIcon from '../assets/icons/close.svg';
+import homeIcon from '../assets/icons/home.svg';
+import cacheIcon from '../assets/icons/cache.svg';
+import apiIcon from '../assets/icons/api.svg';
+import testPlayerIcon from '../assets/icons/testplayer.svg';
 import discordIcon from '../assets/icons/discord.svg';
 import telegramIcon from '../assets/icons/telegram.svg';
 import giteaIcon from '../assets/icons/gitea.svg';
-import { NavLink } from 'react-router-dom';
 
 function SideMenu({ isMenuOpen, setIsMenuOpen }) {
   return (
@@ -13,7 +17,7 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
         } z-50`}
         style={{ transitionDuration: '0.3s' }}
       >
-        <div className="grow flex flex-col bg-gray-950/55">
+        <div className="flex flex-col bg-gray-950/55 h-full">
           <div className="h-16 w-full border-b-2 border-white/5 flex flex-row">
             <div className="w-1/4 h-full"></div>
             <p className="grow text-white md:text-2xl font-bold text-center flex items-center justify-center p-4">
@@ -29,25 +33,26 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
             </div>
           </div>
 
-          <div className="overflow-y-auto grow flex flex-col p-5 w-full space-y-2">
+          <div className="overflow-y-auto flex flex-col p-5 w-full space-y-2 flex-grow">
             <NavLink
               to="/"
               className={({ isActive }) =>
-                `flex flex-row p-3 border-l-4 ${
+                `flex flex-row items-center gap-3 p-3 border-l-4 ${
                   isActive
-                    ? 'border-l-sky-500/50 bg-black/50 text-white'
+                    ? 'border-l-4 border-l-sky-500/50 bg-black/50 text-white'
                     : 'border-transparent hover:border-l-sky-500/50 hover:bg-white/5 text-white/80'
                 }`
               }
               onClick={() => setIsMenuOpen(false)}
             >
-              Home
+              <img src={homeIcon} alt="Home" className="w-5 h-5" />
+              <span className="text-lg">Home</span>
             </NavLink>
 
             <NavLink
               to="/cache"
               className={({ isActive }) =>
-                `flex flex-row p-3 border-l-4 ${
+                `flex flex-row items-center gap-3 p-3 border-l-4 ${
                   isActive
                     ? 'border-l-emerald-500/50 bg-black/50 text-white'
                     : 'border-transparent hover:border-l-emerald-500/50 hover:bg-white/5 text-white/80'
@@ -55,13 +60,14 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
               }
               onClick={() => setIsMenuOpen(false)}
             >
-              Cache
+              <img src={cacheIcon} alt="Cache" className="w-5 h-5" />
+              <span className="text-lg">Cache</span>
             </NavLink>
 
             <NavLink
               to="/api"
               className={({ isActive }) =>
-                `flex flex-row p-3 border-l-4 ${
+                `flex flex-row items-center gap-3 p-3 border-l-4 ${
                   isActive
                     ? 'border-l-indigo-500/50 bg-black/50 text-white'
                     : 'border-transparent hover:border-l-indigo-500/50 hover:bg-white/5 text-white/80'
@@ -69,13 +75,14 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
               }
               onClick={() => setIsMenuOpen(false)}
             >
-              API
+              <img src={apiIcon} alt="API" className="w-5 h-5" />
+              <span className="text-lg">API</span>
             </NavLink>
 
             <NavLink
               to="/testplayer"
               className={({ isActive }) =>
-                `flex flex-row p-3 border-l-4 ${
+                `flex flex-row items-center gap-3 p-3 border-l-4 ${
                   isActive
                     ? 'border-l-rose-700/50 bg-black/50 text-white'
                     : 'border-transparent hover:border-l-rose-700/50 hover:bg-white/5 text-white/80'
@@ -83,34 +90,47 @@ function SideMenu({ isMenuOpen, setIsMenuOpen }) {
               }
               onClick={() => setIsMenuOpen(false)}
             >
-              Test Player
+              <img src={testPlayerIcon} alt="Test Player" className="w-5 h-5" />
+              <span className="text-lg">Test Player</span>
             </NavLink>
           </div>
 
-          <div className="h-16 self-end w-full flex flex-row bg-white/5">
+          <div className="h-16 self-end w-full flex flex-row bg-black/5">
             <a
               href="https://discord.cdrm-project.com/"
               target="_blank"
               rel="noopener noreferrer"
-              className="w-1/3 h-full flex items-center justify-center hover:bg-blue-950"
+              className="w-1/3 h-full flex items-center justify-center hover:bg-blue-950 group"
             >
-              <img src={discordIcon} alt="Discord" className="w-full h-full p-1 cursor-pointer" />
+              <img
+                src={discordIcon}
+                alt="Discord"
+                className="w-full h-2/3 p-1 cursor-pointer group-hover:animate-bounce"
+              />
             </a>
             <a
               href="https://telegram.cdrm-project.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="w-1/3 h-full flex items-center justify-center hover:bg-blue-400"
+              className="w-1/3 h-full flex items-center justify-center hover:bg-blue-400 group"
             >
-              <img src={telegramIcon} alt="Telegram" className="w-full h-full p-1 cursor-pointer" />
+              <img
+                src={telegramIcon}
+                alt="Telegram"
+                className="w-full h-2/3 p-1 cursor-pointer group-hover:animate-bounce"
+              />
             </a>
             <a
               href="https://cdm-project.com/tpd94/cdrm-project"
               target="_blank"
               rel="noopener noreferrer"
-              className="w-1/3 h-full flex items-center justify-center hover:bg-green-700"
+              className="w-1/3 h-full flex items-center justify-center hover:bg-green-700 group"
             >
-              <img src={giteaIcon} alt="Gitea" className="w-full h-full p-1 cursor-pointer" />
+              <img
+                src={giteaIcon}
+                alt="Gitea"
+                className="w-full h-2/3 p-1 cursor-pointer group-hover:animate-bounce"
+              />
             </a>
           </div>
         </div>