start work on client side explorer

quartz/components/styles/explorer.scss

@@ -28,7 +28,6 @@
 
 .explorer {
   display: flex;
-  height: 100%;
   flex-direction: column;
   overflow-y: hidden;
 
@@ -63,19 +62,6 @@
       display: flex;
     }
   }
-
-  /*&:after {
-    pointer-events: none;
-    content: "";
-    width: 100%;
-    height: 50px;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    opacity: 1;
-    transition: opacity 0.3s ease;
-    background: linear-gradient(transparent 0px, var(--light));
-  }*/
 }
 
 button#mobile-explorer,
@@ -101,42 +87,22 @@ button#desktop-explorer {
     opacity: 0.8;
   }
 
-  &.collapsed .fold {
+  .explorer.collapsed > & .fold {
     transform: rotateZ(-90deg);
   }
 }
 
-.folder-outer {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease-in-out;
-}
-
-.folder-outer.open {
-  grid-template-rows: 1fr;
-}
-
-.folder-outer > ul {
-  overflow: hidden;
-}
-
 #explorer-content {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
-  max-height: 0px;
-  transition:
-    max-height 0.35s ease,
-    visibility 0s linear 0.35s;
+  max-height: 100%;
+  transition: max-height 0.35s ease;
   margin-top: 0.5rem;
-  visibility: hidden;
 
-  &.collapsed {
-    max-height: 100%;
-    transition:
-      max-height 0.35s ease,
-      visibility 0s linear 0s;
-    visibility: visible;
+  .explorer.collapsed > & {
+    max-height: 0px;
+    transition: max-height 0.35s ease;
   }
 
   & ul {
@@ -158,6 +124,23 @@ button#desktop-explorer {
   > #explorer-ul {
     max-height: none;
   }
+
+  .folder-outer {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease-in-out;
+  }
+
+  .folder-outer.open {
+    grid-template-rows: 1fr;
+  }
+
+  .folder-outer > ul {
+    overflow: hidden;
+    margin-left: 6px;
+    padding-left: 0.8rem;
+    border-left: 1px solid var(--lightgray);
+  }
 }
 
 svg {
@@ -227,17 +210,6 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   color: var(--tertiary);
 }
 
-.no-background::after {
-  background: none !important;
-}
-
-#explorer-end {
-  // needs height so IntersectionObserver gets triggered
-  height: 4px;
-  // remove default margin from li
-  margin: 0;
-}
-
 .explorer {
   @media all and ($mobile) {
     #explorer-content {
@@ -263,11 +235,6 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
         visibility: visible;
       }
 
-      ul.overflow {
-        max-height: 100%;
-        width: 100%;
-      }
-
       &.collapsed {
         transform: translateX(0);
         visibility: visible;