slim sidebar with doc list adjusting

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -14,6 +14,18 @@
     width: 0.8em;
     height: 0.8em;
   }
+
+
+  // These come from the col-md-3 col-lg-2 classes for regular sidebar, needed for animation
+  @media (min-width: 768px) {
+    max-width: 25%;
+  }
+
+  @media (min-width: 992px) {
+    max-width: 16.66666667%;
+  }
+
+  transition: all .3s ease;
 }
 @media (max-width: 767.98px) {
   .sidebar {
@@ -21,6 +33,38 @@
   }
 }
 
+.sidebar-slim-toggler {
+  display: none; // hide on mobile
+}
+
+@media(min-width: 768px) {
+  .sidebar.slim {
+    max-width: 50px;
+    li.nav-item span {
+      display: none;
+    }
+  }
+
+  .col.slim {
+    margin-left: 50px !important;
+  }
+
+  .sidebar-slim-toggler {
+    display: block;
+    position: absolute;
+    right: -12px;
+    top: 60px;
+    z-index: 996;
+    --bs-btn-padding-x: 0.35rem;
+    --bs-btn-padding-y: 0.125rem;
+  }
+}
+
+::ng-deep .popover-slim .popover-body {
+  --bs-popover-body-padding-x: .5rem;
+  --bs-popover-body-padding-y: .5rem;
+}
+
 .sidebar-sticky {
   position: relative;
   top: 0;