From d6bc11553eff4c9a0fc3d4e9037a6fb547553e61 Mon Sep 17 00:00:00 2001 From: sor4chi Date: Thu, 21 Sep 2023 21:46:49 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20Header=E3=81=AE=E5=9F=BA=E7=A4=8E?= =?UTF-8?q?=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/src/header/Header.module.scss | 120 ++++++++++++++++++ .../components/src/header/Header.stories.tsx | 88 +++++++++++++ packages/components/src/header/Header.tsx | 97 ++++++++++++++ packages/components/src/header/index.ts | 1 + packages/components/src/header/logo.svg | 35 +++++ packages/components/src/index.ts | 1 + 6 files changed, 342 insertions(+) create mode 100644 packages/components/src/header/Header.module.scss create mode 100644 packages/components/src/header/Header.stories.tsx create mode 100644 packages/components/src/header/Header.tsx create mode 100644 packages/components/src/header/index.ts create mode 100644 packages/components/src/header/logo.svg diff --git a/packages/components/src/header/Header.module.scss b/packages/components/src/header/Header.module.scss new file mode 100644 index 0000000..d418e48 --- /dev/null +++ b/packages/components/src/header/Header.module.scss @@ -0,0 +1,120 @@ +.header { + width: 100%; + padding: 0 2rem; + box-sizing: border-box; + z-index: 1; + height: 6rem; + transition: border 0.2s ease-in-out; +} + +.headerInner { + width: 100%; + max-width: 70rem; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +:global(.light) .headerInner { + border-bottom: 1px solid $color-gray-200; +} + +:global(.dark) .headerInner { + border-bottom: 1px solid $color-gray-700; +} + +.logoLink { + &:focus-visible { + border-radius: 0.5rem; + } +} + +.logo { + fill: $color-accent-gradient; + height: 4rem; +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; +} + +.navList { + display: flex; + align-items: center; + justify-content: space-between; + list-style: none; + margin: 0; + padding: 0; + gap: 0.5rem; +} + +$nav-text-padding-x: 1rem; + +.navText { + font-size: 1rem; + font-weight: 700; + padding: 0.5rem $nav-text-padding-x; + + transition: color 0.2s ease-in-out; + + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; +} + +:global(.light) .navText { + color: $color-gray-700; +} + +:global(.dark) .navText { + color: $color-gray-300; +} + +.currentNavText::after { + content: ''; + position: absolute; + inset: auto 0 -0.25rem 0; + margin: auto; + width: 80%; + height: 0.125rem; + border-radius: 9999px; +} + +:global(.light) .currentNavText::after { + background: $color-green-600; +} + +:global(.dark) .currentNavText::after { + background: $color-green-500; +} + +.notCurrentNavText { + cursor: pointer; + text-decoration: none; +} + +.navItem { + a:focus-visible { + border-radius: 0.5rem; + } + + :global(.light) & a:hover { + color: $color-green-600; + } + + :global(.dark) & a:hover { + color: $color-green-500; + } +} + +.actionArea { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} diff --git a/packages/components/src/header/Header.stories.tsx b/packages/components/src/header/Header.stories.tsx new file mode 100644 index 0000000..506c822 --- /dev/null +++ b/packages/components/src/header/Header.stories.tsx @@ -0,0 +1,88 @@ +import { Menu, User } from 'react-feather'; + +import { Container } from '../__stories__/containter'; +import { VStack } from '../__stories__/v-stack'; +import { Button } from '../button'; + +import { Header, HeaderProps } from './Header'; + +import type { Meta } from '@storybook/react'; + +const meta: Meta = { + component: Header, +}; + +export default meta; + +const Headers = (args: HeaderProps) => ( + + +
+
+ + +
+
+ + +); + +const NAVIGATIONS = [ + { + name: 'ホーム', + href: '/', + active: true, + }, + { + name: '活動', + href: '/activities', + active: false, + }, + { + name: '実績', + href: '/works', + active: false, + }, + { + name: '会員専用', + href: '/members-only', + active: false, + }, + { + name: 'Blog', + href: 'https://blog.maximum.vc', + active: false, + external: true, + }, + { + name: 'Twitter', + href: 'https://twitter.com/maximum_vc', + active: false, + external: true, + }, + { + name: 'Github', + href: 'https://github.com/saitamau-maximum', + active: false, + external: true, + }, +]; + +export const Default = () => ( + +
+
+
+ {dropdownChildren} + +
+
+ )} +
+ {dropdownOpen && ( +
+ )} + ); };