forked from tpd94/CDRM-Project
v1.1 frontend
- Rollback stop
This commit is contained in:
parent
19c9f0b898
commit
73723741b5
@ -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);
|
||||
|
||||
// Function to toggle the side menu
|
||||
const handleMenuToggle = () => {
|
||||
setIsMenuOpen(prevState => !prevState);
|
||||
};
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false); // Track if the menu is open
|
||||
|
||||
return (
|
||||
<div id="appcontainer" className="flex flex-row w-full h-full bg-black">
|
||||
<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"
|
||||
>
|
||||
{/* The SideMenu should be visible when isMenuOpen is true */}
|
||||
<SideMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
|
||||
|
||||
<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
|
||||
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"
|
||||
>
|
||||
<NavBarMain handleMenuToggle={handleMenuToggle} />
|
||||
<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">
|
||||
<NavBarMain setIsMenuOpen={setIsMenuOpen} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
function HomePage () {
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full">
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomePage
|
||||
@ -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>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import { useState } from 'react';
|
||||
import hamburgerIcon from '../assets/icons/hamburger.svg';
|
||||
import { useState } from "react";
|
||||
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}>
|
||||
|
||||
10
cdrm-frontend/src/components/Pages/HomePage.jsx
Normal file
10
cdrm-frontend/src/components/Pages/HomePage.jsx
Normal file
@ -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
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user