feat: 背景をぼかし、ボタンサイズと配置を調整

ricora · Nov 19, 2024 · 278dd7d · 278dd7d
1 parent d42036f
commit 278dd7d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/app/components/atoms/button/MenuIconButton.tsx b/app/components/atoms/button/MenuIconButton.tsx
@@ -12,9 +12,13 @@ export const MenuIconButton: FC<Props> = memo(({ onOpen }) => {
     <IconButton
       aria-label="メニューボタン"
       icon={<HamburgerIcon />}
-      size="sm"
-      variant="unstyled"
+      size="lg"
+      variant="ghost"
       display={{ base: "block", lg: "none" }}
+      _hover={{
+        cursor: "pointer",
+        bg: "blackAlpha.100",
+      }}
       onClick={onOpen}
     />
   )

diff --git a/app/routes/header.tsx b/app/routes/header.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react"
+import { Flex, Heading, HStack, Text, useDisclosure } from "@chakra-ui/react"
 import { Link, useNavigate } from "@remix-run/react"
 import { useCallback } from "react"
 import { MenuIconButton } from "~/components/atoms/button/MenuIconButton"
@@ -31,7 +31,13 @@ export default function Header() {
 
   return (
     <>
-      <Flex bg="blackAlpha.100" padding={{ base: 3, lg: 5 }}>
+      <HStack
+        bg="blackAlpha.100"
+        padding={4}
+        gap={4}
+        backdropFilter="auto"
+        backdropBlur="lg"
+      >
         <MenuIconButton onOpen={onOpen} />
         <Heading _hover={{ cursor: "pointer" }}>
           <Link to="/">
@@ -40,7 +46,7 @@ export default function Header() {
             </Text>
           </Link>
         </Heading>
-      </Flex>
+      </HStack>
       <MenuDrawer
         onClose={onClose}
         isOpen={isOpen}