Merge pull request #217 from INxST/develop

Develop

src/components/Header/Menu.astro

@@ -4,6 +4,7 @@ import snsLinks from '@/data/snsLinks';
 import Disc from '@/components/Disc.astro';
 import MenuLink from '@/components/Header/MenuLink.astro';
 import updatePath from '@/libs/updatePath';
+import { buttonCloseClass } from './buttonClass';
 ---
 
 <div id="menu" class="menu w-screen h-dvh bg-mine-shaft-texture z-30">
@@ -20,13 +21,7 @@ import updatePath from '@/libs/updatePath';
     </video>
 
     <div class="w-full md:flex-1 flex flex-col">
-      <button
-        class="ts-menu-close text-pampas font-serif-en border border-emperor
-        rounded-[30px] py-[6px] px-4 flex gap-2 items-center
-        absolute top-5 md:top-10 right-5 md:right-20
-        group transition-colors duration-[0.6s] hover:bg-pampas hover:text-mine-shaft"
-        data-stalker-color="bright"
-      >
+      <button class={buttonCloseClass} data-stalker-color="bright">
         <span class="inline-block">CLOSE</span>
         <Disc />
       </button>

src/components/Header/buttonClass.ts

@@ -0,0 +1,27 @@
+import cn from '@/libs/cn';
+
+const buttonClass = cn(
+  `font-serif-en border rounded-[30px]
+  md:pt-[6px] md:pb-[5px] md:px-4
+  pt-[4px] pb-[3px] px-[12px]
+  flex gap-2 items-center
+  group transition duration-700`
+);
+
+const buttonOpenClass = cn(
+  `ts-menu-open border-silver
+  ml-auto md:ml-14   
+  hover:bg-mine-shaft hover:text-pampas
+  text-black data-[color=dark]:text-pampas
+  data-[color=dark]:hover:bg-pampas data-[color=dark]:hover:text-mine-shaft`,
+  buttonClass
+);
+
+const buttonCloseClass = cn(
+  `ts-menu-close text-pampas border-emperor
+  absolute top-5 md:top-10 right-5 md:right-20
+  hover:bg-pampas hover:text-mine-shaft`,
+  buttonClass
+);
+
+export { buttonOpenClass, buttonCloseClass };

src/components/Header/index.astro

@@ -5,6 +5,7 @@ import Disc from '@/components/Disc.astro';
 import Menu from '@/components/Header/Menu.astro';
 import type { ThemeColor } from '@/types/ThemeColor';
 import updatePath from '@/libs/updatePath';
+import { buttonOpenClass } from './buttonClass';
 interface Props {
   color?: ThemeColor;
   mixBlendMode?: boolean;
@@ -54,14 +55,7 @@ const path = Astro.url.pathname;
       }
     </ul>
 
-    <button
-      class="ts-menu-open font-serif-en border border-silver
-      rounded-[30px] ml-auto md:ml-14 py-[6px] px-4 flex gap-2 items-center
-      group transition duration-700 hover:bg-mine-shaft hover:text-pampas
-      text-black data-[color=dark]:text-pampas
-      data-[color=dark]:hover:bg-pampas data-[color=dark]:hover:text-mine-shaft"
-      data-color={color}
-    >
+    <button class={buttonOpenClass} data-color={color}>
       <span class="inline-block">MENU</span>
       <Disc />
     </button>