From 91189dfd2f4cb32e205117b327e0ae7a0c2dd716 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Mon, 03 Feb 2025 14:25:42 +0000
Subject: [PATCH] feat(explorer): collapsible mobile explorer (#1471)
---
quartz/components/styles/explorer.scss | 150 +++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 143 insertions(+), 7 deletions(-)
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 397fd02..531e9ff 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,14 +1,70 @@
@use "../../styles/variables.scss" as *;
+@media all and ($mobile) {
+ .page > #quartz-body {
+ // Shift page position when toggling Explorer on mobile.
+ & > :not(.sidebar.left:has(.explorer)) {
+ transform: translateX(0);
+ transition: transform 300ms ease-in-out;
+ }
+ &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
+ transform: translateX(100dvw);
+ transition: transform 300ms ease-in-out;
+ }
+
+ // Sticky top bar (stays in place when scrolling down on mobile).
+ .sidebar.left:has(.explorer) {
+ box-sizing: border-box;
+ position: sticky;
+ background-color: var(--light);
+ }
+
+ // Hide Explorer on mobile until done loading.
+ // Prevents ugly animation on page load.
+ .hide-until-loaded ~ #explorer-content {
+ display: none;
+ }
+ }
+}
+
.explorer {
display: flex;
+ height: 100%;
flex-direction: column;
overflow-y: hidden;
+
+ @media all and ($mobile) {
+ order: -1;
+ height: initial;
+ overflow: hidden;
+ flex-shrink: 0;
+ align-self: flex-start;
+ }
+
+ button#mobile-explorer {
+ display: none;
+ }
+
+ button#desktop-explorer {
+ display: flex;
+ }
+
+ @media all and ($mobile) {
+ button#mobile-explorer {
+ display: flex;
+ }
+
+ button#desktop-explorer {
+ display: none;
+ }
+ }
+
&.desktop-only {
@media all and not ($mobile) {
display: flex;
}
}
+
/*&:after {
pointer-events: none;
content: "";
@@ -23,7 +79,8 @@
}*/
}
-button#explorer {
+button#mobile-explorer,
+button#desktop-explorer {
background-color: transparent;
border: none;
text-align: left;
@@ -68,19 +125,19 @@
list-style: none;
overflow: hidden;
overflow-y: auto;
- max-height: 100%;
+ max-height: 0px;
transition:
max-height 0.35s ease,
- visibility 0s linear 0s;
+ visibility 0s linear 0.35s;
margin-top: 0.5rem;
- visibility: visible;
+ visibility: hidden;
&.collapsed {
- max-height: 0;
+ max-height: 100%;
transition:
max-height 0.35s ease,
- visibility 0s linear 0.35s;
- visibility: hidden;
+ visibility 0s linear 0s;
+ visibility: visible;
}
& ul {
@@ -91,12 +148,14 @@
max-height 0.35s ease,
transform 0.35s ease,
opacity 0.2s ease;
+
& li > a {
color: var(--dark);
opacity: 0.75;
pointer-events: all;
}
}
+
> #explorer-ul {
max-height: none;
}
@@ -179,3 +238,80 @@
// remove default margin from li
margin: 0;
}
+
+.explorer {
+ @media all and ($mobile) {
+ #explorer-content {
+ box-sizing: border-box;
+ overscroll-behavior: none;
+ z-index: 100;
+ position: absolute;
+ top: 0;
+ background-color: var(--light);
+ max-width: 100dvw;
+ left: -100dvw;
+ width: 100%;
+ transition: transform 300ms ease-in-out;
+ overflow: hidden;
+ padding: $topSpacing 2rem 2rem;
+ height: 100dvh;
+ max-height: 100dvh;
+ margin-top: 0;
+ visibility: hidden;
+
+ &:not(.collapsed) {
+ transform: translateX(100dvw);
+ visibility: visible;
+ }
+
+ ul.overflow {
+ max-height: 100%;
+ width: 100%;
+ }
+
+ &.collapsed {
+ transform: translateX(0);
+ visibility: visible;
+ }
+ }
+
+ #mobile-explorer {
+ margin: 5px;
+ z-index: 101;
+
+ &:not(.collapsed) .lucide-menu {
+ transform: rotate(-90deg);
+ transition: transform 200ms ease-in-out;
+ }
+
+ .lucide-menu {
+ stroke: var(--darkgray);
+ transition: transform 200ms ease;
+
+ &:hover {
+ stroke: var(--dark);
+ }
+ }
+ }
+ }
+}
+
+.no-scroll {
+ opacity: 0;
+ overflow: hidden;
+}
+
+html:has(.no-scroll) {
+ overflow: hidden;
+}
+
+@media all and not ($mobile) {
+ .no-scroll {
+ opacity: 1 !important;
+ overflow: auto !important;
+ }
+
+ html:has(.no-scroll) {
+ overflow: auto !important;
+ }
+}
--
Gitblit v1.10.0