Fix top navigation positioning when window is resized

packages/kolibri/components/pages/AppBarPage/index.vue

@@ -71,10 +71,9 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const { windowBreakpoint, windowIsSmall } = useKResponsiveWindow();
+      const { windowIsSmall } = useKResponsiveWindow();
       const { isAppContext } = useUser();
       return {
-        windowBreakpoint,
         windowIsSmall,
         isAppContext,
       };
@@ -146,20 +145,17 @@
         return show;
       },
     },
-    watch: {
-      windowBreakpoint() {
-        //Update the the app bar height at every breakpoint
-        this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
-      },
+    beforeUpdate() {
+      // Update appBarHeight after AppBar is rerendered and updated
+      this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
     },
     mounted() {
-      this.$nextTick(() => {
-        this.appBarHeight = this.$refs.appBar.$el.scrollHeight || 0;
-      });
       this.addScrollListener();
+      window.addEventListener('resize', this.handleWindowResize);
     },
-    beforeUnmount() {
+    beforeDestroy() {
       this.removeScrollListener();
+      window.removeEventListener('resize', this.handleWindowResize);
     },
     methods: {
       addScrollListener() {
@@ -190,6 +186,10 @@
           this.throttledHandleScroll = null;
         }
       },
+      handleWindowResize() {
+        // Update the app bar height when window is resized
+        this.appBarHeight = this.$refs.appBar.$el.offsetHeight || 0;
+      },
     },
   };
 

packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue

@@ -49,7 +49,7 @@
         </template>
 
         <template
-          v-if="showNavigation && windowIsLarge"
+          v-if="showNavigation && showTopNavBar"
           #navigation
         >
           <slot name="sub-nav">
@@ -116,7 +116,7 @@
       </KToolbar>
     </header>
     <div
-      v-if="showNavigation && !windowIsLarge && !showAppNavView"
+      v-show="showNavigation && !showAppNavView && !showTopNavBar"
       class="subpage-nav"
     >
       <slot name="sub-nav">
@@ -160,7 +160,7 @@
     setup() {
       const store = getCurrentInstance().proxy.$store;
       const $route = computed(() => store.state.route);
-      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+      const { windowIsSmall, windowBreakpoint } = useKResponsiveWindow();
       const { topBarHeight, navItems } = useNav();
       const { isLearner, isUserLoggedIn, username, full_name } = useUser();
       const { totalPoints, fetchPoints } = useTotalProgress();
@@ -178,8 +178,8 @@
       });
       return {
         themeConfig,
-        windowIsLarge,
         windowIsSmall,
+        windowBreakpoint,
         topBarHeight,
         links,
         isUserLoggedIn,
@@ -207,6 +207,8 @@
     data() {
       return {
         pointsDisplayed: false,
+        breakpointLimit: 4,
+        showTopNavBar: false,
       };
     },
     computed: {
@@ -222,9 +224,18 @@
       window.addEventListener('click', this.handleWindowClick);
       window.addEventListener('keydown', this.handlePopoverByKeyboard, true);
     },
+    beforeUpdate() {
+      // Essential for title updates after data finishes loading
+      this.breakpointLimit = this.title && this.title.length >= 20 ? 4 : 3;
+      this.showTopNavBar = this.windowBreakpoint > this.breakpointLimit;
+    },
     beforeDestroy() {
       window.removeEventListener('click', this.handleWindowClick);
       window.removeEventListener('keydown', this.handlePopoverByKeyboard, true);
+      window.removeEventListener('resize', this.handleWindowResize);
+    },
+    mounted() {
+      window.addEventListener('resize', this.handleWindowResize);
     },
     methods: {
       handleWindowClick(event) {
@@ -246,6 +257,9 @@
           this.pointsDisplayed = false;
         }
       },
+      handleWindowResize() {
+        this.showTopNavBar = this.windowBreakpoint >= this.breakpointLimit;
+      },
       truncateText(value, maxLength) {
         if (value && value.length > maxLength) {
           return value.substring(0, maxLength) + '...';