From 34cf3fe1f6d9e7838c8e5c40432044c643253493 Mon Sep 17 00:00:00 2001
From: John Rassa <john.rassa@bluehalo.com>
Date: Tue, 11 Jun 2024 12:33:17 -0400
Subject: [PATCH] style: style updates for navbar

---
 src/app/app.config.ts                         |  6 ++--
 src/app/common/flyout/flyout.component.scss   |  4 +--
 .../table/sidebar/sidebar.component.scss      | 13 ++++---
 .../site-navbar/site-navbar.component.html    | 12 ++++---
 .../site-navbar/site-navbar.component.scss    | 36 ++++++-------------
 src/styles/_mixins.scss                       | 14 --------
 src/styles/_shared.scss                       |  1 +
 src/styles/bootstrap/_nav.scss                | 11 ------
 8 files changed, 34 insertions(+), 63 deletions(-)

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 2d7c5ecc..c1a5a374 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,6 +1,6 @@
 import { provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideAnimations, provideNoopAnimations } from '@angular/platform-browser/animations';
 import {
 	TitleStrategy,
 	provideRouter,
@@ -31,10 +31,12 @@ import {
 import { provideTeamsFeature } from './core/teams/provider';
 import { provideExampleSiteFeature } from './site/example/provider';
 
+const disableAnimations: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
 export const appConfig: ApplicationConfig = {
 	providers: [
 		importProvidersFrom(BsDatepickerModule.forRoot(), TooltipModule.forRoot()),
-		provideAnimations(),
+		!disableAnimations ? provideAnimations() : provideNoopAnimations(),
 		provideHttpClient(
 			withInterceptors([
 				signinInterceptor,
diff --git a/src/app/common/flyout/flyout.component.scss b/src/app/common/flyout/flyout.component.scss
index 5f6888df..be7f65da 100644
--- a/src/app/common/flyout/flyout.component.scss
+++ b/src/app/common/flyout/flyout.component.scss
@@ -12,7 +12,7 @@ $flyout-bottom-bottom: 20px * 2 !default;
 	position: fixed;
 	right: 0;
 	top: $flyout-right-top;
-	transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
+	@include transition(left 0.15s ease-in-out, right 0.15s ease-in-out);
 	z-index: $zindex-popover;
 
 	&[placement='left'] {
@@ -116,5 +116,5 @@ $flyout-bottom-bottom: 20px * 2 !default;
 		max-height: calc(100vh - 100px);
 	}
 
-	transition: width 1s ease-in-out, height 1s ease-in-out;
+	@include transition(width 1s ease-in-out, height 1s ease-in-out);
 }
diff --git a/src/app/common/table/sidebar/sidebar.component.scss b/src/app/common/table/sidebar/sidebar.component.scss
index 5812fc4c..f7690346 100644
--- a/src/app/common/table/sidebar/sidebar.component.scss
+++ b/src/app/common/table/sidebar/sidebar.component.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @import '../../../../styles/shared';
-@import '../../../../styles/bootstrap/shared';
 
 $sidebar-width: 250px !default;
 $sidebar-transition-duration: 0.15s !default;
@@ -13,19 +12,23 @@ $sidebar-transition-duration: 0.15s !default;
 	width: 0;
 	min-width: 0;
 
-	transition: width $sidebar-transition-duration ease-in-out,
+	@include transition(
+		width $sidebar-transition-duration ease-in-out,
 		min-width $sidebar-transition-duration ease-in-out,
 		margin-left $sidebar-transition-duration ease-in-out,
-		opacity 0s ease-in-out $sidebar-transition-duration;
+		opacity 0s ease-in-out $sidebar-transition-duration
+	);
 
 	&.sidebar-open {
 		margin-left: map.get($spacers, 3);
 		opacity: 1;
 		width: $sidebar-width;
 		min-width: $sidebar-width;
-		transition: width $sidebar-transition-duration ease-in-out,
+		@include transition(
+			width $sidebar-transition-duration ease-in-out,
 			min-width $sidebar-transition-duration ease-in-out,
-			margin-left $sidebar-transition-duration ease-in-out;
+			margin-left $sidebar-transition-duration ease-in-out
+		);
 
 		&.sidebar-left {
 			margin-left: 0;
diff --git a/src/app/core/site-navbar/site-navbar.component.html b/src/app/core/site-navbar/site-navbar.component.html
index d7f6d6ae..065f57bf 100644
--- a/src/app/core/site-navbar/site-navbar.component.html
+++ b/src/app/core/site-navbar/site-navbar.component.html
@@ -1,16 +1,16 @@
 <nav
-	class="navbar d-flex flex-column align-items-start py-0 bg-body-tertiary border-end"
+	class="navbar d-flex flex-column align-items-stretch py-0 bg-body-tertiary border-end"
 	[ngClass]="{ 'navbar-open': navbarOpen(), 'navbar-close': !navbarOpen() }"
 >
 	<nav class="nav flex-column border-bottom">
-		<a class="nav-link navbar-logo p-1" href="#">
+		<a class="nav-link navbar-logo p-1 border-bottom" href="#">
 			<img src="/assets/images/nav-logo.png" alt="Logo" />
 			<span class="nav-label">{{ appTitle() }}</span>
 		</a>
 	</nav>
 
 	<div class="nav-inner-scroll" cdkScrollable>
-		<nav class="nav nav-main flex-column">
+		<nav class="nav nav-pills nav-main flex-column">
 			@for (navbarItem of navbarItems; track navbarItem) {
 				@if (session().hasSomeRoles(navbarItem.hasSomeRoles)) {
 					<a
@@ -30,7 +30,7 @@
 		</nav>
 
 		<!-- Bottom Aux Nav -->
-		<nav class="nav nav-aux flex-column">
+		<nav class="nav nav-pills nav-aux flex-column">
 			<!-- Auditor Nav	-->
 			@if (auditEnabled && session().hasRole('auditor')) {
 				<a
@@ -70,6 +70,7 @@
 					[class.highlight-link]="userNavOpen()"
 					id="user-nav-menu-btn"
 					aria-controls="user-nav-menu"
+					container="body"
 					linkAccessibility
 					placement="left"
 					tooltip="User Profile"
@@ -150,6 +151,7 @@
 					[class.highlight-link]="adminNavOpen()"
 					id="admin-nav-menu-btn"
 					aria-controls="admin-nav-menu"
+					container="body"
 					linkAccessibility
 					placement="left"
 					tooltip="Admin"
@@ -188,6 +190,7 @@
 				<a
 					class="nav-link"
 					[class.highlight-link]="messagesNavOpen()"
+					container="body"
 					linkAccessibility
 					placement="left bottom"
 					tooltip="Notifications"
@@ -226,6 +229,7 @@
 				[class.highlight-link]="helpNavOpen()"
 				id="help-nav-menu-btn"
 				aria-controls="help-nav-menu"
+				container="body"
 				linkAccessibility
 				placement="left"
 				tooltip="Help"
diff --git a/src/app/core/site-navbar/site-navbar.component.scss b/src/app/core/site-navbar/site-navbar.component.scss
index b6298894..5033a296 100644
--- a/src/app/core/site-navbar/site-navbar.component.scss
+++ b/src/app/core/site-navbar/site-navbar.component.scss
@@ -13,6 +13,7 @@ $nav-popover-width: 192px !default;
 :host {
 	display: flex;
 	height: 100%;
+
 }
 
 .navbar {
@@ -22,15 +23,11 @@ $nav-popover-width: 192px !default;
 
 	width: $nav-closed-width;
 
-	transition: width 0.15s ease-in-out;
+	@include transition(width 0.2s ease-in-out);
 
 	&.navbar-open {
 		width: $nav-open-width;
 
-		.nav-link, .nav-inner-scroll {
-			width: $nav-open-width;
-		}
-
 		.nav-link {
 			.nav-label {
 				display: inline-block;
@@ -43,38 +40,38 @@ $nav-popover-width: 192px !default;
 
 			height: auto;
 			width: $nav-closed-width - 2 * $nav-logo-img-margin;
-
-			[data-bs-theme=light] & {
-				filter: invert(100%);
-			}
 		}
 		.nav-label {
 			font-size: $nav-logo-text-font-size;
 			font-weight: bold;
+			color: var(--bs-nav-link-color);
 		}
 	}
 
 	.nav-inner-scroll {
 		display: flex;
 		flex-direction: column;
-		align-items: flex-start;
+		align-items: stretch;
 		justify-content: space-between;
 		flex-grow: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
-		width: $nav-closed-width;
 	}
 
 	.nav-link {
-		width: $nav-closed-width;
-
+		--bs-nav-pills-border-radius: 0;
 		display: flex;
 		align-items: center;
 		justify-items: start;
+		white-space: nowrap;
+
+		&:not(.active):hover {
+			background-color: var(--bs-secondary-bg);
+		}
 
 		.nav-icon {
 			font-size: $nav-icon-size;
-			margin: 2px 0 2px $nav-icon-margin-left;
+			margin: 2px 0 2px -2px;
 			flex-shrink: 0;
 
 			&.fa-stack {
@@ -106,13 +103,6 @@ $nav-popover-width: 192px !default;
 			margin-left: .5rem;
 		}
 
-		&.active {
-			border-left: $nav-element-active-indicator-width solid var(--bs-secondary);
-
-			.nav-icon {
-				margin-left: $nav-icon-margin-left - $nav-element-active-indicator-width;
-			}
-		}
 	}
 }
 
@@ -128,8 +118,4 @@ $nav-popover-width: 192px !default;
 
 .nav-menu {
 	width: $nav-popover-width;
-
-	.dropdown-item {
-		padding: 10px 24px;
-	}
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index b2d66091..603bf27a 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -4,17 +4,3 @@
 	border: $border-width solid $border-color;
 	border-radius: $border-radius;
 }
-
-@mixin transition($properties...) {
-	$transition-list: ();
-	@each $prop in $properties {
-		$transition-list: list.append($transition-list, $prop 300ms, $separator: comma);
-	}
-
-	transition: $transition-list;
-
-	// if the user requests a reduced motion experience, remove transitions
-	@media screen and (prefers-reduced-motion: reduce) {
-		transition: none;
-	}
-}
diff --git a/src/styles/_shared.scss b/src/styles/_shared.scss
index ff6f130d..605a2b4e 100644
--- a/src/styles/_shared.scss
+++ b/src/styles/_shared.scss
@@ -1,3 +1,4 @@
 @import 'overrides';
 @import 'globals';
 @import 'mixins';
+@import 'bootstrap/shared';
diff --git a/src/styles/bootstrap/_nav.scss b/src/styles/bootstrap/_nav.scss
index a05ebfc0..8b137891 100644
--- a/src/styles/bootstrap/_nav.scss
+++ b/src/styles/bootstrap/_nav.scss
@@ -1,12 +1 @@
 
-.nav {
-	.nav-link {
-		&.active {
-			color: var(--bs-secondary);
-		}
-
-		&:hover {
-			background-color: var(--bs-secondary-bg)
-		}
-	}
-}