style: add a caret below the active menu on top app bar

razonyang · Jan 20, 2023 · bd44d00 · bd44d00
1 parent 3883a3d
commit bd44d00
Showing 1 changed file with 23 additions and 1 deletion.
diff --git a/assets/main/scss/_top-app-bar.scss b/assets/main/scss/_top-app-bar.scss
@@ -1,3 +1,5 @@
+$header-caret-width: 0.35em;
+
 .top-app-bar {
   background-color: var(--#{$prefix}primary);
   color: var(--#{$prefix}on-primary);
@@ -40,12 +42,32 @@
     }
   }
 
-  .nav {
+  nav {
     --#{$prefix}nav-link-color: var(--#{$prefix}on-primary-secondary);
     --#{$prefix}nav-link-hover-color: var(--#{$prefix}on-primary);
     --#{$prefix}nav-link-active-color: var(--#{$prefix}on-primary);
   }
 
+  .nav-link {
+    @include media-breakpoint-up(xxl) {
+        &.active {
+            position: relative;
+            --#{$prefix}body-color: var(--#{$prefix}body-color);
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: calc(50% - #{$header-caret-width});
+                top: calc(100% + #{$header-caret-width} + 0.05em);
+                border-left: $header-caret-width solid transparent;
+                border-right: $header-caret-width solid transparent;
+                // unable to access the :root variable --#{$prefix}body-bg, use SCSS variable instead.
+                border-bottom: $header-caret-width solid #{$body-bg};
+            }
+        }
+    }
+  }
+
   .search-bar {
     @include media-breakpoint-up(xxl) {
       width: 180px;