navigation.module.css•7.04 kB
/*
Navgrid sets up the grid for content, top, left and right navigation elements.
It's done in pure CSS because it's just so much easier to read and write.
We're using a grid layout here in two places in order to make the sticky parts
easier to deal with. The first place it's used is the actual in-flow layout,
which only defines the scrollable content. This content is placed in to the
".main" grid area and the other areas remain completely empty. Then the second
usage is for the sticky elements, which occupy the areas specified by classes
".topbar", ".leftbar" and ".rightbar". This results in two instances of this
grid being overlayed on top of each other, making layout adjustments easier.
*/
.navgrid {
--grid-row-padding-outer: var(--spacing-5);
--grid-row-padding-inner: var(--spacing-3);
--grid-col-padding-outer: var(--spacing-8);
--grid-col-padding-inner: var(--spacing-8);
--grid-col-padding-inner-right: 0px;
min-height: 100dvh;
}
/* Mobile */
.navgrid {
display: grid;
width: 100%;
height: 100%;
--grid-col-padding-outer: var(--spacing-2);
grid-template-rows:
var(--grid-row-padding-outer)
1fr
var(--grid-row-padding-inner)
auto
var(--grid-row-padding-outer);
grid-template-columns:
minmax(var(--grid-col-padding-outer), 1fr)
1fr
var(--grid-col-padding-inner)
minmax(0, var(--sizes-breakpoint-lg))
var(--grid-col-padding-inner-right)
1fr
minmax(var(--grid-col-padding-outer), 1fr);
grid-template-areas:
" padtl padtop padtop padtop padtop padtop padtr "
" padleft . main main main main padright "
" padleft . . . . . padright "
" padleft . . navpill . . padright "
" padbl padbot padbot padbot padbot padbot padbr ";
}
.main {
grid-area: main;
height: 100%;
}
.topbar {
display: none;
}
.leftbar {
display: none;
}
.rightbar {
display: none;
}
.navpill {
display: block;
grid-area: navpill;
}
@media screen and (min-width: 1280px) {
.navgrid {
--grid-col-padding-inner-right: var(--spacing-8);
--grid-col-padding-outer: var(--spacing-8);
--navgrid-right-bar-display: block;
}
}
@media screen and (min-width: 768px) {
.navgrid {
display: grid;
--grid-col-padding-outer: var(--spacing-4);
grid-template-rows:
var(--grid-row-padding-outer)
3rem
var(--grid-row-padding-inner)
1fr
var(--grid-row-padding-outer);
grid-template-columns:
var(--grid-col-padding-outer)
18rem
minmax(var(--grid-col-padding-inner), 1fr)
minmax(0, var(--sizes-breakpoint-lg))
minmax(var(--grid-col-padding-inner-right), 1fr)
/* only difference to the 1280 width version, this makes sure the title
section is centered between the search bar and the profile area. */
auto
var(--grid-col-padding-outer);
grid-template-areas:
" padtl padtop padtop padtop padtop padtop padtr "
" padleft topbar topbar topbar topbar topbar padright "
" padleft padmid padmid padmid padmid padmid padright "
" padleft leftbar . main main main padright "
" padbl padbot padbot padbot padbot padbot padbr ";
}
.topbar {
grid-area: topbar;
pointer-events: all;
display: grid;
grid-template-columns: subgrid;
}
.topbar-left {
grid-column: 1/2;
grid-row: 1/2;
}
.topbar-middle {
grid-column: 1/6;
grid-row: 1/2;
}
.topbar-right {
grid-column: 5/6;
grid-row: 1/2;
}
.leftbar {
opacity: 0;
display: block;
grid-area: leftbar;
max-height: 100%;
min-height: 0;
/* NOTE: This maintains the shadow bleed despite the overflow hidden prop. */
margin-left: -15px;
margin-top: -15px;
margin-bottom: -15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.rightbar {
opacity: 0;
display: block;
grid-area: rightbar;
overflow: hidden;
/* NOTE: This maintains the shadow bleed despite the overflow hidden prop. */
margin: -15px;
padding: 15px;
}
.navigation__container[data-leftbar-shown="false"] .leftbar {
opacity: 0;
pointer-events: none;
/* NOTE: Doesn't work properly on initial page load, causes the sidebar to
flicker visible and play the animation, need a way to not do this soon. */
/* animation: fadeOutLeft 0.2s ease-in-out; */
}
.navigation__container[data-leftbar-shown="true"] .leftbar {
opacity: 1;
pointer-events: all;
animation: fadeInLeft 0.2s ease-in-out;
}
.navigation__container[data-leftbar-shown="false"] .rightbar {
opacity: 0;
pointer-events: none;
}
.navigation__container[data-leftbar-shown="true"] .rightbar {
opacity: 1;
pointer-events: all;
animation: fadeInRight 0.2s ease-in-out;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
transform: translateX(0px);
}
to {
opacity: 0;
transform: translateX(-10px);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(10px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
transform: translateX(0px);
}
to {
opacity: 0;
transform: translateX(10px);
}
}
.navpill {
display: none;
}
}
@media screen and (min-width: 1280px) {
.navgrid {
grid-template-columns:
var(--grid-col-padding-outer)
18rem
minmax(var(--grid-col-padding-inner), 1fr)
minmax(0, var(--sizes-breakpoint-lg))
minmax(var(--grid-col-padding-inner-right), 1fr)
18rem
var(--grid-col-padding-outer);
grid-template-areas:
" padtl padtop padtop padtop padtop padtop padtr "
" padleft topbar topbar topbar topbar topbar padright "
" padleft padmid padmid padmid padmid padmid padright "
" padleft leftbar . main . rightbar padright "
" padbl padbot padbot padbot padbot padbot padbr ";
}
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
.navigation__container[data-leftbar-shown="false"] .main {
grid-column: leftbar / main;
}
/* Hide the context pane when the screen is at "tablet" size */
.rightbar {
display: none;
}
}
.navigation__container *::-webkit-scrollbar {
width: var(--spacing-scroll-gutter);
height: var(--spacing-scroll-gutter);
}
.navigation__container *::-webkit-scrollbar-thumb {
background-color: var(--colors-bg-muted);
border-radius: var(--radii-lg);
border: 0.1rem solid var(--colors-bg-subtle);
}