fix(webapp): tab navigation (#9255)

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -427,21 +427,30 @@ export default {
   methods: {
     handleScroll() {
       const currentScrollPos = window.pageYOffset
+      const wasHidden = this.hideNavbar
       if (this.prevScrollpos > 50) {
-        if (this.prevScrollpos > currentScrollPos) {
+        this.hideNavbar = this.prevScrollpos <= currentScrollPos
-          this.hideNavbar = false
-        } else {
-          this.hideNavbar = true
-        }
       }
       this.prevScrollpos = currentScrollPos
+      if (wasHidden !== this.hideNavbar) {
+        this.$nextTick(() => this.updateHeaderOffset())
+      }
+    },
+    updateHeaderOffset() {
+      const el = this.$el
+      if (el) {
+        const height = this.hideNavbar ? 0 : el.offsetHeight
+        document.documentElement.style.setProperty('--header-height', `${height}px`)
+      }
     },
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
+      this.$nextTick(() => this.updateHeaderOffset())
     },
   },
   mounted() {
     window.addEventListener('scroll', this.handleScroll)
+    this.$nextTick(() => this.updateHeaderOffset())
   },
   beforeDestroy() {
     window.removeEventListener('scroll', this.handleScroll)

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -61,7 +61,6 @@ export default {
 
 .Tabs {
   position: relative;
-  background-color: #fff;
   height: 100%;
   display: flex;
   margin: 0;
@@ -90,8 +89,13 @@ export default {
 }
 .tab-navigation {
   position: sticky;
-  top: 53px;
+  top: var(--header-height, 53px);
-  z-index: 2;
+  z-index: $z-index-sticky;
+  transition: top 0.15s ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 .ds-tab-nav.os-card {
   padding: 0 !important;
@@ -108,4 +112,23 @@ export default {
     }
   }
 }
+@supports (container-type: scroll-state) {
+  .tab-navigation {
+    container-type: scroll-state;
+    container-name: tab-nav;
+  }
+  .ds-tab-nav.os-card {
+    border-radius: $border-radius-x-large $border-radius-x-large 0 0 !important;
+    transition: border-radius 0.15s ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+  @container tab-nav scroll-state(stuck: top) {
+    .ds-tab-nav.os-card {
+      border-radius: 0 !important;
+    }
+  }
+}
 </style>