Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-25 08:19:40 +02:00
Code Issues Releases Activity

feat(sidebar): update menu structure [EE-5666] (#10418)

Browse source
This commit is contained in:
Ali 2023-10-09 19:23:12 +01:00 • committed by GitHub
parent b468070945
commit a0dbabcc5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 519 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

74
app/react/sidebar/Sidebar.tsx
View file

@ -12,12 +12,22 @@ import { SettingsSidebar } from './SettingsSidebar';
import { SidebarItem } from './SidebarItem';
import { Footer } from './Footer';
import { Header } from './Header';
import { SidebarProvider } from './useSidebarState';
import { SidebarProvider, useSidebarState } from './useSidebarState';
import { UpgradeBEBannerWrapper } from './UpgradeBEBanner';
export function Sidebar() {
return (
/* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
<SidebarProvider>
<InnerSidebar />
</SidebarProvider>
);
}
function InnerSidebar() {
const { isAdmin, user } = useUser();
const isTeamLeader = useIsTeamLeader(user) as boolean;
const { isOpen } = useSidebarState();
const settingsQuery = usePublicSettings();
@ -28,37 +38,41 @@ export function Sidebar() {
const { LogoURL } = settingsQuery.data;
return (
/* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
<SidebarProvider>
<div className={clsx(styles.root, 'sidebar flex flex-col')}>
<UpgradeBEBannerWrapper />
<nav
<div className={clsx(styles.root, 'sidebar flex flex-col')}>
<UpgradeBEBannerWrapper />
<nav
className={clsx(
styles.nav,
'flex flex-1 flex-col overflow-y-auto py-5 pl-5',
{ 'pr-5': isOpen }
)}
aria-label="Main"
>
<Header logo={LogoURL} />
{/* negative margin + padding -> scrollbar won't hide the content */}
<div
className={clsx(
styles.nav,
'flex flex-1 flex-col overflow-y-auto p-5'
styles.navListContainer,
'mt-6 flex-1 overflow-y-auto [color-scheme:light] be:[color-scheme:dark] th-dark:[color-scheme:dark] th-highcontrast:[color-scheme:dark]',
{ 'pr-5 -mr-5': isOpen }
)}
aria-label="Main"
>
<Header logo={LogoURL} />
{/* negative margin + padding -> scrollbar won't hide the content */}
<div className="-mr-4 mt-6 flex-1 overflow-y-auto pr-4">
<ul className="space-y-9">
<SidebarItem
to="portainer.home"
icon={Home}
label="Home"
data-cy="portainerSidebar-home"
/>
<EnvironmentSidebar />
{isAdmin && <EdgeComputeSidebar />}
<SettingsSidebar isAdmin={isAdmin} isTeamLeader={isTeamLeader} />
</ul>
</div>
<div className="mt-auto pt-8">
<Footer />
</div>
</nav>
</div>
</SidebarProvider>
<ul className={clsx('space-y-5', { 'w-[32px]': !isOpen })}>
<SidebarItem
to="portainer.home"
icon={Home}
label="Home"
data-cy="portainerSidebar-home"
/>
<EnvironmentSidebar />
{isAdmin && <EdgeComputeSidebar />}
<SettingsSidebar isAdmin={isAdmin} isTeamLeader={isTeamLeader} />
</ul>
</div>
<div className="mt-auto pt-8">
<Footer />
</div>
</nav>
</div>
);
}