Attributes submenu

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

@@ -177,11 +177,56 @@
           <ul class="nav flex-column mb-2">
 	            @if (canManageAttributes) {
 	              <li class="nav-item app-link" tourAnchor="tour.tags">
-	                <a class="nav-link" routerLink="attributes" routerLinkActive="active" (click)="closeMenu()"
+                  <div class="d-flex align-items-center attributes-row">
-	                  ngbPopover="Attributes" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                    <a class="nav-link flex-fill" routerLink="attributes" routerLinkActive="active" (click)="closeMenu()"
-	                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                      ngbPopover="Attributes" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-	                  <i-bs class="me-1" name="stack"></i-bs><span>&nbsp;<ng-container i18n>Attributes</ng-container></span>
+                      container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-	                </a>
+                      <i-bs class="me-1" name="stack"></i-bs><span>&nbsp;<ng-container i18n>Attributes</ng-container></span>
+                    </a>
+                    @if (!slimSidebarEnabled) {
+                      <button
+                        type="button"
+                        class="btn btn-link btn-sm text-muted p-0 me-3 attributes-expand-btn"
+                        (click)="toggleAttributesSections($event)"
+                        [attr.aria-label]="attributesSectionsCollapsed ? 'Expand attributes sections' : 'Collapse attributes sections'"
+                        i18n-aria-label
+                      >
+                        <i-bs [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></i-bs>
+                      </button>
+                    }
+                  </div>
+                  <div
+                    class="attributes-submenu ms-2"
+                    [ngbCollapse]="slimSidebarEnabled || attributesSectionsCollapsed"
+                  >
+                    <ul class="nav flex-column">
+                      <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
+                        <a class="nav-link py-1" routerLink="attributes/tags" routerLinkActive="active" (click)="closeMenu()">
+                          <i-bs class="me-1" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
+                        </a>
+                      </li>
+                      <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+                        <a class="nav-link py-1" routerLink="attributes/correspondents" routerLinkActive="active" (click)="closeMenu()">
+                          <i-bs class="me-1" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
+                        </a>
+                      </li>
+                      <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+                        <a class="nav-link py-1" routerLink="attributes/documenttypes" routerLinkActive="active" (click)="closeMenu()">
+                          <i-bs class="me-1" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document types</ng-container></span>
+                        </a>
+                      </li>
+                      <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
+                        <a class="nav-link py-1" routerLink="attributes/storagepaths" routerLinkActive="active" (click)="closeMenu()">
+                          <i-bs class="me-1" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage paths</ng-container></span>
+                        </a>
+                      </li>
+                      <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
+                        <a class="nav-link py-1" routerLink="attributes/customfields" routerLinkActive="active" (click)="closeMenu()">
+                          <i-bs class="me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom fields</ng-container></span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
 	              </li>
 	            }
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">

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

@@ -177,6 +177,15 @@ main {
   }
 }
 
+.attributes-row .attributes-expand-btn {
+  opacity: 0.2;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.attributes-row:hover .attributes-expand-btn {
+  opacity: 1;
+}
+
 .sidebar-heading {
   font-size: 0.75rem;
   text-transform: uppercase;

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

@@ -94,6 +94,8 @@ export class AppFrameComponent
 
   slimSidebarAnimating: boolean = false
 
+  attributesSectionsCollapsed: boolean = true
+
   constructor() {
     super()
     const permissionsService = this.permissionsService
@@ -141,11 +143,20 @@ export class AppFrameComponent
   toggleSlimSidebar(): void {
     this.slimSidebarAnimating = true
     this.slimSidebarEnabled = !this.slimSidebarEnabled
+    if (this.slimSidebarEnabled) {
+      this.attributesSectionsCollapsed = true
+    }
     setTimeout(() => {
       this.slimSidebarAnimating = false
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
+  toggleAttributesSections(event?: Event): void {
+    event?.preventDefault()
+    event?.stopPropagation()
+    this.attributesSectionsCollapsed = !this.attributesSectionsCollapsed
+  }
+
   get versionString(): string {
     return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }