sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make sidebar toggle button to only appear in sidebar pages

This commit is contained in:
Angelillo15 2023-10-17 21:49:14 +02:00
parent 7935e9f4a8
commit 5694e2ae0c
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
resources/scripts/components/NavigationBar.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { Link, NavLink } from 'react-router-dom'; import { Link, NavLink, useLocation } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; import { faBars, faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { useStoreState } from 'easy-peasy'; import { useStoreState } from 'easy-peasy';
@ -38,14 +38,22 @@ const onTriggerNavButton = () => {
if (sidebar) { if (sidebar) {
sidebar.classList.toggle('active-nav'); sidebar.classList.toggle('active-nav');
} }
console.log('triggered');
}; };
export default () => { export default () => {
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin); const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin);
const [isLoggingOut, setIsLoggingOut] = useState(false); const [isLoggingOut, setIsLoggingOut] = useState(false);
const location = useLocation();
const [showSidebar, setShowSidebar] = useState(false);
useEffect(() => {
if (location.pathname.startsWith('/server') || location.pathname.startsWith('/account')) {
setShowSidebar(true);
return;
}
setShowSidebar(false);
}, [location.pathname]);
const onTriggerLogout = () => { const onTriggerLogout = () => {
setIsLoggingOut(true); setIsLoggingOut(true);
@ -59,7 +67,13 @@ export default () => {
<div className={'bg-neutral-700 shadow-md overflow-x-auto topbar'}> <div className={'bg-neutral-700 shadow-md overflow-x-auto topbar'}>
<SpinnerOverlay visible={isLoggingOut} /> <SpinnerOverlay visible={isLoggingOut} />
<div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}> <div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}>
<FontAwesomeIcon icon={faBars} className='navbar-button' onClick={onTriggerNavButton}></FontAwesomeIcon> {showSidebar && (
<FontAwesomeIcon
icon={faBars}
className='navbar-button'
onClick={onTriggerNavButton}
></FontAwesomeIcon>
)}
<div id={'logo'} className={'flex-1'}> <div id={'logo'} className={'flex-1'}>
<Link <Link