components/navigation/navigation.module.scss
@use 'styles/sizes';
.wrapper {
position: sticky;
top: 0;
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
background-color: var(--header-background);
min-height: sizes.$header-height;
max-height: sizes.$header-height;
border-bottom: 1px solid var(--accents-2);
transition: border-bottom 0.2s ease 0s;
z-index: 4;
}
.wrapper.queryHeader {
margin-bottom: 32px;
}
.wrapper.borderless {
border-bottom: 1px solid transparent;
}
.header {
width: 100%;
max-width: sizes.$page-width-with-margin;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 24px;
box-sizing: border-box;
// TODO: Make the tab bar scrollable *and* don't mess up the menu surfaces.
// overflow: auto;
// scrollbar-width: none;
}
.formWidth .header {
max-width: sizes.$form-width-with-margin;
}
.center {
flex: 1 1 auto;
min-width: 0;
position: relative;
> :global(form) {
position: absolute;
top: sizes.$header-height / 2;
left: 50%;
transform: translate(-50%, -50%);
max-width: calc(100% - 48px);
}
}
@media only screen and (max-width: 800px) {
.center {
visibility: hidden;
display: none;
}
}
.left,
.right {
display: flex;
align-items: center;
}
.avatar {
width: sizes.$header-height - 24px;
border-radius: 4px;
background: none;
border: none;
padding: 0;
margin: 0 0 0 20px;
}
div.avatar {
cursor: wait;
}
button.avatar {
cursor: pointer;
}
.logo {
display: flex;
align-items: center;
height: sizes.$header-height;
cursor: pointer;
margin-right: 10px;
text-decoration: none;
}
.logo span {
color: var(--primary);
font-family: var(--font-sans);
font-weight: 700;
font-size: 24px;
line-height: 24px;
text-decoration: none;
}
.mobileToggle {
width: 24px;
height: 40px;
display: none;
visibility: hidden;
justify-content: center;
align-items: center;
border-radius: 4px;
background: transparent;
transition: background-color 0.2s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
pointer-events: none;
&:before,
&:after {
content: '';
display: block;
height: 1px;
width: 22px;
background-color: var(--on-background);
transition: transform 0.15s ease;
}
&:before {
transform: translateY(-4px) rotate(0deg);
}
&:after {
transform: translateY(4px) rotate(0deg);
}
}
.toggleActive {
&:before {
transform: translateY(1px) rotate(45deg);
}
&:after {
transform: translateY(0) rotate(-45deg);
}
}
.mobileNav {
display: none;
visibility: hidden;
max-width: 100vw;
padding: 0 24px 24px 24px;
background: var(--background);
z-index: 2000;
position: fixed;
right: 0;
left: 0;
top: sizes.$header-height - 1px;
bottom: 0;
overflow-y: scroll;
}
.mobileNavActive {
display: block;
visibility: visible;
}
.mobileLinks {
list-style: none;
margin: 0;
padding: 0;
.mobileLink {
color: inherit;
text-decoration: none;
cursor: pointer;
display: block;
.mobileLinkItem {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
width: 100%;
font-size: 1rem;
height: 2 * 24px;
border-bottom: 1px solid var(--accents-2);
transition: background-color 0.2s ease-in-out;
}
}
}
.desktopLinks {
display: flex;
flex-direction: row;
opacity: 1;
pointer-events: all;
transition: opacity 0.1s ease;
align-items: center;
right: 50px;
will-change: opacity;
margin-left: auto;
.desktopLink {
font-size: 14px;
line-height: 24px;
font-family: var(--font-sans);
color: var(--accents-5);
text-decoration: none;
transition: color 0.2s ease-in-out;
position: relative;
padding: 20px 10px;
cursor: pointer;
&:hover {
color: var(--on-background);
}
&.active {
color: var(--on-background);
}
&.loginLink {
min-width: auto;
height: 32px;
line-height: 0;
font-size: 0.875rem;
padding: 6px 12px;
-moz-appearance: none;
position: relative;
display: inline-flex;
-moz-box-align: center;
align-items: center;
-moz-box-pack: center;
justify-content: center;
text-align: center;
text-decoration: none;
white-space: nowrap;
font-weight: 500;
border-radius: 4px;
flex-shrink: 0;
margin: 0px;
color: var(--on-primary);
background: linear-gradient(
45deg,
var(--title-left) 9.38%,
var(--title-right) 88.54%
);
transition: transform 0.1s ease 0s;
user-select: none;
cursor: pointer;
overflow: hidden;
outline: currentColor none medium;
box-sizing: border-box;
&:focus,
&:active {
transform: scale(0.96);
}
}
}
}