diff --git a/package.json b/package.json index 2217d3d..0a1e24d 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@graphql-codegen/typescript-operations": "^2.3.5", "@juggle/resize-observer": "^3.3.1", "@notionhq/client": "^1.0.4", + "@radix-ui/react-navigation-menu": "^0.1.2", "@radix-ui/react-polymorphic": "^0.0.14", "@reach/dialog": "^0.17.0", "@types/lodash": "^4.14.182", diff --git a/src/components/common/header/header.module.scss b/src/components/common/header/header.module.scss index 94c7c60..89ea2a6 100644 --- a/src/components/common/header/header.module.scss +++ b/src/components/common/header/header.module.scss @@ -8,14 +8,14 @@ z-index: 20; background: rgb(4 4 4 / 0.01); padding: tovw(14px, 'default', 12px) var(--main-padding-side); - width: 100%; backdrop-filter: blur(20px); + width: 100%; @-moz-document url-prefix("") { background-color: var(--color-black); } - nav { + .nav { display: flex; align-items: center; justify-content: space-between; @@ -26,24 +26,76 @@ } } - ul { + .list { + @include respond-to('mobile') { + display: none; + } + display: flex; padding: 0; list-style-type: none; gap: tovw(32px, 'default', 16px); - } - li:not(.item--mobile) { - a { - letter-spacing: -0.04em; + .item { + display: flex; + align-items: center; + justify-content: center; + + a.active { + font-weight: 600 !important; + } + + .trigger { + display: flex; + align-items: center; + border: none; + background-color: unset; + text-transform: none; + line-height: 1; + + &[data-state='open'] { + .caret { + transform: rotate(-180deg) translateY(2px); + transition: transform 250ms; + } + } + + .caret { + background: url('/images/dropdown.svg') no-repeat; + background-size: contain; + width: tovw(8px, 'default', 8px); + height: tovw(6px, 'default', 6px); + margin-left: tovw(8px, 'default', 8px); + margin-top: tovw(5px, 'default', 5px); + } + } } - position: relative; + li:not(.item--mobile) { + a { + letter-spacing: -0.04em; + } + + position: relative; + } } - li.active { + .content { + position: absolute; + display: flex; + flex-direction: column; + gap: tovw(18px, 'default', 14px); + border: 1px solid var(--color-grey); + border-radius: tovw(8px, 'default', 8px); + top: tovw(40px, 'default', 30px); + padding: tovw(24px, 'default', 20px); + background-color: rgb(4 4 4 / 0.8); + backdrop-filter: blur(20px); + animation: viewporto 250ms ease-in-out; + z-index: 20; + a { - font-weight: bold; + width: fit-content; } } @@ -68,6 +120,65 @@ width: 100%; height: calc(100 * var(--vh) - var(--header-height-mobile)); + .list { + display: flex; + flex-direction: column; + align-items: flex-start; + + .item { + all: unset; + flex-direction: column; + + a { + font-weight: 400 !important; + + &.active { + font-weight: 600 !important; + } + } + + div:first-child { + display: flex; + align-content: center; + } + + .trigger { + display: flex; + + &[data-state='open'] { + .caret { + transform: rotate(-180deg) translateY(3px); + transition: transform 250ms; + } + } + + .caret { + margin-top: tovw(10px, 'mobile'); + margin-left: tovw(10px, 'mobile'); + width: tovw(25px, 'mobile'); + height: tovw(14px, 'mobile'); + } + } + } + + .content { + all: unset; + position: relative; + display: flex; + flex-flow: row wrap; + gap: tovw(10px, 'mobile'); + background-color: unset; + border: unset; + padding: unset; + padding: tovw(15px, 'mobile') 0 tovw(10px, 'mobile') tovw(5px, 'mobile'); + animation: mobile-menu ease-in-out 250ms; + + a { + font-size: tovw(18px, 'mobile') !important; + } + } + } + ul { flex-direction: column; margin: 0; @@ -189,3 +300,25 @@ } } } + +@keyframes viewporto { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes mobile-menu { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/components/common/header/header.ts b/src/components/common/header/header.ts index e0c7dc1..fcdab91 100644 --- a/src/components/common/header/header.ts +++ b/src/components/common/header/header.ts @@ -1,8 +1,40 @@ export const defaultHeaderLinks = [ - { href: '/', title: 'Home' }, - { href: 'https://docs.laconic.com/', title: 'Developers' }, - { href: '/products', title: 'Products' }, - { href: '/community', title: 'Community' }, - { href: '/about', title: 'About' }, + { + href: 'https://docs.laconic.com/', + title: 'Developers', + content: [ + { href: 'https://github.com/LaconicNetwork', title: 'GitHub' }, + { href: '/about#roadmap', title: 'Roadmap' }, + { href: 'https://discord.com/invite/ukhbBemyxY', title: 'Chat' }, + { href: 'https://laconic.community/', title: 'Forum' } + ] + }, + { + href: '/products', + title: 'Products', + content: [ + { href: '/products#laconicwatchers', title: 'Watchers (SDK)' }, + { href: '/products#laconicstack', title: 'Stack' }, + { href: '/products#laconicnetwork', title: 'Network' }, + { href: '/products#laconicapp', title: 'App' }, + { href: '/products#laconictoken', title: 'Network Token (LNT)' } + ] + }, + { + href: '/about', + title: 'About', + content: [ + { href: '/about#team', title: 'Team' }, + { href: '/partners', title: 'Partners' }, + { href: '/press', title: 'Newsroom' }, + { href: '/careers', title: 'Careers' }, + { href: 'https://docs.laconic.com/faq', title: 'FAQ' }, + { href: '/contact', title: 'Contact' } + ] + }, + { + href: '/community', + title: 'Community' + }, { href: '/blog', title: 'Blog' } ] diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx index df66e4b..a2658e5 100644 --- a/src/components/common/header/index.tsx +++ b/src/components/common/header/index.tsx @@ -1,3 +1,4 @@ +import * as NavigationMenu from '@radix-ui/react-navigation-menu' import clsx from 'clsx' import NextLink from 'next/link' import { useRouter } from 'next/router' @@ -40,22 +41,52 @@ const HeaderMobile = React.forwardRef< } return (
- + + + { useIsomorphicLayoutEffect(() => { if (!headerMobileRef.current) return - const navigationItems = - headerMobileRef.current.querySelectorAll('.items li') + const navigationItems = headerMobileRef.current.querySelectorAll( + `.${s.item}` + ) const socialItems = headerMobileRef.current.querySelectorAll('.social li') const button = headerMobileRef.current.querySelector('button') const text = headerMobileRef.current.querySelector('p') @@ -152,26 +184,54 @@ export const Header = () => { return (
- - + +