charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-18 05:40:31 +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

46
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 Navbar from '../../components/navbar/Navbar';
import ServerProperties from '../ServerProperties/ServerProperties';
@ -10,9 +10,10 @@ import ServerHistory from '../ServerHistory/ServerHistory';
// import ServerAccess from '../ServerAccess/ServerAccess';
import styles from './ServerDetails.module.scss';
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 { NavLink } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
const ServerDetails = ({ user }) => {
@ -20,7 +21,7 @@ const ServerDetails = ({ user }) => {
const location = useLocation();
const initialStatus = location.state?.status || false;
const [status, setStatus] = useState(initialStatus);
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
useEffect(() => {
if (location.state?.status !== undefined) {
@ -28,59 +29,66 @@ const ServerDetails = ({ user }) => {
}
}, [location]);
const handleSidebarToggle = () => {
setIsSidebarCollapsed(!isSidebarCollapsed);
};
return (
<>
<Navbar user={user} />
<div className={styles.container}>
<div className={styles.sidebar}>
<div className={`${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
<div className={`${styles.sidebar} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
<div className={styles.menu}>
<NavLink
to={`/dashboard`}
className={`${styles.menuItem} ${styles.extraMargin}`}>
<FaServer /> Retour aux serveurs
</NavLink>
<div className={styles.toggleButton} onClick={handleSidebarToggle}>
{isSidebarCollapsed ? <FiChevronsRight /> : <FiChevronsLeft />}
</div>
<NavLink
to={`/server/${serverName}/options`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaCogs /> Propriétés
<FaCogs /> {!isSidebarCollapsed && 'Propriétés'}
</NavLink>
<NavLink
state={{ status }}
to={`/server/${serverName}/console`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaClipboardList /> Console
<FaClipboardList /> {!isSidebarCollapsed && 'Console'}
</NavLink>
<NavLink
to={`/server/${serverName}/history`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaHistory /> Historique
<FaHistory /> {!isSidebarCollapsed && 'Historique'}
</NavLink>
<NavLink
to={`/server/${serverName}/players`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaUserFriends /> Joueurs
<FaUserFriends /> {!isSidebarCollapsed && 'Joueurs'}
</NavLink>
<NavLink
to={`/server/${serverName}/worlds`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaGlobe /> Mondes
<FaGlobe /> {!isSidebarCollapsed && 'Mondes'}
</NavLink>
<NavLink
to={`/server/${serverName}/backups`}
className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
<FaSave /> Sauvegardes
<FaSave /> {!isSidebarCollapsed && 'Sauvegardes'}
</NavLink>
<NavLink
to={`/server/${serverName}/access`}
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>
</div>
</div>

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

@ -1,6 +1,7 @@
.container {
display: flex;
min-height: calc(100vh - var(--navbar-height));
transition: margin-left 0.3s;
}
.sidebar {
@ -13,15 +14,27 @@
height: calc(100vh - var(--navbar-height));
top: var(--navbar-height);
color: white;
transition: width 0.3s;
}
.sidebar.collapsed {
width: 4rem;
}
.menu {
display: flex;
flex-direction: column;
justify-content: flex-center;
margin-top: 3rem;
}
.menuItem {
display: flex;
align-items: center;
padding: 0.7rem 1rem ;
padding: 0.7rem 1rem;
margin: .8rem 0rem;
padding-right: 0rem;
font-size: 1.5rem;
font-size: 1.25rem;
cursor: pointer;
color: #D1D5DB;
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 {
color: white;
}
.menuItem svg {
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 {
margin-top: var(--navbar-height);
@ -83,22 +83,6 @@
overflow-y: auto;
}
.navbar {
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;
.container.collapsed .serverDetailsContainer {
margin-left: 5rem; // largeur mode rétracté
}