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,18 +25,8 @@
         opacity: 1;
     }
 
-    div {
-        align-items: center;
-        display: flex;
-        height: 100%;
-        justify-content: inherit;
-        min-width: 30px;
-        width: 100%;
-        padding-left: 5px;
-
-        i {
-            font-size: 18px;
-        }
+    .active {
+        color: var(--primary-color);
     }
 
     span {
@@ -48,6 +34,20 @@
             flex-grow: 1;
             justify-content: end;
         }
+
+        div {
+            align-items: center;
+            display: flex;
+            height: 100%;
+            justify-content: inherit;
+            min-width: 30px;
+            width: 100%;
+            padding-left: 5px;
+    
+            i {
+                font-size: 18px;
+            }
+        }
     }
 }
 

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 {
+    z-index: 1056; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686
+}
+
 .modal-content {
-    color: var(--body-text-color);
     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);
+        }
     }
 }