tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make admin navigation transition smoother (#4217)

Browse Source 
Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>
This commit is contained in:
Fredrik Nordström
2023-12-13 17:17:41 +01:00
committed by GitHub
parent 45c472d6b3
commit eb6572e9e5
2 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/payload/src/admin/components/elements/Nav/index.scss
View File

@@ -8,11 +8,11 @@
height: 100vh; height: 100vh;
width: var(--nav-width); width: var(--nav-width);
border-right: 1px solid var(--theme-elevation-100); border-right: 1px solid var(--theme-elevation-100);
transform: translate3d(calc(var(--nav-width) * -1), 0, 0); opacity: 0;
transition: opacity var(--nav-trans-time) ease-in-out;
&--nav-open { &--nav-open {
transform: translate3d(0, 0, 0); opacity: 1;
transition: transform var(--nav-trans-time) linear;
} }
&__header { &__header {
@@ -141,10 +141,6 @@
line-height: base(1.5); line-height: base(1.5);
} }
&--nav-open {
transition: none;
}
&__mobile-close { &__mobile-close {
display: flex; display: flex;
height: 100%; height: 100%;

36
packages/payload/src/admin/components/templates/Default/index.scss
View File

@@ -2,17 +2,18 @@
.template-default { .template-default {
min-height: 100vh; min-height: 100vh;
display: flex; display: grid;
position: relative; position: relative;
width: calc(100% + var(--nav-width)); grid-template-columns: 0 auto;
transform: translate3d(calc(var(--nav-width) * -1), 0, 0); transition: grid-template-columns var(--nav-trans-time) linear;
isolation: isolate;
@media (prefers-reduced-motion) {
transition: none;
}
&--nav-open { &--nav-open {
width: 100%; width: 100%;
transition: grid-template-columns: var(--nav-width) auto;
width var(--nav-trans-time) linear,
transform var(--nav-trans-time) linear;
transform: translate3d(0, 0, 0);
.template-default { .template-default {
&__nav-overlay { &__nav-overlay {
@@ -38,6 +39,18 @@
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
background-color: var(--theme-bg);
&:before {
content: '';
display: block;
position: absolute;
inset: 0;
background-color: inherit;
opacity: 0;
z-index: var(--z-status);
visibility: hidden;
transition: all var(--nav-trans-time) linear;
}
} }
@include mid-break { @include mid-break {
@@ -50,7 +63,12 @@
@include small-break { @include small-break {
&--nav-open { &--nav-open {
transition: none; .template-default__wrap {
&:before {
opacity: 0.7;
visibility: visible;
}
}
} }
&__nav-toggler-wrapper { &__nav-toggler-wrapper {
@@ -64,7 +82,7 @@
.template-default { .template-default {
&__wrap { &__wrap {
transition: none; min-width: 100vw;
} }
} }
} }