[FEAT] increase feature of topBar

front/src/components/TopBar/TopBar.tsx

@@ -1,26 +1,61 @@
 import { ReactNode } from 'react';
 
-
+import {
-
+  Box,
-import { Box, Button, ConditionalValue, Flex, HStack, IconButton, Span, Text, useDisclosure } from '@chakra-ui/react';
+  Button,
-import { LuAlignJustify, LuArrowBigLeft, LuCircleUserRound, LuKeySquare, LuLogIn, LuLogOut, LuMoon, LuSettings, LuSun } from 'react-icons/lu';
+  ConditionalValue,
-import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
+  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 {
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
+  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">
+          {isVisible && (
-            Karusic
+            <Text paddingLeft="3px" fontWeight="bold">
-          </Text>
+              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>
   );
-};
+};