Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

feat: admin menu: unleash logo in header - links to dashboard (#9676)

Browse Source
This commit is contained in:
David Leek 2025-04-02 08:34:43 +02:00 committed by GitHub
parent f6e786a6c0
commit 18346d1107
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/component/menu/Header/Header.tsx
View File

@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles'; import { type Theme, useTheme } from '@mui/material/styles';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
AppBar, AppBar,
@ -16,7 +16,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import MenuBookIcon from '@mui/icons-material/MenuBook'; import MenuBookIcon from '@mui/icons-material/MenuBook';
import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHoliday.svg';
import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import { DrawerMenu } from './DrawerMenu/DrawerMenu';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@ -28,6 +27,10 @@ import { Notifications } from 'component/common/Notifications/Notifications';
import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { CommandBar } from 'component/commandBar/CommandBar'; import { CommandBar } from 'component/commandBar/CommandBar';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { ReactComponent as CelebratoryUnleashLogo } from 'assets/img/unleashHoliday.svg';
import { ReactComponent as CelebratoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg';
import { useNewAdminMenu } from 'hooks/useNewAdminMenu';
const HeaderComponent = styled(AppBar)(({ theme }) => ({ const HeaderComponent = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.background.application, backgroundColor: theme.palette.background.application,
@ -68,11 +71,13 @@ const StyledNav = styled('nav')({
flexGrow: 1, flexGrow: 1,
}); });
const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' }); const StyledCelebratoryLogo = styled(CelebratoryUnleashLogo)({
height: '50px',
});
const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' }); const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ height: '50px' });
const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' }); const StyledUnleashLogo = styled(UnleashLogo)({ height: '50px' });
const StyledLink = styled(Link)(({ theme }) => focusable(theme)); const StyledLink = styled(Link)(({ theme }) => focusable(theme));
@ -99,7 +104,12 @@ const Header = () => {
const smallScreen = useMediaQuery(theme.breakpoints.down('lg')); const smallScreen = useMediaQuery(theme.breakpoints.down('lg'));
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
const toggleDrawer = () => setOpenDrawer((prev) => !prev); const toggleDrawer = () => setOpenDrawer((prev) => !prev);
const celebatoryUnleash = useUiFlag('celebrateUnleash'); const celebratoryUnleash = useUiFlag('celebrateUnleash');
const headerLogo = (theme: Theme) => ({
height: '50px',
marginLeft: theme.spacing(1.5),
});
const adminMenu = useNewAdminMenu();
if (smallScreen) { if (smallScreen) {
return ( return (
@ -131,6 +141,40 @@ const Header = () => {
<HeaderComponent position='static'> <HeaderComponent position='static'>
<ContainerComponent> <ContainerComponent>
<StyledNav> <StyledNav>
<ConditionallyRender
condition={adminMenu}
show={
<StyledLink
to='/personal'
sx={headerLogo}
aria-label='Home'
>
<ThemeMode
darkmode={
<ConditionallyRender
condition={celebratoryUnleash}
show={
<CelebratoryUnleashLogoWhite />
}
elseShow={
<StyledUnleashLogoWhite aria-label='Unleash logo' />
}
/>
}
lightmode={
<ConditionallyRender
condition={celebratoryUnleash}
show={<StyledCelebratoryLogo />}
elseShow={
<StyledUnleashLogo aria-label='Unleash logo' />
}
/>
}
/>
</StyledLink>
}
/>
<StyledUserContainer> <StyledUserContainer>
<CommandBar /> <CommandBar />
<Divider <Divider