Merge branch 'main' of https://github.com/saitamau-maximum/public-web…

…site into feat/setupYuGothic
saitamau-maximum · Apr 4, 2024 · a25137e · a25137e
2 parents 298b1e9 + e3878d5
commit a25137e
Show file tree

Hide file tree

Showing 5 changed files with 272 additions and 79 deletions.
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -1,18 +1,65 @@
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #000;
-  color: #fff;
-  height: 400px;
-  gap: 112px;
+$hovering-color: #7FCC8F;
+$tablet-width: 768px;
+
+@media (min-width: $tablet-width) {
+  .footer {
+    display: flex;
+    height: 400px;
+    padding: 0px 32px;
+  }
+
+  .container {
+    gap: 50px;
+  }
+
+  .navigations {
+    width: 500px;
+    gap: 32px;
+  }
+
+  .navigationsForMobile {
+    display: none;
+  }
+}
+
+@media (max-width: $tablet-width) {
+  .footer {
+    padding: 64px 12%;
+  }
+
+  .container {
+    gap: 64px;
+  }
+
+  .logo img{
+    max-width: 100%;
+    height: auto;
+  }
+
+  .navigations {
+    flex-flow: column wrap;
+    gap: 38px 12%;
+    height: 320px;
+    margin-top: 64px;
+  }
+
+  .navigationsForPC {
+    display: none;
+  }
 }
 
 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 50px;
+}
+
+.footer {
+  align-items: center;
+  justify-content: center;
+  background-color: #000;
+  color: #fff;
+  gap: 112px;
 }
 
 .logo {
@@ -25,18 +72,15 @@
 .navigations {
   display: flex;
   flex-wrap: wrap;
-  width: 500px;
-  gap: 32px;
-
+}
 
-  .navigationLink {
-    color: #fff;
-    text-decoration: none;
-    font-size: 20px;
-    white-space: nowrap;
-  }
+.navigationLink {
+  color: #fff;
+  text-decoration: none;
+  font-size: 20px;
+  white-space: nowrap;
 }
 
 .navigationLink:hover {
-  color: #7fcc8f;
+  color: $hovering-color;
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import Link from 'next/link';
 import { MdArrowOutward } from 'react-icons/md';
 import { SiX, SiGithub } from 'react-icons/si';
@@ -18,9 +19,16 @@ export function Footer() {
             />
           </Link>
         </div>
-        <LinkButton href='/join' variant='green'>
-          入会案内はこちら
-        </LinkButton>
+        <div className={style.navigationsForPC}>
+          <LinkButton href='/join' variant='green' size='medium'>
+            入会案内はこちら
+          </LinkButton>
+        </div>
+        <div className={style.navigationsForMobile}>
+          <LinkButton href='/join' variant='green' size='small'>
+            入会案内はこちら
+          </LinkButton>
+        </div>
       </div>
 
       <nav className={style.navigations}>
@@ -55,15 +63,33 @@ export function Footer() {
           href='https://x.com/Maximum03400346'
           target='_blank'
           rel='noopener noreferrer'
-          className={style.navigationLink}
+          className={clsx(style.navigationLink, style.navigationsForMobile)}
+        >
+          X
+          <MdArrowOutward />
+        </Link>
+        <Link
+          href='https://github.com/saitamau-maximum'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={clsx(style.navigationLink, style.navigationsForMobile)}
+        >
+          GitHub
+          <MdArrowOutward />
+        </Link>
+        <Link
+          href='https://x.com/Maximum03400346'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={clsx(style.navigationLink, style.navigationsForPC)}
         >
           <SiX size={24} />
         </Link>
         <Link
           href='https://github.com/saitamau-maximum'
           target='_blank'
           rel='noopener noreferrer'
-          className={style.navigationLink}
+          className={clsx(style.navigationLink, style.navigationsForPC)}
         >
           <SiGithub size={24} />
         </Link>

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -8,34 +8,46 @@ $header-left-padding: 139px;
   top: 0;
   height: 100%;
   width: $header-left-padding;
-  background: linear-gradient(0.25turn, #B2FFBFFF, #B2FFBF00);
+  background: linear-gradient(0.25turn, #b2ffbfff, #b2ffbf00);
 }
-  
+
 .header {
   position: fixed;
   z-index: 100;
   box-sizing: border-box;
-  top : 0;
+  top: 0;
   width: 100%;
   height: 72px;
   background-color: #070707;
-    
+
   /*  上下中央揃え  */
   display: flex;
   align-items: center;
   justify-content: space-between;
-    
+
   padding-left: $header-left-padding;
   padding-right: 32px;
   color: #ffffff;
 }
-  
+
 .navigations {
   display: flex;
   align-items: center;
   gap: 32px;
 }
 
+.navigationLinks {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.navigationIcons {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
 .navigationLink {
   display: flex;
   align-items: center;
@@ -45,7 +57,57 @@ $header-left-padding: 139px;
 }
 
 .navigationLink:hover {
-  color: #7FCC8F;
+  color: #7fcc8f;
+}
+
+.menuButton {
+  display: none;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+}
+
+.menuButton:hover {
+  background-color: #ffffff22;
+}
+
+.menuButtonLines {
+  position: absolute;
+  display: block;
+  width: 24px;
+  height: 2px;
+  background-color: #ffffff;
+  border-radius: 2px;
+  inset: 0;
+  margin: auto;
+  transition: transform 0.3s;
+}
+
+.menuButtonLines:nth-child(1) {
+  transform: translateY(-6px);
+}
+
+.menuButtonLines:nth-child(3) {
+  transform: translateY(6px);
+}
+
+.headerMenuOpen .menuButtonLines:nth-child(1) {
+  transform: translateY(0) rotate(45deg);
+}
+
+.headerMenuOpen .menuButtonLines:nth-child(2) {
+  display: none;
+}
+
+.headerMenuOpen .menuButtonLines:nth-child(3) {
+  transform: translateY(0) rotate(-45deg);
 }
 
 @media (max-width: 1200px) {
@@ -54,11 +116,47 @@ $header-left-padding: 139px;
   }
 
   .header {
-    height: 64px;
-    padding: 8px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-left: 16px;
+    padding-right: 16px;
+    height: 72px;
+    transition: height 0.3s;
+  }
+
+  .headerMenuOpen.header {
+    height: 100dvh;
+  }
+
+  .logo {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+  }
+
+  .menuButton {
+    display: block;
   }
 
   .navigations {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    gap: 64px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
   }
-}
+
+  .navigationLinks {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+  }
+
+  .headerMenuOpen .navigations {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -5,6 +5,9 @@ import { Header } from './Header';
 export default {
   title: 'Components/Header',
   component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
 } as Meta<typeof Header>;
 
 export const Default: StoryFn<typeof Header> = () => <Header />;