Add bottom line to navtabs

Author: taneliang

website/src/views/layout/Navtabs.scss

@@ -1,79 +1,57 @@
 @import '~styles/utils/modules-entry.scss';
 
+$divider-margin: 0.3rem;
+
 /*
   For breakpoint-md (tablets), show the links as compact buttons with labels below icons.
   For breakpoint-lg (desktop), show the links as traditional link with icon to the left.
   TODO: UPDATE COMMENT
 */
 .nav {
-  // position: fixed;
-  // top: $navbar-height;
-  z-index: $navtabs-z-index;
-  // See site.scss for width on md and lg sizes
+  // z-index: $navtabs-z-index; // TODO: Remove from main z-index list if no longer neeedd
   display: flex;
-  // justify-content: space-around;
   justify-content: center;
   align-items: stretch;
   height: $navtab-height;
   margin: 0 auto;
 }
 
 .link {
-  position: relative;
-  flex-shrink: 0;
-  flex-basis: auto;
   line-height: 1.6;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
   color: var(--gray-light);
-  transition: color 0.15s;
-  min-width: 6em;
+  min-width: 4rem;
+  margin: 0 0.2rem;
+  border-top: 0.2rem solid transparent;
+  border-bottom: 0.2rem solid transparent;
+
+  transition: color $desktop-entering-duration $material-deceleration-curve,
+    border-bottom-color $desktop-entering-duration $material-deceleration-curve;
 
   &.linkActive {
     color: theme-color(primary);
+    border-bottom-color: theme-color(primary);
   }
 
-  &:hover .title {
-    text-decoration: underline;
-  }
-
-  @include media-breakpoint-down(sm) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
-    min-width: unset;
-
-    svg {
-      margin-bottom: 0.1rem;
+  &:hover {
+    &:not(.linkActive) {
+      border-bottom-color: rgba(theme-color(primary), 0.3);
     }
   }
 
-  // @include media-breakpoint-up(md) {
-  //   padding: 0.8rem 0.5rem;
-  // }
-
-  @include media-breakpoint-up(xl) {
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    // padding: 0.8rem 0 0.8rem 2rem;
-    text-align: left;
-    min-width: 10em;
+  svg {
+    margin-bottom: 0.1rem;
   }
 }
 
 .title {
   display: none;
   font-size: 0.7rem;
-
-  @include media-breakpoint-up(md) {
-    display: block;
-  }
-
-  @include media-breakpoint-up(xl) {
-    margin-left: 0.4rem;
-    font-size: 1rem;
-  }
+  margin-left: 0.4rem;
+  font-size: 1rem;
 }
 
 .hiddenOnMobile {
@@ -82,42 +60,39 @@
   }
 }
 
-.divider {
-  $size: 70%;
-  $margin: 0.3rem;
+// TODO: To be resurrected in dropdown
+// .divider {
+//   $size: 70%;
 
-  composes: hiddenOnMobile;
-  opacity: 0.6;
-  flex: 0 0 1px;
-  margin: $margin ((100% - $size) / 2) 0;
-  background: var(--gray-lighter);
+//   composes: hiddenOnMobile;
+//   opacity: 0.6;
+//   flex: 0 0 1px;
+//   margin: $divider-margin ((100% - $size) / 2) 0;
+//   background: var(--gray-lighter);
+// }
 
-  @include media-breakpoint-up(xl) {
-    margin: $margin 1rem $margin 1.4rem;
+@include media-breakpoint-down(sm) {
+  .link {
+    min-width: unset;
   }
 }
 
-.updateDot {
-  position: absolute;
-  top: 0.5rem;
-  width: 0.5rem;
-  height: 0.5rem;
-  padding: 0;
-  margin-left: 1rem;
-  border-radius: 50%;
-  font-size: $font-size-xs;
-  line-height: 1.2;
-  background: theme-color(success);
-
-  :global {
-    animation: zoomIn 0.4s;
+@include media-breakpoint-up(lg) {
+  .link {
+    min-width: 8em;
   }
 
-  @include media-breakpoint-up(md) {
-    right: 1.4rem;
+  .title {
+    display: block;
   }
 
-  @include media-breakpoint-up(xl) {
-    display: none;
+  // .divider {
+  //   margin: $divider-margin 1rem $divider-margin 1.4rem;
+  // }
+}
+
+@include media-breakpoint-up(xl) {
+  .link {
+    min-width: 10em;
   }
 }