kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

[FEAT] increase feature of topBar

Browse Source
This commit is contained in:
Edouard DUPIN 2025-03-22 12:09:37 +01:00
parent 3e92c2b74a
commit 9c9476b052
1 changed files with 71 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
front/src/components/TopBar/TopBar.tsx
View File

@ -1,26 +1,61 @@
import { ReactNode } from 'react';
import { Box, Button, ConditionalValue, Flex, HStack, IconButton, Span, Text, useDisclosure } from '@chakra-ui/react';
import { LuAlignJustify, LuArrowBigLeft, LuCircleUserRound, LuKeySquare, LuLogIn, LuLogOut, LuMoon, LuSettings, LuSun } from 'react-icons/lu';
import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
import {
Box,
Button,
ConditionalValue,
Flex,
HStack,
IconButton,
Span,
Text,
useBreakpointValue,
useDisclosure,
} from '@chakra-ui/react';
import {
LuAlignJustify,
LuArrowBigLeft,
LuCircleUserRound,
LuKeySquare,
LuLogIn,
LuLogOut,
LuMoon,
LuSettings,
LuSun,
} from 'react-icons/lu';
import {
MdHelp,
MdHome,
MdMore,
MdOutlinePlaylistPlay,
MdOutlineUploadFile,
MdSupervisedUserCircle,
} from 'react-icons/md';
import { useNavigate } from 'react-router-dom';
import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
import { DrawerBody, DrawerContent, DrawerHeader, DrawerRoot } from '@/components/ui/drawer';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
import {
DrawerBody,
DrawerContent,
DrawerHeader,
DrawerRoot,
} from '@/components/ui/drawer';
import {
MenuContent,
MenuItem,
MenuRoot,
MenuTrigger,
} from '@/components/ui/menu';
import { useServiceContext } from '@/service/ServiceContext';
import { SessionState } from '@/service/SessionState';
import { useSessionService } from '@/service/session';
import { colors } from '@/theme/colors';
import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
import {
requestOpenSite,
requestSignIn,
requestSignOut,
requestSignUp,
} from '@/utils/sso';
export const TOP_BAR_HEIGHT = '50px';
@ -37,6 +72,8 @@ export const BUTTON_TOP_BAR_PROPERTY = {
export type TopBarProps = {
children?: ReactNode;
title?: string;
titleLink?: string;
titleIcon?: ReactNode;
};
const ButtonMenuLeft = ({
@ -74,7 +111,12 @@ const ButtonMenuLeft = ({
</>
);
};
export const TopBar = ({ title, children }: TopBarProps) => {
export const TopBar = ({
title,
titleLink,
titleIcon,
children,
}: TopBarProps) => {
const navigate = useNavigate();
const { colorMode, toggleColorMode } = useColorMode();
const { session } = useServiceContext();
@ -99,8 +141,10 @@ export const TopBar = ({ title, children }: TopBarProps) => {
const onKarso = (): void => {
requestOpenSite();
};
const isVisible = useBreakpointValue({ base: false, md: true });
return (
<Flex
minWidth="320px"
position="absolute"
top={0}
left={0}
@ -117,21 +161,28 @@ export const TopBar = ({ title, children }: TopBarProps) => {
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}>
<HStack>
<LuAlignJustify />
<Text paddingLeft="3px" fontWeight="bold">
Karusic
</Text>
{isVisible && (
<Text paddingLeft="3px" fontWeight="bold">
Karusic
</Text>
)}
</HStack>
</Button>
{title && (
<Text
truncate
fontSize="20px"
fontWeight="bold"
textTransform="uppercase"
marginRight="auto"
userSelect="none"
color="brand.500"
onClick={titleLink ? () => navigate(titleLink) : undefined}
>
{title}
<Flex gap="4px">
{titleIcon}
{title}
</Flex>
</Text>
)}
{children}
@ -264,4 +315,4 @@ export const TopBar = ({ title, children }: TopBarProps) => {
</DrawerRoot>
</Flex>
);
};
};