Enhancement: collapsible sidebar menus

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

@@ -158,10 +158,13 @@
         </div>
 
         <div class="nav-group mt-3 mb-1">
-          <h6 class="sidebar-heading px-3 text-muted">
+          <h6 class="sidebar-heading px-3 text-muted d-flex align-items-center">
             <span i18n>Manage</span>
+            <button class="btn btn-link p-2 py-0" (click)="manageCollapse.toggle()">
+              <i-bs width="0.9em" height="0.9em" [name]="isManageMenuCollapsed ? 'chevron-down' : 'chevron-up'"></i-bs>
+            </button>
           </h6>
-          <ul class="nav flex-column mb-2">
+          <ul class="nav flex-column mb-2" #manageCollapse="ngbCollapse" [(ngbCollapse)]="isManageMenuCollapsed">
             <li class="nav-item app-link"
               *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
               <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
@@ -235,10 +238,14 @@
         </div>
 
         <div class="nav-group mt-auto mb-1">
-          <h6 class="sidebar-heading px-3 pt-4 text-muted">
+          <h6 class="sidebar-heading px-3 pt-4 text-muted d-flex align-items-center">
             <span i18n>Administration</span>
+            <button class="btn btn-link p-2 py-0" (click)="adminCollapse.toggle()">
+              <i-bs width="0.9em" height="0.9em" [name]="isAdminMenuCollapsed ? 'chevron-down' : 'chevron-up'"></i-bs>
+            </button>
           </h6>
-          <ul class="nav flex-column mb-2">
+          <div class="mb-2">
+            <ul class="nav flex-column" #adminCollapse="ngbCollapse" [(ngbCollapse)]="isAdminMenuCollapsed">
               <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }"
                 tourAnchor="tour.settings">
                 <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
@@ -284,6 +291,8 @@
                   </a>
                 </li>
               }
+            </ul>
+            <ul class="nav flex-column">
               <li class="nav-item mt-2" tourAnchor="tour.outro">
                 <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
                   target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
@@ -348,6 +357,7 @@
             </ul>
           </div>
         </div>
+      </div>
     </nav>
 
     <main role="main" class="ms-sm-auto px-md-4"

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

@@ -78,6 +78,8 @@ export class AppFrameComponent
   appRemoteVersion: AppRemoteVersion
 
   isMenuCollapsed: boolean = true
+  isManageMenuCollapsed: boolean = false
+  isAdminMenuCollapsed: boolean = false
 
   slimSidebarAnimating: boolean = false
 

src-ui/src/main.ts

@@ -55,6 +55,8 @@ import {
   checkLg,
   chevronDoubleLeft,
   chevronDoubleRight,
+  chevronDown,
+  chevronUp,
   clipboard,
   clipboardCheck,
   clipboardCheckFill,
@@ -260,6 +262,8 @@ const icons = {
   checkAll,
   checkCircleFill,
   checkLg,
+  chevronDown,
+  chevronUp,
   chevronDoubleLeft,
   chevronDoubleRight,
   clipboard,