LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-09-08 01:54:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

New nav (#77)

Browse Source 
* Work on new nav

Co-authored-by: Nazareno Oviedo <nazareno@basement.studio>
This commit is contained in:
Fede Álvarez
2022-06-29 19:36:36 +02:00
committed by GitHub
co-authored by Nazareno Oviedo
parent 2abb05965e
commit 538e03cf94
9 changed files with 437 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/header/header.module.scss
+143 -10
View File
@@ -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);
}
}
src/components/common/header/header.ts
+37 -5
View File
@@ -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' }
]
src/components/common/header/index.tsx
+91 -31
View File
@@ -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 (
<div {...props} className={clsx(s['header__mobile'], className)} ref={ref}>
<ul className="items">
{defaultHeaderLinks.length > 0 &&
defaultHeaderLinks.map((link, index) => (
<li
key={index}
className={clsx(
{ [s['active']]: isActive(link.href) },
s['item--mobile']
<NavigationMenu.Root className={s.nav}>
<NavigationMenu.List className={s.list}>
{defaultHeaderLinks.map((item, i) => (
<NavigationMenu.Item className={s.item} key={i}>
{item.content ? (
<>
<div>
<Link
className={clsx({
[s['active']]: isActive(item.href)
})}
href={item.href}
variant="nav"
key={i}
>
{item.title}
</Link>
<NavigationMenu.Trigger className={s.trigger}>
<span className={s.caret} />
</NavigationMenu.Trigger>
</div>
<NavigationMenu.Content className={s.content}>
{item.content.map((contentItem, i) => (
<Link
className={clsx({
[s['active']]: isActive(contentItem.href)
})}
href={contentItem.href}
variant="nav"
key={i}
>
{contentItem.title}
</Link>
))}
</NavigationMenu.Content>
</>
) : (
<Link href={item.href} variant="nav">
{item.title}
</Link>
)}
>
<Link href={link.href} variant="nav">
{link.title}
</Link>
</li>
</NavigationMenu.Item>
))}
</ul>
</NavigationMenu.List>
<NavigationMenu.Viewport asChild className={s.viewport} />
</NavigationMenu.Root>
<ButtonLink
className={s['button']}
href="https://discord.com/invite/ukhbBemyxY"
@@ -119,8 +150,9 @@ export const Header = () => {
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 (
<header className={s.header} ref={ref}>
<nav>
<NavigationMenu.Root className={s.nav}>
<NextLink href="/">
<a>
<Logo />
<span className="sr-only">Laconic</span>
</a>
</NextLink>
<ul className="hide-on-mobile">
{defaultHeaderLinks.length > 0 &&
defaultHeaderLinks.map((link, index) => (
<li
key={index}
className={clsx({ [s['active']]: isActive(link.href) })}
>
<Link href={link.href} variant="nav">
{link.title}
<NavigationMenu.List className={s.list}>
{defaultHeaderLinks.map((item, i) => (
<NavigationMenu.Item className={s.item} key={i}>
{item.content ? (
<>
<NavigationMenu.Trigger className={s.trigger}>
<Link
className={clsx({
[s['active']]: isActive(item.href)
})}
href={item.href}
variant="nav"
key={i}
>
{item.title}
</Link>
<span className={s.caret} />
</NavigationMenu.Trigger>
<NavigationMenu.Content className={s.content}>
{item.content.map((contentItem, i) => (
<Link
className={clsx({
[s['active']]: isActive(contentItem.href)
})}
href={contentItem.href}
variant="nav"
key={i}
>
{contentItem.title}
</Link>
))}
</NavigationMenu.Content>
</>
) : (
<Link href={item.href} variant="nav">
{item.title}
</Link>
</li>
))}
</ul>
)}
</NavigationMenu.Item>
))}
</NavigationMenu.List>
<ButtonLink
className="hide-on-mobile"
href="https://discord.com/invite/ukhbBemyxY"
@@ -180,8 +240,8 @@ export const Header = () => {
>
Join Us
</ButtonLink>
</nav>
<NavigationMenu.Viewport asChild className={s.viewport} />
</NavigationMenu.Root>
<div className="hide-on-desktop">
<Button
aria-label="Menu"
src/components/primitives/link/link.module.scss
+1
View File
@@ -92,6 +92,7 @@
width: 100%;
height: tovw(1px);
content: '';
opacity: 0;
}
&:hover {
src/components/sections/about/whitepaper/whitepaper.module.scss
+3 -1
View File
@@ -12,11 +12,13 @@
.container {
@include respond-to('mobile') {
padding: 0 tovw(56px, 'default', 16px);
min-height: unset;
}
display: flex;
place-content: center;
align-items: center;
min-height: tovw(1080px, 'default', 525px);
div:first-child {
@include respond-to('mobile') {
@@ -50,7 +52,7 @@
.whitepaper__img {
@include respond-to('mobile') {
width: 240%;
padding-top: tovw(60px, 'mobile', 60px);
padding-top: tovw(20px, 'mobile', 20px);
}
padding-top: tovw(55px, 'default', 40px);
src/components/sections/community/hero/hero.module.scss
+1
View File
@@ -18,6 +18,7 @@
gap: tovw(155px, 'default', 80px) tovw(130px, 'default', 30px);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding-top: max(90px, 3%);
padding-bottom: tovw(115px, 'default', 55px);
.hero__container {
src/css/global.scss
+1 -1
View File
@@ -50,7 +50,7 @@
--main-padding-side: #{tovw(57px, 'default', 16px)};
/* Header */
--header-height: #{tovw(71px)};
--header-height: #{tovw(71px, 'default', 70px)};
}
*,