misc fixes

- smaller hamburger
- z-index fixes
- active fixes

UI/Web/src/app/nav-header/nav-header.component.scss

@@ -8,7 +8,7 @@
 
     .side-nav-toggle {
         cursor: pointer;
-        font-size: 25px;
+        font-size: 1.2rem;
         i {
             color: var(--navbar-fa-icon-color);
         }

UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html

@@ -12,6 +12,7 @@
 
 
 <ng-template #inner>
+    <div class="active-highlight"></div>
     <span class="phone-hidden" title="{{title}}">
         <div>
             <i class="fa {{icon}}" aria-hidden="true"></i>&nbsp;

UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.scss

@@ -10,10 +10,6 @@
 
     cursor: pointer; // This needs to be based a flag
 
-    .active {
-        color: var(--primary-color);
-    }
-
     .side-nav-text {
         padding-left: 10px;
         opacity: 1;
@@ -29,6 +25,16 @@
         opacity: 1;
     }
 
+    .active {
+        color: var(--primary-color);
+    }
+
+    span {
+        &:last-child {
+            flex-grow: 1;
+            justify-content: end;
+        }
+
         div {
             align-items: center;
             display: flex;
@@ -42,12 +48,6 @@
                 font-size: 18px;
             }
         }
-
-    span {
-        &:last-child {
-            flex-grow: 1;
-            justify-content: end;
-        }
     }
 }
 

UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts

@@ -33,6 +33,8 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
             takeUntil(this.onDestroy),
             map(evt => evt as NavigationEnd))
       .subscribe((evt: NavigationEnd) => {
+        console.log(evt.url.split('?')[0]);
+        console.log(this.link);
         if (this.link !== undefined && evt.url.split('?')[0] === this.link) {
           this.highlighted = true;
         }

UI/Web/src/app/sidenav/side-nav/side-nav.component.html

@@ -10,7 +10,7 @@
         <div class="mt-3">
             <app-side-nav-item icon="fa-home" title="Home" link="/library"></app-side-nav-item>
             <app-side-nav-item icon="fa-list" title="Collections" link="/collections"></app-side-nav-item>
-            <app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists"></app-side-nav-item>
+            <app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists/"></app-side-nav-item>
             <app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series"></app-side-nav-item>
             <div class="mb-3" * ngIf="libraries.length > 10">
                 <label for="filter" class="form-label">Filter</label>

UI/Web/src/app/sidenav/side-nav/side-nav.component.scss

@@ -2,11 +2,11 @@
     padding: 10px 0;
     width: 190px;
     background-color: var(--side-nav-bg-color);
-    height: calc(100vh - 76px);
+    height: calc(100vh - 85px);
     position: fixed;
     margin: 0;
     left: 10px;
-    top: 66px;
+    top: 73px;
     border-radius: var(--side-nav-border-radius);
     transition: width var(--side-nav-openclose-transition), background-color var(--side-nav-bg-color-transition), border-color var(--side-nav-border-transition);
     overflow: auto;

UI/Web/src/theme/components/_dropdown.scss

@@ -16,5 +16,5 @@
 }
 
 .dropdown {
-    z-index: 1055 !important; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686
+    //z-index: 1055 !important; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686
 }

UI/Web/src/theme/components/_modal.scss

@@ -1,4 +1,8 @@
-.modal-content {
+.modal {
-    color: var(--body-text-color);
+    z-index: 1056; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686
-    background-color: var(--bs-body-bg);
+}
+
+.modal-content {
+    background-color: var(--bs-body-bg);
+    color: var(--body-text-color);
 }

UI/Web/src/theme/components/_navbar.scss

@@ -1,6 +1,7 @@
 .navbar {
     background-color: var(--navbar-bg-color);
     color: var(--navbar-text-color);
+    z-index: 1056;
 }
 
 

UI/Web/src/theme/components/_sidenav.scss

@@ -4,6 +4,7 @@
 }
 
 .side-nav-item {
+    position: relative;
 
     &.closed {
         .side-nav-text {
@@ -28,6 +29,18 @@
     &.active {
         color: var(--side-nav-item-active-color);
         background-color: var(--side-nav-active-bg-color);
+
+        .active-highlight {
+            background-color: var(--side-nav-item-active-color);
+            width: 5px;
+            height: 100%;
+            position: absolute;
+            left: 0;
+        }
+
+        &:hover {
+            background-color: var(--side-nav-hover-bg-color);
+        }
     }
 }