General: Elevate toggle sidebar button (#9411)

ls1intum · Oct 3, 2024 · 4fbcdc6 · 4fbcdc6
1 parent ab73e04
commit 4fbcdc6
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 2 deletions.
diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html
@@ -146,11 +146,16 @@
                             @if (hasSidebar) {
                                 <button
                                     [ngbTooltip]="'Toggle Sidebar (⇧ + Ctrl + B)'"
+                                    [ngClass]="{ 'is-collapsed': isSidebarCollapsed }"
                                     triggers="hover"
                                     class="btn btn-sidebar-collapse me-3 btn-sm rounded-3"
                                     (click)="toggleSidebar()"
                                 >
                                     <fa-icon [fixedWidth]="true" [icon]="facSidebar" class="text-secondary" size="lg" />
+                                    <div class="btn-sidebar-collapse-chevron">
+                                        <fa-icon [fixedWidth]="true" [icon]="faChevronRight" class="text-secondary btn-sidebar-collapse-chevron-start" size="xs" />
+                                        <fa-icon [fixedWidth]="true" [icon]="faChevronRight" class="text-secondary" size="xs" />
+                                    </div>
                                 </button>
                             }
                             <div class="align-self-center">{{ 'artemisApp.courseOverview.menu.' + pageTitle | artemisTranslate }}</div>

diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss
@@ -2,6 +2,13 @@ $menu-width-closed: 64px;
 $menu-width-open: 220px;
 $breadcrumb-height: 45px; // needed to make the exam fullscreen
 
+// Sidebar Button Transition Variables
+$transition-delay: 0.1s;
+$transition-in-between-delay: 0.2s;
+$transition-chevron-rotate-length: 0.2s;
+$transition-chevron-max-width-length: 0.2s;
+$transition-color-length: 0.2s;
+
 .sidebar-container {
     width: $menu-width-open;
     &.collapsed {
@@ -242,14 +249,76 @@ jhi-secured-image {
 }
 
 .btn-sidebar-collapse {
-    background-color: var(--link-item-bg);
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    background-color: transparent;
     &:hover {
-        background-color: var(--sidebar-card-selected-bg);
         color: var(--primary);
     }
     &:focus {
         border-color: transparent;
     }
+
+    transition: border-color $transition-color-length $transition-delay + $transition-chevron-rotate-length * 2 ease-in-out;
+}
+
+.btn-sidebar-collapse::after,
+.btn-sidebar-collapse::before {
+    content: '';
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+    position: absolute;
+
+    transition: background-color $transition-color-length ease-in-out;
+}
+
+.btn-sidebar-collapse::after {
+    background-color: var(--link-item-bg);
+}
+
+.btn-sidebar-collapse::before {
+    opacity: 0;
+    z-index: -1;
+    background-color: var(--module-bg);
+
+    transition: opacity $transition-color-length $transition-delay + $transition-chevron-rotate-length * 2 ease-in-out;
+}
+
+.btn-sidebar-collapse:hover::after,
+.btn-sidebar-collapse:hover::before {
+    background-color: var(--sidebar-card-selected-bg);
+}
+
+.btn-sidebar-collapse.is-collapsed {
+    border-color: var(--bs-secondary);
+}
+
+.is-collapsed.btn-sidebar-collapse::before {
+    opacity: 1;
+}
+
+.btn-sidebar-collapse-chevron-start {
+    margin-right: -0.7rem;
+}
+
+.btn-sidebar-collapse-chevron {
+    transform: rotateZ(-180deg);
+    display: inline-block;
+    overflow: hidden;
+    margin-left: 0.3rem;
+
+    transition: transform $transition-chevron-rotate-length $transition-delay ease-in-out;
+}
+
+.is-collapsed .btn-sidebar-collapse-chevron {
+    transform: rotateZ(0deg);
+    transition: transform $transition-chevron-rotate-length $transition-delay ease-in-out;
 }
 
 .three-dots {

diff --git a/src/main/webapp/app/overview/course-overview.component.ts b/src/main/webapp/app/overview/course-overview.component.ts
@@ -18,6 +18,7 @@ import {
     IconDefinition,
     faChalkboardUser,
     faChartBar,
+    faChevronLeft,
     faChevronRight,
     faCircleNotch,
     faClipboard,
@@ -117,6 +118,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
     isNotManagementView: boolean;
     canUnenroll: boolean;
     isNavbarCollapsed = false;
+    isSidebarCollapsed = false;
     profileSubscription?: Subscription;
     showRefreshButton: boolean = false;
     isExamStarted = false;
@@ -170,6 +172,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
     faSync = faSync;
     faCircleNotch = faCircleNotch;
     faChevronRight = faChevronRight;
+    faChevronLeft = faChevronLeft;
     facSidebar = facSidebar;
     faEllipsis = faEllipsis;
     faQuestion = faQuestion;
@@ -230,6 +233,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         this.courseActionItems = this.getCourseActionItems();
         this.updateVisibleNavbarItems(window.innerHeight);
         await this.updateRecentlyAccessedCourses();
+        this.isSidebarCollapsed = this.activatedComponentReference?.isCollapsed ?? false;
     }
 
     /** Listen window resize event by height */
@@ -581,6 +585,8 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
 
         // Since we change the pageTitle + might be pulling data upwards during a render cycle, we need to re-run change detection
         this.changeDetectorRef.detectChanges();
+
+        this.isSidebarCollapsed = this.activatedComponentReference?.isCollapsed ?? false;
     }
 
     toggleSidebar() {
@@ -589,6 +595,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         }
         const childRouteComponent = this.activatedComponentReference;
         childRouteComponent.toggleSidebar();
+        this.isSidebarCollapsed = childRouteComponent.isCollapsed;
     }
 
     @HostListener('window:keydown.Control.Shift.b', ['$event'])