charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

better sidebar

Browse Source
This commit is contained in:
AntoninoP 2024-08-23 14:44:31 +02:00
parent bc8ad3f096
commit 4a2c4376ae
2 changed files with 72 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/ServerDetails/ServerDetails.jsx
View File

@ -1,4 +1,4 @@
import { useParams, Route, Routes } from 'react-router-dom'; import { useParams, Route, Routes, NavLink } from 'react-router-dom';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Navbar from '../../components/navbar/Navbar'; import Navbar from '../../components/navbar/Navbar';
import ServerProperties from '../ServerProperties/ServerProperties'; import ServerProperties from '../ServerProperties/ServerProperties';
@ -10,91 +10,99 @@ import ServerHistory from '../ServerHistory/ServerHistory';
// import ServerAccess from '../ServerAccess/ServerAccess'; // import ServerAccess from '../ServerAccess/ServerAccess';
import styles from './ServerDetails.module.scss'; import styles from './ServerDetails.module.scss';
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { FaServer, FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa'; import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
import { TbArrowBackUp } from 'react-icons/tb';
import { FiChevronsLeft,FiChevronsRight } from "react-icons/fi";
import NotFoundPage from '../NotFoundPage/NotFoundPage'; import NotFoundPage from '../NotFoundPage/NotFoundPage';
import { NavLink } from 'react-router-dom';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
const ServerDetails = ({ user }) => { const ServerDetails = ({ user }) => {
const { serverName } = useParams(); const { serverName } = useParams();
const location = useLocation(); const location = useLocation();
const initialStatus = location.state?.status || false; const initialStatus = location.state?.status || false;
const [status, setStatus] = useState(initialStatus); const [status, setStatus] = useState(initialStatus);
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
useEffect(() => { useEffect(() => {
if (location.state?.status !== undefined) { if (location.state?.status !== undefined) {
setStatus(location.state.status); setStatus(location.state.status);
} }
}, [location]); }, [location]);
const handleSidebarToggle = () => {
setIsSidebarCollapsed(!isSidebarCollapsed);
};
return ( return (
<> <>
<Navbar user={user} /> <Navbar user={user} />
<div className={styles.container}> <div className={`${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
<div className={styles.sidebar}> <div className={`${styles.sidebar} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
<div className={styles.menu}> <div className={styles.menu}>
<NavLink <div className={styles.toggleButton} onClick={handleSidebarToggle}>
to={`/dashboard`} {isSidebarCollapsed ? <FiChevronsRight /> : <FiChevronsLeft />}
className={`${styles.menuItem} ${styles.extraMargin}`}> </div>
<FaServer /> Retour aux serveurs
</NavLink>
<NavLink <NavLink
to={`/server/${serverName}/options`} to={`/server/${serverName}/options`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaCogs /> Propriétés <FaCogs /> {!isSidebarCollapsed && 'Propriétés'}
</NavLink> </NavLink>
<NavLink <NavLink
state={{ status }} state={{ status }}
to={`/server/${serverName}/console`} to={`/server/${serverName}/console`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaClipboardList /> Console <FaClipboardList /> {!isSidebarCollapsed && 'Console'}
</NavLink> </NavLink>
<NavLink <NavLink
to={`/server/${serverName}/history`} to={`/server/${serverName}/history`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaHistory /> Historique <FaHistory /> {!isSidebarCollapsed && 'Historique'}
</NavLink> </NavLink>
<NavLink <NavLink
to={`/server/${serverName}/players`} to={`/server/${serverName}/players`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaUserFriends /> Joueurs <FaUserFriends /> {!isSidebarCollapsed && 'Joueurs'}
</NavLink> </NavLink>
<NavLink <NavLink
to={`/server/${serverName}/worlds`} to={`/server/${serverName}/worlds`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaGlobe /> Mondes <FaGlobe /> {!isSidebarCollapsed && 'Mondes'}
</NavLink> </NavLink>
<NavLink <NavLink
to={`/server/${serverName}/backups`} to={`/server/${serverName}/backups`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaSave /> Sauvegardes <FaSave /> {!isSidebarCollapsed && 'Sauvegardes'}
</NavLink> </NavLink>
<NavLink <NavLink
to={`/server/${serverName}/access`} to={`/server/${serverName}/access`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaLock /> Accès <FaLock /> {!isSidebarCollapsed && 'Accès'}
</NavLink>
<NavLink
to={`/dashboard`}
className={`${styles.menuItem} ${styles.extraMargin}`}>
<TbArrowBackUp /> {!isSidebarCollapsed && 'Dashboard'}
</NavLink> </NavLink>
</div> </div>
</div> </div>
<div className={styles.serverDetailsContainer}> <div className={styles.serverDetailsContainer}>
<Routes> <Routes>
<Route path="options" element={<ServerProperties user={user} status={status} />} /> <Route path="options" element={<ServerProperties user={user} status={status} />} />
<Route path="console" element={<ServerConsole user={user} status={status} />} /> <Route path="console" element={<ServerConsole user={user} status={status} />} />
<Route path="history" element={<ServerHistory user={user} status={status} />} /> <Route path="history" element={<ServerHistory user={user} status={status} />} />
<Route path="players" element={<h2 >Cette fonctionnalité sera prochainement disponible.</h2>} /> <Route path="players" element={<h2 >Cette fonctionnalité sera prochainement disponible.</h2>} />
<Route path="worlds" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} /> <Route path="worlds" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
<Route path="backups" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} /> <Route path="backups" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
<Route path="access" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} /> <Route path="access" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
<Route path="*" element={<NotFoundPage />} /> <Route path="*" element={<NotFoundPage />} />
</Routes> </Routes>
</div> </div>
</div> </div>
</> </>

80
src/pages/ServerDetails/ServerDetails.module.scss
View File

@ -1,6 +1,7 @@
.container { .container {
display: flex; display: flex;
min-height: calc(100vh - var(--navbar-height)); min-height: calc(100vh - var(--navbar-height));
transition: margin-left 0.3s;
} }
.sidebar { .sidebar {
@ -13,15 +14,27 @@
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
top: var(--navbar-height); top: var(--navbar-height);
color: white; color: white;
transition: width 0.3s;
}
.sidebar.collapsed {
width: 4rem;
}
.menu {
display: flex;
flex-direction: column;
justify-content: flex-center;
margin-top: 3rem;
} }
.menuItem { .menuItem {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.7rem 1rem ; padding: 0.7rem 1rem;
margin: .8rem 0rem; margin: .8rem 0rem;
padding-right: 0rem; padding-right: 0rem;
font-size: 1.5rem; font-size: 1.25rem;
cursor: pointer; cursor: pointer;
color: #D1D5DB; color: #D1D5DB;
text-decoration: none; text-decoration: none;
@ -32,42 +45,29 @@
} }
} }
.menuItem:hover {
color: white;
}
.user {
margin-bottom: 2rem;
}
.user p {
font-size: 1.25rem;
font-weight: bold;
}
.user small {
font-size: 0.875rem;
color: #9CA3AF;
}
.menu {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-top: 2.5rem;
}
.menuItem:hover { .menuItem:hover {
color: white; color: white;
} }
.menuItem svg { .menuItem svg {
margin-right: 1rem; margin-right: 1rem;
font-size: 1.25rem; font-size: 1.8rem;
} }
.toggleButton {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
background-color: #100D25;
border: none;
cursor: pointer;
transition: background-color 0.3s;
margin: 0;
right: 0;
margin-bottom: 1rem;
}
.serverDetailsContainer { .serverDetailsContainer {
margin-top: var(--navbar-height); margin-top: var(--navbar-height);
@ -83,22 +83,6 @@
overflow-y: auto; overflow-y: auto;
} }
.container.collapsed .serverDetailsContainer {
.navbar { margin-left: 5rem; // largeur mode rétracté
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--navbar-height);
background-color: var(--navbar-bg-color);
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} }
.userinfo {
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 1rem;
}