From e52bce9f1dd16b952e016cb63440a66c19d60e87 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 14:20:45 +0530
Subject: [PATCH 001/102] Mkaing the studionavigationtab

---
 .../shared/views/StudioNavigationTab.vue      | 198 ++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
new file mode 100644
index 0000000000..9bab7199f9
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -0,0 +1,198 @@
+<template>
+
+  <RouterLink
+    v-if="to"
+    ref="tabElement"
+    :to="to"
+    :class="tabClasses"
+    :style="tabStyles"
+    :aria-current="isActive ? 'page' : null"
+    :tabindex="tabindex"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <span class="studio-navigation-tab__content">
+      <slot></slot>
+      <span
+        v-if="showBadge"
+        class="studio-navigation-tab__badge"
+        :aria-label="badgeAriaLabel"
+      >
+        {{ formattedBadgeValue }}
+      </span>
+    </span>
+    <span
+      v-if="isActive"
+      class="studio-navigation-tab__indicator"
+      :style="indicatorStyles"
+      aria-hidden="true"
+    ></span>
+  </RouterLink>
+  <button
+    v-else
+    ref="tabElement"
+    :class="tabClasses"
+    :style="tabStyles"
+    role="tab"
+    :aria-selected="isActive"
+    :tabindex="tabindex"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <span class="studio-navigation-tab__content">
+      <slot></slot>
+      <span
+        v-if="showBadge"
+        class="studio-navigation-tab__badge"
+        :aria-label="badgeAriaLabel"
+      >
+        {{ formattedBadgeValue }}
+      </span>
+    </span>
+    <span
+      v-if="isActive"
+      class="studio-navigation-tab__indicator"
+      :style="indicatorStyles"
+      aria-hidden="true"
+    ></span>
+  </button>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioNavigationTab',
+    inject: ['$themeTokens'],
+    props: {
+      to: {
+        type: [String, Object],
+        default: null,
+      },
+      badgeValue: {
+        type: Number,
+        default: 0,
+      },
+      notranslate: {
+        type: Boolean,
+        default: false,
+      },
+      tabindex: {
+        type: Number,
+        default: 0,
+      },
+    },
+    computed: {
+      tabClasses() {
+        return {
+          'studio-navigation-tab': true,
+          'studio-navigation-tab--active': this.isActive,
+          notranslate: this.notranslate,
+        };
+      },
+      tabStyles() {
+        return {
+          color: this.isActive ? this.$themeTokens.primary : this.$themeTokens.text,
+        };
+      },
+      indicatorStyles() {
+        return {
+          backgroundColor: this.$themeTokens.primary,
+        };
+      },
+      isActive() {
+        // Check if current route matches this tab's route
+        if (!this.to || !this.$route) return false;
+
+        const targetRoute = this.$router.resolve(this.to);
+        return this.$route.path === targetRoute.route.path;
+      },
+      showBadge() {
+        return this.badgeValue > 0;
+      },
+      formattedBadgeValue() {
+        return this.badgeValue > 99 ? '99+' : this.badgeValue.toString();
+      },
+      badgeAriaLabel() {
+        if (!this.showBadge) return null;
+        const count = this.badgeValue > 99 ? 'more than 99' : this.badgeValue;
+        return `${count} notification${this.badgeValue !== 1 ? 's' : ''}`;
+      },
+    },
+    methods: {
+      handleClick(event) {
+        this.$emit('click', event);
+      },
+      handleKeydown(event) {
+        // Emit keydown event for parent to handle navigation
+        this.$emit('keydown', event);
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .studio-navigation-tab {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    padding: 0 16px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    text-transform: uppercase;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    outline: none;
+    transition: color 0.2s ease, opacity 0.2s ease;
+  }
+
+  .studio-navigation-tab:hover {
+    opacity: 0.7;
+  }
+
+  .studio-navigation-tab:focus-visible {
+    outline: 2px solid currentcolor;
+    outline-offset: -2px;
+  }
+
+  .studio-navigation-tab__content {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .studio-navigation-tab__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    color: white;
+    background-color: #d32f2f;
+    border-radius: 10px;
+  }
+
+  .studio-navigation-tab__indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+  }
+
+</style>
\ No newline at end of file

From 0d5446665089c5c9fe642c410fee32caf7ad113d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 14:28:54 +0530
Subject: [PATCH 002/102] Updated

---
 .../shared/views/SkipNavigationLink.vue       |  88 ++
 .../shared/views/StudioNavigation.vue         | 812 ++++++++++++++++++
 2 files changed, 900 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
new file mode 100644
index 0000000000..920dd15e8c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
@@ -0,0 +1,88 @@
+<template>
+
+  <div class="skip-nav-link">
+    <KButton
+      ref="button"
+      :style="linkStyles"
+      appearance="basic-link"
+      :text="$tr('skipToMainContentAction')"
+      @click="handleClickSkipLink"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SkipNavigationLink',
+    computed: {
+      linkStyles() {
+        return {
+          backgroundColor: this.$themeTokens.surface,
+        };
+      },
+    },
+    methods: {
+      handleClickSkipLink() {
+        // Every page where this is supposed to work needs to have a top-level
+        // element with 'role' and 'id' attribute equal to 'main' and 'tabindex= -1'.
+        // If it doesn't have one, clicking this link is a noop, but will re-focus itself
+        // as a convenience (in case main div is still loading).
+        const mainEl = document.getElementById('main');
+        if (mainEl) {
+          // If it exists, actually target and focus on the main header
+          const header = mainEl.querySelector('h1');
+          if (header) {
+            // HACK: Need to set its tabindex attribute on the fly to get tab behavior
+            header.setAttribute('tabindex', -1);
+            header.focus();
+          } else {
+            mainEl.focus();
+          }
+        } else {
+          // NOTE: the button retains focus, but loses :focus styling after hitting "Enter"
+          // TODO: look into theme input modality to see if we can get consistent
+          // styling when in keyboard modality
+          this.$refs.button.$el.focus();
+        }
+      },
+    },
+    $trs: {
+      skipToMainContentAction: {
+        message: 'Skip to main content',
+        context:
+          'Button label for the hamburger menu in the top left corner. Accessible only to those who use screen readers and other assistive technology (AT).',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .skip-nav-link {
+    position: relative;
+    z-index: 2;
+  }
+
+  .skip-nav-link a {
+    @extend %dropshadow-2dp;
+
+    position: absolute;
+    left: -1000px;
+    padding: 8px 16px;
+    font-size: 14px;
+    outline-offset: 0 !important;
+
+    &:focus {
+      top: 8px;
+      left: 8px;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
new file mode 100644
index 0000000000..f2bb9797f6
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -0,0 +1,812 @@
+<template>
+
+  <div
+    ref="studioNavigation"
+    class="studio-navigation"
+    :style="{
+      backgroundColor: $themeTokens.appBar,
+      color: $themeTokens.text,
+    }"
+  >
+    <SkipNavigationLink />
+
+    <KToolbar
+      type="clear"
+      :style="{ backgroundColor: $themeTokens.appBar }"
+      :raised="false"
+      :removeNavIcon="true"
+    >
+      <template #icon>
+        <!-- Menu button for logged in users -->
+        <KIconButton
+          v-if="loggedIn && showMenuButton"
+          icon="menu"
+          :color="$themeTokens.text"
+          :ariaLabel="$tr('openMenu')"
+          @click="toggleSidePanel"
+        />
+
+        <!-- Logo link for non-logged in users -->
+        <KRouterLink
+          v-else
+          :to="homeLink"
+          exact
+          class="studio-navigation__logo-link"
+        >
+          <KLogo
+            altText="Kolibri Logo with background"
+            :size="36"
+          />
+        </KRouterLink>
+      </template>
+
+      <template #brand>
+        <span class="studio-navigation__title">
+          {{ title || $tr('title') }}
+        </span>
+      </template>
+
+      <template #actions>
+        <div
+          ref="studioNavigationActions"
+          aria-live="polite"
+          class="studio-navigation__actions"
+        >
+          <template v-if="loggedIn">
+            <KDropdownMenu
+              ref="userDropdownMenu"
+              :items="userMenuItems"
+              alignment="right"
+              @select="handleUserMenuSelect"
+            >
+              <template #default="{ toggle, isOpen }">
+                <KButton
+                  appearance="flat"
+                  style="text-transform: none"
+                  :ariaLabel="$tr('userMenuLabel')"
+                  :ariaExpanded="isOpen"
+                  @click="toggle"
+                >
+                  <KIcon
+                    icon="person"
+                    :color="$themeTokens.text"
+                    size="small"
+                  />
+                  <span class="studio-navigation__user-name">
+                    {{ user.first_name }}
+                  </span>
+                  <KIcon
+                    icon="dropdown"
+                    :color="$themeTokens.text"
+                    size="small"
+                    :class="{
+                      'studio-navigation__dropdown-icon': true,
+                      'studio-navigation__dropdown-icon--open': isOpen,
+                    }"
+                  />
+                </KButton>
+              </template>
+            </KDropdownMenu>
+          </template>
+
+          <template v-else>
+            <KDropdownMenu
+              :items="guestMenuItems"
+              alignment="right"
+              @select="handleGuestMenuSelect"
+            >
+              <template #default="{ toggle, isOpen }">
+                <KButton
+                  appearance="flat"
+                  style="text-transform: none"
+                  :ariaLabel="$tr('guestMenuLabel')"
+                  :ariaExpanded="isOpen"
+                  @click="toggle"
+                >
+                  <KIcon
+                    icon="person"
+                    :color="$themeTokens.text"
+                    size="small"
+                  />
+                  <KIcon
+                    icon="dropdown"
+                    :color="$themeTokens.text"
+                    size="small"
+                    :class="{
+                      'studio-navigation__dropdown-icon': true,
+                      'studio-navigation__dropdown-icon--open': isOpen,
+                    }"
+                  />
+                </KButton>
+              </template>
+            </KDropdownMenu>
+          </template>
+        </div>
+      </template>
+    </KToolbar>
+
+    <!-- Tabs extension area (for when tabs are provided) -->
+    <div
+      v-if="hasTabs"
+      class="studio-navigation__tabs-extension"
+      :aria-label="$tr('mainNavigationLabel')"
+      :style="{
+        backgroundColor: $themeTokens.appBar,
+      }"
+    >
+      <div
+        ref="tabsContainer"
+        role="tablist"
+        class="studio-navigation__tabs-container"
+        @keydown="handleTabsKeydown"
+      >
+        <slot name="tabs"></slot>
+      </div>
+    </div>
+
+    <!-- Side panel (replaces MainNavigationDrawer) -->
+    <SidePanelModal
+      v-if="loggedIn && sidePanelOpen"
+      alignment="left"
+      :aria-label="$tr('navigationMenu')"
+      @closePanel="sidePanelOpen = false"
+    >
+      <template #header>
+        <div class="side-panel-header">
+          <span class="side-panel-title">
+            {{ $tr('title') }}
+          </span>
+        </div>
+      </template>
+
+      <template #default>
+        <div class="side-panel-content">
+          <nav class="side-panel-nav">
+            <KRouterLink
+              :to="channelsLink"
+              class="side-panel-nav-item"
+              @click.native="sidePanelOpen = false"
+            >
+              <KIcon
+                icon="home"
+                size="small"
+                :color="$themeTokens.text"
+              />
+              <span class="side-panel-nav-text">{{ $tr('channelsLink') }}</span>
+            </KRouterLink>
+
+            <KRouterLink
+              v-if="user?.is_admin"
+              :to="administrationLink"
+              class="side-panel-nav-item"
+              @click.native="sidePanelOpen = false"
+            >
+              <KIcon
+                icon="people"
+                size="small"
+                :color="$themeTokens.text"
+              />
+              <span class="side-panel-nav-text">{{ $tr('administrationLink') }}</span>
+            </KRouterLink>
+
+            <KRouterLink
+              :to="settingsLink"
+              class="side-panel-nav-item"
+              @click.native="
+                sidePanelOpen = false;
+                trackClick('Settings');
+              "
+            >
+              <KIcon
+                icon="settings"
+                size="small"
+                :color="$themeTokens.text"
+              />
+              <span class="side-panel-nav-text">{{ $tr('settingsLink') }}</span>
+            </KRouterLink>
+
+            <KButton
+              appearance="flat"
+              class="side-panel-nav-item"
+              @click="openLanguageModal"
+            >
+              <KIcon
+                icon="language"
+                size="small"
+                :color="$themeTokens.text"
+              />
+              <span class="side-panel-nav-text">{{ $tr('changeLanguage') }}</span>
+            </KButton>
+
+            <KExternalLink
+              :href="helpLink"
+              class="side-panel-nav-item"
+              @click.native="
+                sidePanelOpen = false;
+                trackClick('Help');
+              "
+            >
+              <KIcon
+                icon="openNewTab"
+                size="small"
+                :color="$themeTokens.text"
+              />
+              <span class="side-panel-nav-text">{{ $tr('helpLink') }}</span>
+            </KExternalLink>
+
+            <KButton
+              appearance="flat"
+              class="side-panel-nav-item"
+              @click="logout"
+            >
+              <KIcon
+                icon="logout"
+                size="small"
+                :color="$themeTokens.text"
+              />
+              <span class="side-panel-nav-text">{{ $tr('logoutLink') }}</span>
+            </KButton>
+          </nav>
+
+          <div class="side-panel-footer">
+            <div class="side-panel-logo">
+              <KLogo
+                altText="Kolibri logo"
+                :showBackground="true"
+                :size="88"
+              />
+            </div>
+
+            <KExternalLink
+              :href="copyrightLink"
+              class="side-panel-copyright"
+              @click.native="sidePanelOpen = false"
+            >
+              {{ $tr('copyright', { year: new Date().getFullYear() }) }}
+            </KExternalLink>
+
+            <p class="side-panel-feedback">
+              <KExternalLink
+                href="https://community.learningequality.org/c/support/studio"
+                @click.native="sidePanelOpen = false"
+              >
+                {{ $tr('giveFeedback') }}
+              </KExternalLink>
+            </p>
+          </div>
+        </div>
+      </template>
+    </SidePanelModal>
+
+    <!-- Language Switcher Modal -->
+    <LanguageSwitcherModal
+      v-if="showLanguageModal"
+      :style="{ color: $themeTokens.text }"
+      @cancel="showLanguageModal = false"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapState, mapGetters } from 'vuex';
+  import LanguageSwitcherModal from '../languageSwitcher/LanguageSwitcherModal.vue';
+  import SidePanelModal from './SidePanelModal';
+  import SkipNavigationLink from './SkipNavigationLink.vue';
+
+  export default {
+    name: 'StudioNavigation',
+    components: {
+      SidePanelModal,
+      SkipNavigationLink,
+      LanguageSwitcherModal,
+    },
+    props: {
+      title: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      showMenuButton: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data() {
+      return {
+        sidePanelOpen: false,
+        showLanguageModal: false,
+        isMobile: window.innerWidth < 768,
+      };
+    },
+    computed: {
+      ...mapState({
+        user: state => state.session.currentUser,
+      }),
+      ...mapGetters(['loggedIn']),
+      hasTabs() {
+        return !!this.$slots.tabs;
+      },
+      homeLink() {
+        return window.Urls?.channels() || '/';
+      },
+      channelsLink() {
+        return window.Urls?.channels() || '/channels';
+      },
+      administrationLink() {
+        return window.Urls?.administration() || '/administration';
+      },
+      settingsLink() {
+        return window.Urls?.settings() || '/settings';
+      },
+      helpLink() {
+        return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
+      },
+      copyrightLink() {
+        return 'https://learningequality.org/';
+      },
+      userMenuItems() {
+        const items = [];
+
+        if (this.user?.is_admin) {
+          items.push({
+            label: this.$tr('administration'),
+            value: 'administration',
+            icon: 'people',
+          });
+        }
+
+        items.push(
+          {
+            label: this.$tr('settings'),
+            value: 'settings',
+            icon: 'settings',
+          },
+          {
+            label: this.$tr('changeLanguage'),
+            value: 'change-language',
+            icon: 'language',
+          },
+          {
+            label: this.$tr('help'),
+            value: 'help',
+            icon: 'openNewTab',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: this.$tr('logOut'),
+            value: 'logout',
+            icon: 'logout',
+          },
+        );
+
+        return items;
+      },
+      guestMenuItems() {
+        return [
+          {
+            label: this.$tr('logIn'),
+            value: 'login',
+            icon: 'login',
+          },
+          {
+            label: this.$tr('changeLanguage'),
+            value: 'change-language',
+            icon: 'language',
+          },
+        ];
+      },
+    },
+    mounted() {
+      window.addEventListener('resize', this.handleResize);
+      this.updateTabIndices();
+    },
+    updated() {
+      // Update tab indices whenever tabs change
+      this.$nextTick(() => {
+        this.updateTabIndices();
+      });
+    },
+    beforeUnmount() {
+      window.removeEventListener('resize', this.handleResize);
+    },
+    methods: {
+      ...mapActions(['logout']),
+      handleResize() {
+        this.isMobile = window.innerWidth < 768;
+      },
+      toggleSidePanel() {
+        this.sidePanelOpen = !this.sidePanelOpen;
+      },
+      handleUserMenuSelect(item) {
+        switch (item.value) {
+          case 'administration':
+            window.location.href = this.administrationLink;
+            break;
+          case 'settings':
+            window.location.href = this.settingsLink;
+            break;
+          case 'change-language':
+            this.showLanguageModal = true;
+            break;
+          case 'help':
+            window.open(this.helpLink, '_blank');
+            break;
+          case 'logout':
+            this.logout();
+            break;
+        }
+      },
+      handleGuestMenuSelect(item) {
+        switch (item.value) {
+          case 'login':
+            window.location.href = '/accounts/';
+            break;
+          case 'change-language':
+            this.showLanguageModal = true;
+            break;
+        }
+      },
+      trackClick(label) {
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', `User dropdown - ${label}`);
+        }
+      },
+      openLanguageModal() {
+        this.sidePanelOpen = false;
+        this.showLanguageModal = true;
+      },
+      handleTabsKeydown(event) {
+        // Get all tab elements
+        const tabs = this.getTabElements();
+        if (!tabs.length) return;
+
+        // Find currently focused tab
+        const currentIndex = tabs.findIndex(tab => 
+          tab === event.target || tab.contains(event.target)
+        );
+
+        if (currentIndex === -1) return;
+
+        let nextIndex = currentIndex;
+
+        switch (event.key) {
+          case 'ArrowLeft':
+            event.preventDefault();
+            // Move to previous tab (or wrap to last)
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+            // Reverse for RTL
+            if (this.$isRTL) {
+              nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+            }
+            break;
+
+          case 'ArrowRight':
+            event.preventDefault();
+            // Move to next tab (or wrap to first)
+            nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+            // Reverse for RTL
+            if (this.$isRTL) {
+              nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+            }
+            break;
+
+          case 'Home':
+            event.preventDefault();
+            nextIndex = 0;
+            break;
+
+          case 'End':
+            event.preventDefault();
+            nextIndex = tabs.length - 1;
+            break;
+
+          default:
+            return;
+        }
+
+        // Focus the next tab
+        this.focusTab(tabs[nextIndex]);
+      },
+      getTabElements() {
+        // Get all tab children from the slot
+        if (!this.$refs.tabsContainer) return [];
+        
+        // Find all interactive elements that represent tabs
+        const tabs = Array.from(
+          this.$refs.tabsContainer.querySelectorAll('a[role], button[role="tab"], a[href]')
+        );
+        
+        return tabs;
+      },
+      focusTab(tabElement) {
+        if (!tabElement) return;
+        
+        // Try to call focus method on Vue component instance if available
+        const vueInstance = tabElement.__vueParentComponent?.ctx;
+        if (vueInstance?.focus) {
+          vueInstance.focus();
+        } else {
+          // Fallback to native focus
+          tabElement.focus();
+        }
+      },
+      updateTabIndices() {
+        // Update tabindex for roving tabindex pattern
+        const tabs = this.getTabElements();
+        if (!tabs.length) return;
+
+        // Find active tab or use first tab
+        const activeTab = tabs.find(tab => 
+          tab.getAttribute('aria-current') === 'page' ||
+          tab.getAttribute('aria-selected') === 'true'
+        );
+        const focusableTab = activeTab || tabs[0];
+
+        // Set tabindex: 0 for focusable tab, -1 for others
+        tabs.forEach(tab => {
+          tab.setAttribute('tabindex', tab === focusableTab ? '0' : '-1');
+        });
+      },
+    },
+    $trs: {
+      title: 'Kolibri Studio',
+      openMenu: 'Open navigation menu',
+      navigationMenu: 'Navigation menu',
+      mainNavigationLabel: 'Main navigation',
+      userMenuLabel: 'User menu',
+      guestMenuLabel: 'Guest menu',
+      administration: 'Administration',
+      changeLanguage: 'Change language',
+      settings: 'Settings',
+      help: 'Help and support',
+      logIn: 'Sign in',
+      logOut: 'Sign out',
+      channelsLink: 'Channels',
+      administrationLink: 'Administration',
+      settingsLink: 'Settings',
+      helpLink: 'Help and support',
+      logoutLink: 'Sign out',
+      copyright: '© {year} Learning Equality',
+      giveFeedback: 'Give feedback',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .studio-navigation {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  ::v-deep .k-toolbar-left {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+
+  ::v-deep .k-toolbar-brand {
+    display: flex;
+    align-items: center;
+    margin-right: 24px;
+  }
+
+  ::v-deep .k-toolbar-navigation {
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+  }
+
+  ::v-deep .k-toolbar-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .studio-navigation__logo-link {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    text-decoration: none;
+    border-radius: 8px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .studio-navigation__title {
+    margin-left: 16px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .studio-navigation__tabs {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .studio-navigation__actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .studio-navigation__user-name {
+    margin: 0 8px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .studio-navigation__dropdown-icon {
+    transition: transform 0.2s ease;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  /* Tabs extension area */
+  .studio-navigation__tabs-extension {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  .studio-navigation__tabs-container {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 16px;
+
+    /* Focus within styling for keyboard navigation */
+    &:focus-within {
+      outline: none;
+    }
+  }
+
+  /* Side panel styles */
+  .side-panel-header {
+    display: flex;
+    align-items: center;
+    min-height: 60px;
+    padding: 0 16px;
+  }
+
+  .side-panel-title {
+    margin-left: 16px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .side-panel-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .side-panel-nav {
+    flex: 1;
+    padding: 16px 0;
+  }
+
+  .side-panel-nav-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    width: 100%;
+    padding: 12px 24px;
+    font-size: 16px;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    background: transparent;
+    outline: none;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentcolor;
+      outline-offset: -2px;
+    }
+  }
+
+  .side-panel-nav-text {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .side-panel-footer {
+    padding: 24px;
+    text-align: center;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  .side-panel-logo {
+    margin-bottom: 16px;
+  }
+
+  .side-panel-copyright {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    text-decoration: none;
+  }
+
+  .side-panel-feedback {
+    margin: 0;
+
+    a {
+      font-size: 14px;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* Mobile styles */
+  @media (max-width: 767px) {
+    .studio-navigation__title {
+      margin-left: 12px;
+      font-size: 18px;
+    }
+
+    .studio-navigation__tabs {
+      display: none;
+    }
+
+    .studio-navigation__tabs-container {
+      padding: 0 12px;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .studio-navigation__user-name {
+      display: none;
+    }
+
+    .studio-navigation__actions {
+      gap: 8px;
+    }
+  }
+
+  /* RTL Support */
+  [dir='rtl'] {
+    .studio-navigation__title {
+      margin-right: 16px;
+      margin-left: 0;
+    }
+
+    .side-panel-title {
+      margin-right: 16px;
+      margin-left: 0;
+    }
+
+    .side-panel-nav-item {
+      text-align: right;
+    }
+
+    .studio-navigation__dropdown-icon--open {
+      transform: rotate(180deg) scaleX(-1);
+    }
+  }
+
+</style>
\ No newline at end of file

From 7967140898e9cf12d0bbf7c97da500656dd064fd Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 12:27:08 +0530
Subject: [PATCH 003/102] FIX: resolved the merge conflicts

---
 .../channelList/views/ChannelListIndex.vue    |  35 +--
 .../shared/views/StudioNavigation.vue         | 290 +++++++-----------
 2 files changed, 123 insertions(+), 202 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index efc87cb4d3..f4c84e4e99 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -27,47 +27,41 @@
         {{ isFAQPage ? $tr('frequentlyAskedQuestions') : $tr('libraryTitle') }}
       </VToolbarTitle>
     </VToolbar>
-    <AppBar v-else>
+    <StudioNavigation v-else>
       <template
         v-if="loggedIn"
         #tabs
       >
-        <VTab
+        <StudioNavigationTab
           v-for="listType in lists"
           :key="listType.id"
           :to="getChannelLink(listType)"
+          :badge-value="invitationsByListCounts[listType]"
           @click="trackTabClick(listType)"
         >
-          <VBadge
-            :value="invitationsByListCounts[listType]"
-            color="black"
-          >
-            <template #badge>
-              <span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
-            </template>
-            <span>{{ translateConstant(listType) }}</span>
-          </VBadge>
-        </VTab>
-        <VTab
+          {{ translateConstant(listType) }}
+        </StudioNavigationTab>
+
+        <StudioNavigationTab
           :to="catalogLink"
           @click="publicTabClick"
         >
           {{ $tr('catalog') }}
-        </VTab>
-        <VTab
+        </StudioNavigationTab>
+        <StudioNavigationTab
           :to="communityLibraryLink"
           @click="communityLibraryTabClick"
         >
           {{ communityLibraryLabel$() }}
-        </VTab>
-        <VTab
+        </StudioNavigationTab>
+        <StudioNavigationTab
           :to="channelSetLink"
           @click="channelSetsTabClick"
         >
           {{ $tr('channelSets') }}
-        </VTab>
+        </StudioNavigationTab>
       </template>
-    </AppBar>
+    </StudioNavigation>
     <VContent>
       <StudioOfflineAlert
         v-if="!isCatalogPage"
@@ -106,7 +100,7 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import AppBar from 'shared/views/AppBar';
+
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
@@ -129,7 +123,6 @@
   export default {
     name: 'ChannelListIndex',
     components: {
-      AppBar,
       ChannelListAppError,
       GlobalSnackbar,
       PolicyModals,
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index f2bb9797f6..dd67260d73 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -12,14 +12,16 @@
 
     <KToolbar
       type="clear"
-      :style="{ backgroundColor: $themeTokens.appBar }"
+      :style="{
+        backgroundColor: $themeTokens.appBar,
+        height: '56px',
+      }"
       :raised="false"
-      :removeNavIcon="true"
     >
       <template #icon>
         <!-- Menu button for logged in users -->
         <KIconButton
-          v-if="loggedIn && showMenuButton"
+          v-if="loggedIn"
           icon="menu"
           :color="$themeTokens.text"
           :ariaLabel="$tr('openMenu')"
@@ -53,73 +55,57 @@
           class="studio-navigation__actions"
         >
           <template v-if="loggedIn">
-            <KDropdownMenu
-              ref="userDropdownMenu"
-              :items="userMenuItems"
-              alignment="right"
-              @select="handleUserMenuSelect"
+            <KButton
+              appearance="flat-button"
+              style="text-transform: none"
+              :ariaLabel="$tr('userMenuLabel')"
             >
-              <template #default="{ toggle, isOpen }">
-                <KButton
-                  appearance="flat"
-                  style="text-transform: none"
-                  :ariaLabel="$tr('userMenuLabel')"
-                  :ariaExpanded="isOpen"
-                  @click="toggle"
-                >
-                  <KIcon
-                    icon="person"
-                    :color="$themeTokens.text"
-                    size="small"
-                  />
-                  <span class="studio-navigation__user-name">
-                    {{ user.first_name }}
-                  </span>
-                  <KIcon
-                    icon="dropdown"
-                    :color="$themeTokens.text"
-                    size="small"
-                    :class="{
-                      'studio-navigation__dropdown-icon': true,
-                      'studio-navigation__dropdown-icon--open': isOpen,
-                    }"
-                  />
-                </KButton>
-              </template>
-            </KDropdownMenu>
+              <KIconButton
+                :disabled="true"
+                icon="person"
+                color="black"
+              />
+              <span class="mx-2 subheading">
+                {{ user.first_name }}
+              </span>
+              <KIconButton
+                :disabled="true"
+                icon="dropdown"
+                color="black"
+              />
+
+              <KDropdownMenu
+                :options="userMenuItems"
+                :hasIcons="true"
+                @select="handleUserMenuSelect"
+              />
+            </KButton>
           </template>
 
           <template v-else>
-            <KDropdownMenu
-              :items="guestMenuItems"
-              alignment="right"
-              @select="handleGuestMenuSelect"
+            <KButton
+              appearance="flat-button"
+              style="text-transform: none"
+              :ariaLabel="$tr('guestMenuLabel')"
+              class="guest-menu-button"
             >
-              <template #default="{ toggle, isOpen }">
-                <KButton
-                  appearance="flat"
-                  style="text-transform: none"
-                  :ariaLabel="$tr('guestMenuLabel')"
-                  :ariaExpanded="isOpen"
-                  @click="toggle"
-                >
-                  <KIcon
-                    icon="person"
-                    :color="$themeTokens.text"
-                    size="small"
-                  />
-                  <KIcon
-                    icon="dropdown"
-                    :color="$themeTokens.text"
-                    size="small"
-                    :class="{
-                      'studio-navigation__dropdown-icon': true,
-                      'studio-navigation__dropdown-icon--open': isOpen,
-                    }"
-                  />
-                </KButton>
-              </template>
-            </KDropdownMenu>
+              <KIconButton
+                :disabled="true"
+                icon="person"
+                color="black"
+              />
+              <KIconButton
+                :disabled="true"
+                icon="dropdown"
+                color="black"
+              />
+
+              <KDropdownMenu
+                :options="guestMenuItems"
+                :hasIcons="true"
+                @select="handleGuestMenuSelect"
+              />
+            </KButton>
           </template>
         </div>
       </template>
@@ -130,9 +116,6 @@
       v-if="hasTabs"
       class="studio-navigation__tabs-extension"
       :aria-label="$tr('mainNavigationLabel')"
-      :style="{
-        backgroundColor: $themeTokens.appBar,
-      }"
     >
       <div
         ref="tabsContainer"
@@ -148,7 +131,10 @@
     <SidePanelModal
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
+      sidePanelWidth="300px"
       :aria-label="$tr('navigationMenu')"
+      closeButtonIconType="clear"
+      immersive
       @closePanel="sidePanelOpen = false"
     >
       <template #header>
@@ -164,13 +150,14 @@
           <nav class="side-panel-nav">
             <KRouterLink
               :to="channelsLink"
-              class="side-panel-nav-item"
+              class="side-panel-nav-item subheading"
+              appearance="flat-button"
+              :appearanceOverrides="navItemAppearance"
               @click.native="sidePanelOpen = false"
             >
-              <KIcon
+              <KIconButton
+                :disabled="true"
                 icon="home"
-                size="small"
-                :color="$themeTokens.text"
               />
               <span class="side-panel-nav-text">{{ $tr('channelsLink') }}</span>
             </KRouterLink>
@@ -178,71 +165,74 @@
             <KRouterLink
               v-if="user?.is_admin"
               :to="administrationLink"
-              class="side-panel-nav-item"
+              class="side-panel-nav-item subheading"
+              appearance="flat-button"
+              :appearanceOverrides="navItemAppearance"
               @click.native="sidePanelOpen = false"
             >
-              <KIcon
+              <KIconButton
+                :disabled="true"
                 icon="people"
-                size="small"
-                :color="$themeTokens.text"
               />
               <span class="side-panel-nav-text">{{ $tr('administrationLink') }}</span>
             </KRouterLink>
 
             <KRouterLink
               :to="settingsLink"
-              class="side-panel-nav-item"
+              class="side-panel-nav-item subheading"
+              appearance="flat-button"
+              :appearanceOverrides="navItemAppearance"
               @click.native="
                 sidePanelOpen = false;
                 trackClick('Settings');
               "
             >
-              <KIcon
+              <KIconButton
+                :disabled="true"
                 icon="settings"
-                size="small"
-                :color="$themeTokens.text"
               />
               <span class="side-panel-nav-text">{{ $tr('settingsLink') }}</span>
             </KRouterLink>
 
             <KButton
-              appearance="flat"
-              class="side-panel-nav-item"
+              appearance="flat-button"
+              class="side-panel-nav-item subheading"
+              :appearanceOverrides="navItemAppearance"
               @click="openLanguageModal"
             >
-              <KIcon
+              <KIconButton
+                :disabled="true"
                 icon="language"
-                size="small"
-                :color="$themeTokens.text"
               />
               <span class="side-panel-nav-text">{{ $tr('changeLanguage') }}</span>
             </KButton>
 
             <KExternalLink
               :href="helpLink"
-              class="side-panel-nav-item"
+              class="side-panel-nav-item subheading"
+              appearance="flat-button"
+              :appearanceOverrides="navItemAppearance"
               @click.native="
                 sidePanelOpen = false;
                 trackClick('Help');
               "
             >
-              <KIcon
+              <KIconButton
+                :disabled="true"
                 icon="openNewTab"
-                size="small"
-                :color="$themeTokens.text"
               />
               <span class="side-panel-nav-text">{{ $tr('helpLink') }}</span>
             </KExternalLink>
 
             <KButton
-              appearance="flat"
-              class="side-panel-nav-item"
+              appearance="flat-button"
+              class="side-panel-nav-item subheading"
+              :appearanceOverrides="navItemAppearance"
               @click="logout"
             >
-              <KIcon
+              <KIconButton
+                :disabled="true"
                 icon="logout"
-                size="small"
-                :color="$themeTokens.text"
               />
               <span class="side-panel-nav-text">{{ $tr('logoutLink') }}</span>
             </KButton>
@@ -309,10 +299,6 @@
         required: false,
         default: null,
       },
-      showMenuButton: {
-        type: Boolean,
-        default: true,
-      },
     },
     data() {
       return {
@@ -329,6 +315,11 @@
       hasTabs() {
         return !!this.$slots.tabs;
       },
+      navItemAppearance() {
+        return {
+          justifyContent: 'flex-start',
+        };
+      },
       homeLink() {
         return window.Urls?.channels() || '/';
       },
@@ -374,9 +365,6 @@
             value: 'help',
             icon: 'openNewTab',
           },
-          {
-            type: 'separator',
-          },
           {
             label: this.$tr('logOut'),
             value: 'logout',
@@ -435,6 +423,7 @@
             break;
           case 'help':
             window.open(this.helpLink, '_blank');
+            this.trackClick('Help');
             break;
           case 'logout':
             this.logout();
@@ -466,8 +455,8 @@
         if (!tabs.length) return;
 
         // Find currently focused tab
-        const currentIndex = tabs.findIndex(tab => 
-          tab === event.target || tab.contains(event.target)
+        const currentIndex = tabs.findIndex(
+          tab => tab === event.target || tab.contains(event.target),
         );
 
         if (currentIndex === -1) return;
@@ -515,17 +504,17 @@
       getTabElements() {
         // Get all tab children from the slot
         if (!this.$refs.tabsContainer) return [];
-        
+
         // Find all interactive elements that represent tabs
         const tabs = Array.from(
-          this.$refs.tabsContainer.querySelectorAll('a[role], button[role="tab"], a[href]')
+          this.$refs.tabsContainer.querySelectorAll('a[role], button[role="tab"], a[href]'),
         );
-        
+
         return tabs;
       },
       focusTab(tabElement) {
         if (!tabElement) return;
-        
+
         // Try to call focus method on Vue component instance if available
         const vueInstance = tabElement.__vueParentComponent?.ctx;
         if (vueInstance?.focus) {
@@ -541,9 +530,10 @@
         if (!tabs.length) return;
 
         // Find active tab or use first tab
-        const activeTab = tabs.find(tab => 
-          tab.getAttribute('aria-current') === 'page' ||
-          tab.getAttribute('aria-selected') === 'true'
+        const activeTab = tabs.find(
+          tab =>
+            tab.getAttribute('aria-current') === 'page' ||
+            tab.getAttribute('aria-selected') === 'true',
         );
         const focusableTab = activeTab || tabs[0];
 
@@ -581,6 +571,8 @@
 
 <style lang="scss" scoped>
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .studio-navigation {
     position: sticky;
     top: 0;
@@ -588,29 +580,6 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
-  ::v-deep .k-toolbar-left {
-    display: flex;
-    align-items: center;
-    margin-left: 8px;
-  }
-
-  ::v-deep .k-toolbar-brand {
-    display: flex;
-    align-items: center;
-    margin-right: 24px;
-  }
-
-  ::v-deep .k-toolbar-navigation {
-    display: flex;
-    align-items: center;
-    margin-left: 24px;
-  }
-
-  ::v-deep .k-toolbar-right {
-    display: flex;
-    align-items: center;
-  }
-
   .studio-navigation__logo-link {
     display: flex;
     align-items: center;
@@ -629,35 +598,15 @@
     font-weight: 500;
   }
 
-  .studio-navigation__tabs {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-
   .studio-navigation__actions {
     display: flex;
     gap: 16px;
     align-items: center;
   }
 
-  .studio-navigation__user-name {
-    margin: 0 8px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  .studio-navigation__dropdown-icon {
-    transition: transform 0.2s ease;
-
-    &--open {
-      transform: rotate(180deg);
-    }
-  }
-
   /* Tabs extension area */
   .studio-navigation__tabs-extension {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    @extend %dropshadow-2dp;
   }
 
   .studio-navigation__tabs-container {
@@ -694,35 +643,22 @@
 
   .side-panel-nav {
     flex: 1;
+    width: 100%;
     padding: 16px 0;
   }
 
   .side-panel-nav-item {
     display: flex;
-    gap: 16px;
+    gap: 12px;
     align-items: center;
+    justify-content: flex-start;
     width: 100%;
-    padding: 12px 24px;
-    font-size: 16px;
+    padding: 8px 16px;
+    margin: 0;
     text-align: left;
-    text-decoration: none;
-    cursor: pointer;
-    background: transparent;
-    outline: none;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
-    }
-
-    &:focus-visible {
-      outline: 2px solid currentcolor;
-      outline-offset: -2px;
-    }
   }
 
   .side-panel-nav-text {
-    flex: 1;
     font-size: 16px;
     font-weight: 500;
   }
@@ -764,10 +700,6 @@
       font-size: 18px;
     }
 
-    .studio-navigation__tabs {
-      display: none;
-    }
-
     .studio-navigation__tabs-container {
       padding: 0 12px;
       overflow-x: auto;
@@ -803,10 +735,6 @@
     .side-panel-nav-item {
       text-align: right;
     }
-
-    .studio-navigation__dropdown-icon--open {
-      transform: rotate(180deg) scaleX(-1);
-    }
   }
 
-</style>
\ No newline at end of file
+</style>

From 2639864818e321966a774a92da26138f25fd80cc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 14:48:08 +0530
Subject: [PATCH 004/102] Updated

---
 .../frontend/channelList/views/ChannelListIndex.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index f4c84e4e99..d9dc547e86 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -36,7 +36,7 @@
           v-for="listType in lists"
           :key="listType.id"
           :to="getChannelLink(listType)"
-          :badge-value="invitationsByListCounts[listType]"
+          :badgeValue="invitationsByListCounts[listType]"
           @click="trackTabClick(listType)"
         >
           {{ translateConstant(listType) }}
@@ -100,7 +100,8 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-
+  import StudioNavigation from 'shared/views/StudioNavigation';
+  import StudioNavigationTab from 'shared/views/StudioNavigationTab';
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
@@ -123,6 +124,9 @@
   export default {
     name: 'ChannelListIndex',
     components: {
+      StudioNavigation,
+      StudioNavigationTab,
+      ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
       PolicyModals,
@@ -308,4 +312,4 @@
     height: 100%;
   }
 
-</style>
+</style>
\ No newline at end of file

From ca5ee87c6c04d5740fd5fa07b2f5650ed22d8a25 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 15:52:16 +0530
Subject: [PATCH 005/102] Updated

---
 .../shared/views/StudioNavigation.vue         | 79 +++++++------------
 1 file changed, 29 insertions(+), 50 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index dd67260d73..8ab131c997 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -29,17 +29,16 @@
         />
 
         <!-- Logo link for non-logged in users -->
-        <KRouterLink
+        <KExternalLink
           v-else
-          :to="homeLink"
-          exact
+          :href="homeLink"
           class="studio-navigation__logo-link"
         >
           <KLogo
             altText="Kolibri Logo with background"
             :size="36"
           />
-        </KRouterLink>
+        </KExternalLink>
       </template>
 
       <template #brand>
@@ -131,7 +130,7 @@
     <SidePanelModal
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
-      sidePanelWidth="300px"
+      :style="{ '--side-panel-width': '300px' }"
       :aria-label="$tr('navigationMenu')"
       closeButtonIconType="clear"
       immersive
@@ -148,8 +147,8 @@
       <template #default>
         <div class="side-panel-content">
           <nav class="side-panel-nav">
-            <KRouterLink
-              :to="channelsLink"
+            <KExternalLink
+              :href="channelsLink"
               class="side-panel-nav-item subheading"
               appearance="flat-button"
               :appearanceOverrides="navItemAppearance"
@@ -160,11 +159,11 @@
                 icon="home"
               />
               <span class="side-panel-nav-text">{{ $tr('channelsLink') }}</span>
-            </KRouterLink>
+            </KExternalLink>
 
-            <KRouterLink
+            <KExternalLink
               v-if="user?.is_admin"
-              :to="administrationLink"
+              :href="administrationLink"
               class="side-panel-nav-item subheading"
               appearance="flat-button"
               :appearanceOverrides="navItemAppearance"
@@ -175,10 +174,10 @@
                 icon="people"
               />
               <span class="side-panel-nav-text">{{ $tr('administrationLink') }}</span>
-            </KRouterLink>
+            </KExternalLink>
 
-            <KRouterLink
-              :to="settingsLink"
+            <KExternalLink
+              :href="settingsLink"
               class="side-panel-nav-item subheading"
               appearance="flat-button"
               :appearanceOverrides="navItemAppearance"
@@ -192,7 +191,7 @@
                 icon="settings"
               />
               <span class="side-panel-nav-text">{{ $tr('settingsLink') }}</span>
-            </KRouterLink>
+            </KExternalLink>
 
             <KButton
               appearance="flat-button"
@@ -304,7 +303,6 @@
       return {
         sidePanelOpen: false,
         showLanguageModal: false,
-        isMobile: window.innerWidth < 768,
       };
     },
     computed: {
@@ -390,7 +388,6 @@
       },
     },
     mounted() {
-      window.addEventListener('resize', this.handleResize);
       this.updateTabIndices();
     },
     updated() {
@@ -399,14 +396,8 @@
         this.updateTabIndices();
       });
     },
-    beforeUnmount() {
-      window.removeEventListener('resize', this.handleResize);
-    },
     methods: {
       ...mapActions(['logout']),
-      handleResize() {
-        this.isMobile = window.innerWidth < 768;
-      },
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
@@ -614,6 +605,13 @@
     align-items: center;
     min-height: 48px;
     padding: 0 16px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     /* Focus within styling for keyboard navigation */
     &:focus-within {
@@ -621,12 +619,14 @@
     }
   }
 
-  /* Side panel styles */
   .side-panel-header {
     display: flex;
     align-items: center;
     min-height: 60px;
     padding: 0 16px;
+    width: 300px;
+    max-width: 300px;
+    min-width: 300px;
   }
 
   .side-panel-title {
@@ -639,12 +639,18 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 300px;
+    max-width: 300px;
+    min-width: 300px;
   }
 
   .side-panel-nav {
     flex: 1;
     width: 100%;
     padding: 16px 0;
+    width: 300px;
+    max-width: 300px;
+    min-width: 300px;
   }
 
   .side-panel-nav-item {
@@ -693,33 +699,6 @@
     }
   }
 
-  /* Mobile styles */
-  @media (max-width: 767px) {
-    .studio-navigation__title {
-      margin-left: 12px;
-      font-size: 18px;
-    }
-
-    .studio-navigation__tabs-container {
-      padding: 0 12px;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    .studio-navigation__user-name {
-      display: none;
-    }
-
-    .studio-navigation__actions {
-      gap: 8px;
-    }
-  }
-
   /* RTL Support */
   [dir='rtl'] {
     .studio-navigation__title {

From 40fba77b58884a8204a4e34e879b795af842804f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 15:57:39 +0530
Subject: [PATCH 006/102] Updated

---
 .../shared/views/StudioNavigation.vue         | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 8ab131c997..a760f6b616 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -130,7 +130,7 @@
     <SidePanelModal
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
-      :style="{ '--side-panel-width': '300px' }"
+      sidePanelWidth="300px"
       :aria-label="$tr('navigationMenu')"
       closeButtonIconType="clear"
       immersive
@@ -605,13 +605,6 @@
     align-items: center;
     min-height: 48px;
     padding: 0 16px;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
 
     /* Focus within styling for keyboard navigation */
     &:focus-within {
@@ -619,14 +612,12 @@
     }
   }
 
+  /* Side panel styles */
   .side-panel-header {
     display: flex;
     align-items: center;
     min-height: 60px;
     padding: 0 16px;
-    width: 300px;
-    max-width: 300px;
-    min-width: 300px;
   }
 
   .side-panel-title {
@@ -639,18 +630,13 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: 300px;
-    max-width: 300px;
-    min-width: 300px;
   }
 
   .side-panel-nav {
     flex: 1;
     width: 100%;
     padding: 16px 0;
-    width: 300px;
-    max-width: 300px;
-    min-width: 300px;
+    width: 100%;
   }
 
   .side-panel-nav-item {
@@ -699,6 +685,33 @@
     }
   }
 
+  /* Mobile styles */
+  @media (max-width: 767px) {
+    .studio-navigation__title {
+      margin-left: 12px;
+      font-size: 18px;
+    }
+
+    .studio-navigation__tabs-container {
+      padding: 0 12px;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .studio-navigation__user-name {
+      display: none;
+    }
+
+    .studio-navigation__actions {
+      gap: 8px;
+    }
+  }
+
   /* RTL Support */
   [dir='rtl'] {
     .studio-navigation__title {

From f85eafbaf3552135be9beb4b8c12921455098643 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 23 Dec 2025 13:07:32 +0530
Subject: [PATCH 007/102] Update

---
 .../frontend/shared/views/StudioNavigation.vue           | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index a760f6b616..13b7c40977 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -630,24 +630,21 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    
   }
-
   .side-panel-nav {
     flex: 1;
     width: 100%;
-    padding: 16px 0;
-    width: 100%;
   }
 
   .side-panel-nav-item {
     display: flex;
-    gap: 12px;
     align-items: center;
-    justify-content: flex-start;
+    gap: 12px;
     width: 100%;
     padding: 8px 16px;
-    margin: 0;
     text-align: left;
+    justify-content: flex-start;
   }
 
   .side-panel-nav-text {

From 40936849ee7ead9d8ae65b061b0b1725e9496f55 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 23 Dec 2025 13:10:34 +0530
Subject: [PATCH 008/102] Update

---
 .../frontend/shared/views/StudioNavigation.vue         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 13b7c40977..d5f2da380c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -145,7 +145,7 @@
       </template>
 
       <template #default>
-        <div class="side-panel-content">
+        <div class="sidepanel-content">
           <nav class="side-panel-nav">
             <KExternalLink
               :href="channelsLink"
@@ -626,7 +626,7 @@
     font-weight: 500;
   }
 
-  .side-panel-content {
+  .sidepanel-content {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -643,8 +643,10 @@
     gap: 12px;
     width: 100%;
     padding: 8px 16px;
-    text-align: left;
-    justify-content: flex-start;
+  }
+  .side-panel-nav-item.button {
+    text-align: start;
+    padding: 0px;
   }
 
   .side-panel-nav-text {

From 0bdebdd24878d3af94daf75f11b00ea8d11e727b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 23 Dec 2025 13:21:23 +0530
Subject: [PATCH 009/102] Update styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index d5f2da380c..5a92774bcc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -646,7 +646,6 @@
   }
   .side-panel-nav-item.button {
     text-align: start;
-    padding: 0px;
   }
 
   .side-panel-nav-text {

From 10e84e58b993637d4a67838d244e6b485c186015 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:05:29 +0530
Subject: [PATCH 010/102] Updated sidepanel styles

---
 .../frontend/shared/views/StudioNavigation.vue                | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 5a92774bcc..a2fd90b056 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -632,6 +632,10 @@
     height: 100%;
     
   }
+  ::v-deep .side-panel-content {
+  padding: 0 !important;
+}
+
   .side-panel-nav {
     flex: 1;
     width: 100%;

From 17aae8fa6728c32259037e1d67a3ddab4a1062ae Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:12:51 +0530
Subject: [PATCH 011/102] Updated sidepanel styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index a2fd90b056..72cb65b1b1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -637,8 +637,7 @@
 }
 
   .side-panel-nav {
-    flex: 1;
-    width: 100%;
+    padding: 4px;
   }
 
   .side-panel-nav-item {

From 6b5d5a899e0c3766dc4cc9093db4dca8e94ca2cc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:26:02 +0530
Subject: [PATCH 012/102] Updated sidepanel styles

---
 .../frontend/shared/views/StudioNavigation.vue                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 72cb65b1b1..a83b87586a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -637,8 +637,8 @@
 }
 
   .side-panel-nav {
-    padding: 4px;
-  }
+  padding: 8px 0;
+}
 
   .side-panel-nav-item {
     display: flex;

From c5e78f2d6ffea72a67dc8533d7cb52f887d2e914 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:29:53 +0530
Subject: [PATCH 013/102] Updated sidepanel styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index a83b87586a..fdea0fdab0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -658,8 +658,7 @@
 
   .side-panel-footer {
     padding: 24px;
-    text-align: center;
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    text-align: left;
   }
 
   .side-panel-logo {

From 91cd63a95c45ade3b96a6699e130b3f5247b9fef Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:40:49 +0530
Subject: [PATCH 014/102] Updated sidepanel styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index fdea0fdab0..c6a61a1c63 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -249,6 +249,7 @@
             <KExternalLink
               :href="copyrightLink"
               class="side-panel-copyright"
+              openInNewTab
               @click.native="sidePanelOpen = false"
             >
               {{ $tr('copyright', { year: new Date().getFullYear() }) }}
@@ -257,6 +258,7 @@
             <p class="side-panel-feedback">
               <KExternalLink
                 href="https://community.learningequality.org/c/support/studio"
+                openInNewTab
                 @click.native="sidePanelOpen = false"
               >
                 {{ $tr('giveFeedback') }}

From e842db068001ee86ce061bf7f2b41c714b070fa7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:56:30 +0530
Subject: [PATCH 015/102] Updated sidepanel styles

---
 .../frontend/shared/views/StudioNavigation.vue     | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index c6a61a1c63..3ee3286083 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -193,18 +193,18 @@
               <span class="side-panel-nav-text">{{ $tr('settingsLink') }}</span>
             </KExternalLink>
 
-            <KButton
+            <KExternalLink
               appearance="flat-button"
               class="side-panel-nav-item subheading"
               :appearanceOverrides="navItemAppearance"
-              @click="openLanguageModal"
+              @click.native.prevent="openLanguageModal"
             >
               <KIconButton
                 :disabled="true"
                 icon="language"
               />
               <span class="side-panel-nav-text">{{ $tr('changeLanguage') }}</span>
-            </KButton>
+            </KExternalLink>
 
             <KExternalLink
               :href="helpLink"
@@ -223,18 +223,18 @@
               <span class="side-panel-nav-text">{{ $tr('helpLink') }}</span>
             </KExternalLink>
 
-            <KButton
+            <KExternalLink
               appearance="flat-button"
               class="side-panel-nav-item subheading"
               :appearanceOverrides="navItemAppearance"
-              @click="logout"
+              @click.native.prevent="logout"
             >
               <KIconButton
                 :disabled="true"
                 icon="logout"
               />
               <span class="side-panel-nav-text">{{ $tr('logoutLink') }}</span>
-            </KButton>
+            </KExternalLink>
           </nav>
 
           <div class="side-panel-footer">
@@ -318,6 +318,8 @@
       navItemAppearance() {
         return {
           justifyContent: 'flex-start',
+          fontSize: '16px',
+          textTransform: 'none',
         };
       },
       homeLink() {

From 444e68d601f51302075a9a4ca1327b04f98d7a9d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 19:00:53 +0530
Subject: [PATCH 016/102] Updated sidepanel styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 3ee3286083..ae1087934b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -320,6 +320,7 @@
           justifyContent: 'flex-start',
           fontSize: '16px',
           textTransform: 'none',
+          height: '48px',
         };
       },
       homeLink() {

From 7e679d383c6a7736613804eb6e7bc57ecbe3c0ac Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 27 Dec 2025 00:00:59 +0530
Subject: [PATCH 017/102] Updated styles

---
 .../frontend/shared/views/StudioNavigation.vue        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index ae1087934b..e01dd0f61b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -211,10 +211,7 @@
               class="side-panel-nav-item subheading"
               appearance="flat-button"
               :appearanceOverrides="navItemAppearance"
-              @click.native="
-                sidePanelOpen = false;
-                trackClick('Help');
-              "
+              @click.native="handleHelpClick"
             >
               <KIconButton
                 :disabled="true"
@@ -436,6 +433,12 @@
             break;
         }
       },
+      handleHelpClick(event) {
+        event.preventDefault();
+        this.sidePanelOpen = false;
+        this.trackClick('Help');
+        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
+      },
       trackClick(label) {
         if (this.$analytics) {
           this.$analytics.trackClick('general', `User dropdown - ${label}`);

From 5ce6de534191313a18e2f275b0f64787f48d247e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 27 Dec 2025 23:32:05 +0530
Subject: [PATCH 018/102] Updated

---
 .../shared/views/StudioNavigation.vue         | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index e01dd0f61b..30a1061bb8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -42,9 +42,15 @@
       </template>
 
       <template #brand>
-        <span class="studio-navigation__title">
-          {{ title || $tr('title') }}
-        </span>
+        <div
+          v-if="shouldShowTitle"
+          class="text-truncate"
+          style="max-width: 150px"
+        >
+          <span class="studio-navigation__title">
+            {{ title || $tr('title') }}
+          </span>
+        </div>
       </template>
 
       <template #actions>
@@ -64,7 +70,10 @@
                 icon="person"
                 color="black"
               />
-              <span class="mx-2 subheading">
+              <span
+                v-if="shouldShowTitle"
+                class="mx-2 subheading"
+              >
                 {{ user.first_name }}
               </span>
               <KIconButton
@@ -302,6 +311,7 @@
       return {
         sidePanelOpen: false,
         showLanguageModal: false,
+        windowWidth: 0,
       };
     },
     computed: {
@@ -388,9 +398,15 @@
           },
         ];
       },
+      shouldShowTitle() {
+        // Hide title when screen width is less than 500px
+        return this.windowWidth >= 400;
+      },
     },
     mounted() {
       this.updateTabIndices();
+      this.updateWindowWidth();
+      window.addEventListener('resize', this.updateWindowWidth);
     },
     updated() {
       // Update tab indices whenever tabs change
@@ -398,6 +414,9 @@
         this.updateTabIndices();
       });
     },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.updateWindowWidth);
+    },
     methods: {
       ...mapActions(['logout']),
       toggleSidePanel() {
@@ -448,6 +467,9 @@
         this.sidePanelOpen = false;
         this.showLanguageModal = true;
       },
+      updateWindowWidth() {
+        this.windowWidth = window.innerWidth;
+      },
       handleTabsKeydown(event) {
         // Get all tab elements
         const tabs = this.getTabElements();
@@ -592,11 +614,18 @@
   }
 
   .studio-navigation__title {
-    margin-left: 16px;
+    display: block;
+    width: 100%;
     font-size: 20px;
     font-weight: 500;
   }
 
+  .text-truncate {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   .studio-navigation__actions {
     display: flex;
     gap: 16px;

From 51169b071f6413d2128e1964b639ee03a49c26dc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 13 Jan 2026 22:57:21 +0530
Subject: [PATCH 019/102] Updated styles for tabs

---
 .../frontend/shared/views/StudioNavigation.vue   | 14 +++++++-------
 .../shared/views/StudioNavigationTab.vue         | 16 +++++++++++-----
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 30a1061bb8..d6f8582934 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -639,14 +639,14 @@
 
   .studio-navigation__tabs-container {
     display: flex;
-    align-items: center;
-    min-height: 48px;
-    padding: 0 16px;
+    flex: 1 0 auto;
+    padding: 0 24px;
+    height: 48px;
+    list-style-type: none;
+    position: relative;
+    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
+    white-space: nowrap;
 
-    /* Focus within styling for keyboard navigation */
-    &:focus-within {
-      outline: none;
-    }
   }
 
   /* Side panel styles */
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index 9bab7199f9..550d2be497 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -138,25 +138,31 @@
 
   .studio-navigation-tab {
     position: relative;
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    flex: 0 0 auto;
+    width: 160px;
+    height: 100%;
     min-height: 48px;
-    padding: 0 16px;
+    padding: 6px 12px;
     font-family: inherit;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 700;
+    color: inherit;
     text-decoration: none;
     text-transform: uppercase;
+    white-space: normal;
     cursor: pointer;
     background: transparent;
     border: none;
     outline: none;
-    transition: color 0.2s ease, opacity 0.2s ease;
+    user-select: none;
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
   }
 
-  .studio-navigation-tab:hover {
+  .studio-navigation-tab:not(.studio-navigation-tab--active) {
     opacity: 0.7;
   }
 

From 4cfd44066707d9b9119869caf5e9382cce8825ca Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 13 Jan 2026 23:14:12 +0530
Subject: [PATCH 020/102] Updated styles for tabs

---
 .../shared/views/StudioNavigationTab.vue      | 36 +++----------------
 1 file changed, 4 insertions(+), 32 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index 550d2be497..acf74db854 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -28,34 +28,6 @@
       aria-hidden="true"
     ></span>
   </RouterLink>
-  <button
-    v-else
-    ref="tabElement"
-    :class="tabClasses"
-    :style="tabStyles"
-    role="tab"
-    :aria-selected="isActive"
-    :tabindex="tabindex"
-    @click="handleClick"
-    @keydown="handleKeydown"
-  >
-    <span class="studio-navigation-tab__content">
-      <slot></slot>
-      <span
-        v-if="showBadge"
-        class="studio-navigation-tab__badge"
-        :aria-label="badgeAriaLabel"
-      >
-        {{ formattedBadgeValue }}
-      </span>
-    </span>
-    <span
-      v-if="isActive"
-      class="studio-navigation-tab__indicator"
-      :style="indicatorStyles"
-      aria-hidden="true"
-    ></span>
-  </button>
 
 </template>
 
@@ -93,12 +65,12 @@
       },
       tabStyles() {
         return {
-          color: this.isActive ? this.$themeTokens.primary : this.$themeTokens.text,
+          color: this.$themeTokens.text,
         };
       },
       indicatorStyles() {
         return {
-          backgroundColor: this.$themeTokens.primary,
+          backgroundColor: this.$themeTokens.surface,
         };
       },
       isActive() {
@@ -189,7 +161,7 @@
     font-weight: 600;
     line-height: 1;
     color: white;
-    background-color: #d32f2f;
+    background-color: black;
     border-radius: 10px;
   }
 
@@ -198,7 +170,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 3px;
+    height: 2px;
   }
 
 </style>
\ No newline at end of file

From 1abdc2ff62aab62052bfdb41d4f276b2c69863a9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 13 Jan 2026 23:27:17 +0530
Subject: [PATCH 021/102] Updated styles for tabs

---
 .../frontend/channelList/views/ChannelListIndex.vue        | 2 +-
 .../frontend/shared/views/StudioNavigationTab.vue          | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index d9dc547e86..014cdbc927 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -36,7 +36,7 @@
           v-for="listType in lists"
           :key="listType.id"
           :to="getChannelLink(listType)"
-          :badgeValue="invitationsByListCounts[listType]"
+          :badgeValue="5"
           @click="trackTabClick(listType)"
         >
           {{ translateConstant(listType) }}
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index acf74db854..99a270b46c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -151,18 +151,21 @@
   }
 
   .studio-navigation-tab__badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 20px;
+    width: 20px;
     height: 20px;
     padding: 0 6px;
     font-size: 12px;
     font-weight: 600;
-    line-height: 1;
     color: white;
     background-color: black;
-    border-radius: 10px;
+    border-radius: 50%;
   }
 
   .studio-navigation-tab__indicator {

From c7d1a4a2cdd337026e8b16537b175b901c8b375f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 00:33:41 +0530
Subject: [PATCH 022/102] Updated styles for tabs

---
 .../channelList/views/ChannelListIndex.vue    |  2 +-
 .../shared/views/StudioNavigationTab.vue      | 39 ++++++++++---------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 014cdbc927..d9dc547e86 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -36,7 +36,7 @@
           v-for="listType in lists"
           :key="listType.id"
           :to="getChannelLink(listType)"
-          :badgeValue="5"
+          :badgeValue="invitationsByListCounts[listType]"
           @click="trackTabClick(listType)"
         >
           {{ translateConstant(listType) }}
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index 99a270b46c..94653f852f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -4,7 +4,14 @@
     v-if="to"
     ref="tabElement"
     :to="to"
-    :class="tabClasses"
+    :class="[
+      tabClasses, 
+      $computedClass({
+        ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
+        ':focus': { ...$coreOutline, outlineOffset: 0 }
+      })
+    ]"
+
     :style="tabStyles"
     :aria-current="isActive ? 'page' : null"
     :tabindex="tabindex"
@@ -84,12 +91,11 @@
         return this.badgeValue > 0;
       },
       formattedBadgeValue() {
-        return this.badgeValue > 99 ? '99+' : this.badgeValue.toString();
+        return this.badgeValue.toString();
       },
       badgeAriaLabel() {
         if (!this.showBadge) return null;
-        const count = this.badgeValue > 99 ? 'more than 99' : this.badgeValue;
-        return `${count} notification${this.badgeValue !== 1 ? 's' : ''}`;
+        return `${this.badgeValue} notification${this.badgeValue !== 1 ? 's' : ''}`;
       },
     },
     methods: {
@@ -115,7 +121,8 @@
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
-    width: 160px;
+    min-width: 160px;
+    max-width: 264px;
     height: 100%;
     min-height: 48px;
     padding: 6px 12px;
@@ -128,7 +135,6 @@
     white-space: normal;
     cursor: pointer;
     background: transparent;
-    border: none;
     outline: none;
     user-select: none;
     transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
@@ -138,10 +144,6 @@
     opacity: 0.7;
   }
 
-  .studio-navigation-tab:focus-visible {
-    outline: 2px solid currentcolor;
-    outline-offset: -2px;
-  }
 
   .studio-navigation-tab__content {
     position: relative;
@@ -152,20 +154,19 @@
 
   .studio-navigation-tab__badge {
     position: absolute;
-    top: -8px;
-    right: -8px;
-    display: inline-flex;
+    top: -11px;
+    right: -22px;
+    display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    min-width: 20px;
-    width: 20px;
-    height: 20px;
-    padding: 0 6px;
-    font-size: 12px;
-    font-weight: 600;
+    width: 22px;
+    height: 22px;
+    font-size: 14px;
     color: white;
     background-color: black;
     border-radius: 50%;
+    transition: 0.3s;
   }
 
   .studio-navigation-tab__indicator {

From df5573d8743c120efb8466a5ce5e1428e206a86f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 01:20:10 +0530
Subject: [PATCH 023/102] Updated styles of sidepanel

---
 .../shared/views/StudioNavigation.vue         | 60 ++-----------------
 1 file changed, 4 insertions(+), 56 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index d6f8582934..02c620e960 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -4,6 +4,7 @@
     ref="studioNavigation"
     class="studio-navigation"
     :style="{
+      
       backgroundColor: $themeTokens.appBar,
       color: $themeTokens.text,
     }"
@@ -13,6 +14,7 @@
     <KToolbar
       type="clear"
       :style="{
+        overflowX: 'auto',  
         backgroundColor: $themeTokens.appBar,
         height: '56px',
       }"
@@ -127,7 +129,6 @@
     >
       <div
         ref="tabsContainer"
-        role="tablist"
         class="studio-navigation__tabs-container"
         @keydown="handleTabsKeydown"
       >
@@ -324,10 +325,10 @@
       },
       navItemAppearance() {
         return {
-          justifyContent: 'flex-start',
           fontSize: '16px',
           textTransform: 'none',
           height: '48px',
+          width: '100%',
         };
       },
       homeLink() {
@@ -505,16 +506,6 @@
             }
             break;
 
-          case 'Home':
-            event.preventDefault();
-            nextIndex = 0;
-            break;
-
-          case 'End':
-            event.preventDefault();
-            nextIndex = tabs.length - 1;
-            break;
-
           default:
             return;
         }
@@ -641,6 +632,7 @@
     display: flex;
     flex: 1 0 auto;
     padding: 0 24px;
+    overflow-x: auto;
     height: 48px;
     list-style-type: none;
     position: relative;
@@ -722,48 +714,4 @@
     }
   }
 
-  /* Mobile styles */
-  @media (max-width: 767px) {
-    .studio-navigation__title {
-      margin-left: 12px;
-      font-size: 18px;
-    }
-
-    .studio-navigation__tabs-container {
-      padding: 0 12px;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    .studio-navigation__user-name {
-      display: none;
-    }
-
-    .studio-navigation__actions {
-      gap: 8px;
-    }
-  }
-
-  /* RTL Support */
-  [dir='rtl'] {
-    .studio-navigation__title {
-      margin-right: 16px;
-      margin-left: 0;
-    }
-
-    .side-panel-title {
-      margin-right: 16px;
-      margin-left: 0;
-    }
-
-    .side-panel-nav-item {
-      text-align: right;
-    }
-  }
-
 </style>

From f9dcc48e08effc6c81252962850ad04eea9e9144 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 01:46:54 +0530
Subject: [PATCH 024/102] Updated styles of sidepanel

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 02c620e960..e80b0ade5a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -609,6 +609,7 @@
     width: 100%;
     font-size: 20px;
     font-weight: 500;
+    padding-inline-start: 20px;
   }
 
   .text-truncate {

From 0d2cec5b7b47ce9889041ed2e08e297bdffdba17 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 10:10:46 +0530
Subject: [PATCH 025/102] Updated sidepanel styles

---
 .../frontend/shared/views/StudioNavigation.vue            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index e80b0ade5a..4eeaae105d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -147,7 +147,7 @@
       @closePanel="sidePanelOpen = false"
     >
       <template #header>
-        <div class="side-panel-header">
+        <div class="side-panelheader">
           <span class="side-panel-title">
             {{ $tr('title') }}
           </span>
@@ -643,11 +643,11 @@
   }
 
   /* Side panel styles */
-  .side-panel-header {
+  .side-panelheader {
     display: flex;
     align-items: center;
-    min-height: 60px;
-    padding: 0 16px;
+    height: 63.2px;
+    padding-right:74px;
   }
 
   .side-panel-title {

From 3961688622883e91ad43bfc52c7cf061bf90ceaa Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 10:45:41 +0530
Subject: [PATCH 026/102] Updated sidepanel styles

---
 .../shared/views/StudioNavigation.vue         | 127 +++++++++---------
 1 file changed, 60 insertions(+), 67 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 4eeaae105d..bc41979fca 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -157,91 +157,72 @@
       <template #default>
         <div class="sidepanel-content">
           <nav class="side-panel-nav">
-            <KExternalLink
-              :href="channelsLink"
-              class="side-panel-nav-item subheading"
-              appearance="flat-button"
-              :appearanceOverrides="navItemAppearance"
-              @click.native="sidePanelOpen = false"
+            <div
+              class="side-panel-nav-item"
+              @click="navigateToChannels"
             >
               <KIconButton
                 :disabled="true"
                 icon="home"
               />
-              <span class="side-panel-nav-text">{{ $tr('channelsLink') }}</span>
-            </KExternalLink>
+              <span class="subheading">{{ $tr('channelsLink') }}</span>
+            </div>
 
-            <KExternalLink
+            <div
               v-if="user?.is_admin"
-              :href="administrationLink"
-              class="side-panel-nav-item subheading"
-              appearance="flat-button"
-              :appearanceOverrides="navItemAppearance"
-              @click.native="sidePanelOpen = false"
+              class="side-panel-nav-item"
+              @click="navigateToAdministration"
             >
               <KIconButton
                 :disabled="true"
                 icon="people"
               />
-              <span class="side-panel-nav-text">{{ $tr('administrationLink') }}</span>
-            </KExternalLink>
+              <span class="subheading">{{ $tr('administrationLink') }}</span>
+            </div>
 
-            <KExternalLink
-              :href="settingsLink"
-              class="side-panel-nav-item subheading"
-              appearance="flat-button"
-              :appearanceOverrides="navItemAppearance"
-              @click.native="
-                sidePanelOpen = false;
-                trackClick('Settings');
-              "
+            <div
+              class="side-panel-nav-item"
+              @click="navigateToSettings"
             >
               <KIconButton
                 :disabled="true"
                 icon="settings"
               />
-              <span class="side-panel-nav-text">{{ $tr('settingsLink') }}</span>
-            </KExternalLink>
+              <span class="subheading">{{ $tr('settingsLink') }}</span>
+            </div>
 
-            <KExternalLink
-              appearance="flat-button"
-              class="side-panel-nav-item subheading"
-              :appearanceOverrides="navItemAppearance"
-              @click.native.prevent="openLanguageModal"
+            <div
+              class="side-panel-nav-item"
+              @click="openLanguageModal"
             >
               <KIconButton
                 :disabled="true"
                 icon="language"
               />
-              <span class="side-panel-nav-text">{{ $tr('changeLanguage') }}</span>
-            </KExternalLink>
+              <span class="subheading">{{ $tr('changeLanguage') }}</span>
+            </div>
 
-            <KExternalLink
-              :href="helpLink"
-              class="side-panel-nav-item subheading"
-              appearance="flat-button"
-              :appearanceOverrides="navItemAppearance"
-              @click.native="handleHelpClick"
+            <div
+              class="side-panel-nav-item"
+              @click="navigateToHelp"
             >
               <KIconButton
                 :disabled="true"
                 icon="openNewTab"
               />
-              <span class="side-panel-nav-text">{{ $tr('helpLink') }}</span>
-            </KExternalLink>
+              <span class="subheading">{{ $tr('helpLink') }}</span>
+            </div>
 
-            <KExternalLink
-              appearance="flat-button"
-              class="side-panel-nav-item subheading"
-              :appearanceOverrides="navItemAppearance"
-              @click.native.prevent="logout"
+            <div
+              class="side-panel-nav-item"
+              @click="logout"
             >
               <KIconButton
                 :disabled="true"
                 icon="logout"
               />
-              <span class="side-panel-nav-text">{{ $tr('logoutLink') }}</span>
-            </KExternalLink>
+              <span class="subheading">{{ $tr('logoutLink') }}</span>
+            </div>
           </nav>
 
           <div class="side-panel-footer">
@@ -323,14 +304,7 @@
       hasTabs() {
         return !!this.$slots.tabs;
       },
-      navItemAppearance() {
-        return {
-          fontSize: '16px',
-          textTransform: 'none',
-          height: '48px',
-          width: '100%',
-        };
-      },
+    
       homeLink() {
         return window.Urls?.channels() || '/';
       },
@@ -423,6 +397,24 @@
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
+      navigateToChannels() {
+        this.sidePanelOpen = false;
+        window.location.href = this.channelsLink;
+      },
+      navigateToAdministration() {
+        this.sidePanelOpen = false;
+        window.location.href = this.administrationLink;
+      },
+      navigateToSettings() {
+        this.sidePanelOpen = false;
+        this.trackClick('Settings');
+        window.location.href = this.settingsLink;
+      },
+      navigateToHelp() {
+        this.sidePanelOpen = false;
+        this.trackClick('Help');
+        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
+      },
       handleUserMenuSelect(item) {
         switch (item.value) {
           case 'administration':
@@ -453,12 +445,6 @@
             break;
         }
       },
-      handleHelpClick(event) {
-        event.preventDefault();
-        this.sidePanelOpen = false;
-        this.trackClick('Help');
-        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
-      },
       trackClick(label) {
         if (this.$analytics) {
           this.$analytics.trackClick('general', `User dropdown - ${label}`);
@@ -672,10 +658,17 @@
 
   .side-panel-nav-item {
     display: flex;
-    align-items: center;
-    gap: 12px;
-    width: 100%;
-    padding: 8px 16px;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease; 
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05); 
+  }
   }
   .side-panel-nav-item.button {
     text-align: start;

From 69efb0976adac6f1532966d5c494c0a275cbe201 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 13:19:26 +0530
Subject: [PATCH 027/102] Updated sidepanel styles

---
 .../shared/views/StudioNavigation.vue         | 111 +++++++-----------
 1 file changed, 40 insertions(+), 71 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index bc41979fca..af86856f95 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -4,7 +4,6 @@
     ref="studioNavigation"
     class="studio-navigation"
     :style="{
-      
       backgroundColor: $themeTokens.appBar,
       color: $themeTokens.text,
     }"
@@ -147,7 +146,7 @@
       @closePanel="sidePanelOpen = false"
     >
       <template #header>
-        <div class="side-panelheader">
+        <div class="side-panel-header">
           <span class="side-panel-title">
             {{ $tr('title') }}
           </span>
@@ -155,7 +154,7 @@
       </template>
 
       <template #default>
-        <div class="sidepanel-content">
+        <div class="side-panel-content">
           <nav class="side-panel-nav">
             <div
               class="side-panel-nav-item"
@@ -215,7 +214,7 @@
 
             <div
               class="side-panel-nav-item"
-              @click="logout"
+              @click="handleLogout"
             >
               <KIconButton
                 :disabled="true"
@@ -226,7 +225,7 @@
           </nav>
 
           <div class="side-panel-footer">
-            <div class="side-panel-logo">
+            <div>
               <KLogo
                 altText="Kolibri logo"
                 :showBackground="true"
@@ -237,20 +236,18 @@
             <KExternalLink
               :href="copyrightLink"
               class="side-panel-copyright"
+              :text="$tr('copyright', { year: new Date().getFullYear() })"
               openInNewTab
               @click.native="sidePanelOpen = false"
-            >
-              {{ $tr('copyright', { year: new Date().getFullYear() }) }}
-            </KExternalLink>
+            />
 
             <p class="side-panel-feedback">
               <KExternalLink
                 href="https://community.learningequality.org/c/support/studio"
                 openInNewTab
+                :text="$tr('giveFeedback')"
                 @click.native="sidePanelOpen = false"
-              >
-                {{ $tr('giveFeedback') }}
-              </KExternalLink>
+              />
             </p>
           </div>
         </div>
@@ -304,7 +301,6 @@
       hasTabs() {
         return !!this.$slots.tabs;
       },
-    
       homeLink() {
         return window.Urls?.channels() || '/';
       },
@@ -374,7 +370,6 @@
         ];
       },
       shouldShowTitle() {
-        // Hide title when screen width is less than 500px
         return this.windowWidth >= 400;
       },
     },
@@ -384,7 +379,6 @@
       window.addEventListener('resize', this.updateWindowWidth);
     },
     updated() {
-      // Update tab indices whenever tabs change
       this.$nextTick(() => {
         this.updateTabIndices();
       });
@@ -397,38 +391,43 @@
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
-      navigateToChannels() {
+      closeSidePanelAndNavigate(url) {
         this.sidePanelOpen = false;
-        window.location.href = this.channelsLink;
+        window.location.href = url;
+      },
+      navigateToChannels() {
+        this.closeSidePanelAndNavigate(this.channelsLink);
       },
       navigateToAdministration() {
-        this.sidePanelOpen = false;
-        window.location.href = this.administrationLink;
+        this.closeSidePanelAndNavigate(this.administrationLink);
       },
       navigateToSettings() {
-        this.sidePanelOpen = false;
         this.trackClick('Settings');
-        window.location.href = this.settingsLink;
+        this.closeSidePanelAndNavigate(this.settingsLink);
       },
       navigateToHelp() {
         this.sidePanelOpen = false;
         this.trackClick('Help');
         window.open(this.helpLink, '_blank', 'noopener,noreferrer');
       },
+      handleLogout() {
+        this.sidePanelOpen = false;
+        this.logout();
+      },
       handleUserMenuSelect(item) {
         switch (item.value) {
           case 'administration':
-            window.location.href = this.administrationLink;
+            this.navigateToAdministration();
             break;
           case 'settings':
-            window.location.href = this.settingsLink;
+            this.navigateToSettings();
             break;
           case 'change-language':
             this.showLanguageModal = true;
             break;
           case 'help':
-            window.open(this.helpLink, '_blank');
             this.trackClick('Help');
+            window.open(this.helpLink, '_blank');
             break;
           case 'logout':
             this.logout();
@@ -458,11 +457,9 @@
         this.windowWidth = window.innerWidth;
       },
       handleTabsKeydown(event) {
-        // Get all tab elements
         const tabs = this.getTabElements();
         if (!tabs.length) return;
 
-        // Find currently focused tab
         const currentIndex = tabs.findIndex(
           tab => tab === event.target || tab.contains(event.target),
         );
@@ -474,9 +471,7 @@
         switch (event.key) {
           case 'ArrowLeft':
             event.preventDefault();
-            // Move to previous tab (or wrap to last)
             nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
-            // Reverse for RTL
             if (this.$isRTL) {
               nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
             }
@@ -484,9 +479,7 @@
 
           case 'ArrowRight':
             event.preventDefault();
-            // Move to next tab (or wrap to first)
             nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
-            // Reverse for RTL
             if (this.$isRTL) {
               nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
             }
@@ -496,14 +489,11 @@
             return;
         }
 
-        // Focus the next tab
         this.focusTab(tabs[nextIndex]);
       },
       getTabElements() {
-        // Get all tab children from the slot
         if (!this.$refs.tabsContainer) return [];
 
-        // Find all interactive elements that represent tabs
         const tabs = Array.from(
           this.$refs.tabsContainer.querySelectorAll('a[role], button[role="tab"], a[href]'),
         );
@@ -513,21 +503,17 @@
       focusTab(tabElement) {
         if (!tabElement) return;
 
-        // Try to call focus method on Vue component instance if available
         const vueInstance = tabElement.__vueParentComponent?.ctx;
         if (vueInstance?.focus) {
           vueInstance.focus();
         } else {
-          // Fallback to native focus
           tabElement.focus();
         }
       },
       updateTabIndices() {
-        // Update tabindex for roving tabindex pattern
         const tabs = this.getTabElements();
         if (!tabs.length) return;
 
-        // Find active tab or use first tab
         const activeTab = tabs.find(
           tab =>
             tab.getAttribute('aria-current') === 'page' ||
@@ -535,7 +521,6 @@
         );
         const focusableTab = activeTab || tabs[0];
 
-        // Set tabindex: 0 for focusable tab, -1 for others
         tabs.forEach(tab => {
           tab.setAttribute('tabindex', tab === focusableTab ? '0' : '-1');
         });
@@ -610,9 +595,10 @@
     align-items: center;
   }
 
-  /* Tabs extension area */
   .studio-navigation__tabs-extension {
-    @extend %dropshadow-2dp;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+    margin-top: -1px;
+    
   }
 
   .studio-navigation__tabs-container {
@@ -625,15 +611,14 @@
     position: relative;
     transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
     white-space: nowrap;
-
   }
 
   /* Side panel styles */
-  .side-panelheader {
+  .side-panel-header {
     display: flex;
     align-items: center;
     height: 63.2px;
-    padding-right:74px;
+    padding-right: 74px;
   }
 
   .side-panel-title {
@@ -642,7 +627,7 @@
     font-weight: 500;
   }
 
-  .sidepanel-content {
+  .side-panel-content {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -653,30 +638,21 @@
 }
 
   .side-panel-nav {
-  padding: 8px 0;
-}
+    padding: 8px 0;
+  }
 
   .side-panel-nav-item {
     display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  margin: 0;
-  padding: 8px 16px;
-  cursor: pointer;
-  transition: background-color 0.2s ease; 
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05); 
-  }
-  }
-  .side-panel-nav-item.button {
-    text-align: start;
-  }
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 4px 16px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 
-  .side-panel-nav-text {
-    font-size: 16px;
-    font-weight: 500;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
   }
 
   .side-panel-footer {
@@ -684,15 +660,9 @@
     text-align: left;
   }
 
-  .side-panel-logo {
-    margin-bottom: 16px;
-  }
-
   .side-panel-copyright {
-    display: block;
-    margin-bottom: 8px;
+    margin-bottom: 24px;
     font-size: 14px;
-    text-decoration: none;
   }
 
   .side-panel-feedback {
@@ -700,7 +670,6 @@
 
     a {
       font-size: 14px;
-      text-decoration: none;
 
       &:hover {
         text-decoration: underline;

From c8213f5d301303199f2845345debb4ee1a3555d4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 19:36:02 +0530
Subject: [PATCH 028/102] Updated sidepanel styles

---
 .../frontend/shared/views/SidePanelModal/index.vue        | 8 ++++++++
 .../frontend/shared/views/StudioNavigation.vue            | 1 +
 2 files changed, 9 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
index 5fa53d6f0e..58c89f3fe0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -118,6 +118,11 @@
           return ['right', 'left'].includes(value);
         },
       },
+      fixedWidth: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       ariaLabel: {
         type: String,
         required: false,
@@ -152,6 +157,9 @@
         };
       },
       responsiveWidth() {
+        if (this.fixedWidth) {
+          return this.sidePanelWidth;
+        }
         return this.isMobile ? '100vw' : this.sidePanelWidth;
       },
       /** Styling Properties */
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index af86856f95..bafe0e6cf3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -143,6 +143,7 @@
       :aria-label="$tr('navigationMenu')"
       closeButtonIconType="clear"
       immersive
+      fixedWidth
       @closePanel="sidePanelOpen = false"
     >
       <template #header>

From b12669e2389f54cee602c0b7e0987a7caf8bfa2a Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 20:36:21 +0530
Subject: [PATCH 029/102] Added scrollable funcality to tabs

---
 .../shared/views/StudioNavigation.vue         | 118 ++++++++++++++++--
 1 file changed, 106 insertions(+), 12 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index bafe0e6cf3..c9415dbde8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -126,12 +126,40 @@
       class="studio-navigation__tabs-extension"
       :aria-label="$tr('mainNavigationLabel')"
     >
-      <div
-        ref="tabsContainer"
-        class="studio-navigation__tabs-container"
-        @keydown="handleTabsKeydown"
-      >
-        <slot name="tabs"></slot>
+      <div class="studio-navigation__tabs-wrapper">
+        <div
+          v-if="isOverflowing && canScrollLeft"
+          class="scroll-button scroll-button--left"
+          :style="{ backgroundColor: $themeTokens.appBar }"
+          @click="scrollTabs(-300)"
+        >
+          <KIconButton
+            icon="chevronLeft"
+            :color="$themeTokens.text"
+            :ariaLabel="$tr('scrollLeft')"
+          />
+        </div>
+
+        <div
+          ref="tabsContainer"
+          class="studio-navigation__tabs-container"
+          @keydown="handleTabsKeydown"
+        >
+          <slot name="tabs"></slot>
+        </div>
+
+        <div
+          v-if="isOverflowing && canScrollRight"
+          class="scroll-button scroll-button--right"
+          :style="{ backgroundColor: $themeTokens.appBar }"
+          @click="scrollTabs(300)"
+        >
+          <KIconButton
+            icon="chevronRight"
+            :color="$themeTokens.text"
+            :ariaLabel="$tr('scrollRight')"
+          />
+        </div>
       </div>
     </div>
 
@@ -292,6 +320,9 @@
         sidePanelOpen: false,
         showLanguageModal: false,
         windowWidth: 0,
+        isOverflowing: false,
+        canScrollLeft: false,
+        canScrollRight: false,
       };
     },
     computed: {
@@ -378,6 +409,14 @@
       this.updateTabIndices();
       this.updateWindowWidth();
       window.addEventListener('resize', this.updateWindowWidth);
+      const el = this.$refs.tabsContainer;
+      if (el) {
+        el.addEventListener('scroll', this.checkScrollPositions);
+        this.checkScrollPositions();
+        
+        const resizeObserver = new ResizeObserver(this.checkScrollPositions);
+        resizeObserver.observe(el);
+      }
     },
     updated() {
       this.$nextTick(() => {
@@ -392,6 +431,23 @@
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
+      checkScrollPositions() {
+        const el = this.$refs.tabsContainer;
+        if (!el) return;
+
+        this.isOverflowing = el.scrollWidth > el.clientWidth;
+        this.canScrollLeft = el.scrollLeft > 0;
+
+        const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= el.scrollWidth;
+        this.canScrollRight = !atEnd;
+      },
+      scrollTabs(distance) {
+        const container = this.$refs.tabsContainer;
+        if (container) {
+          const scrollDirection = this.$isRTL ? -distance : distance;
+          container.scrollBy({ left: scrollDirection, behavior: 'smooth' });
+        }
+      },
       closeSidePanelAndNavigate(url) {
         this.sidePanelOpen = false;
         window.location.href = url;
@@ -547,6 +603,8 @@
       logoutLink: 'Sign out',
       copyright: '© {year} Learning Equality',
       giveFeedback: 'Give feedback',
+      scrollLeft: 'Scroll tabs left',
+      scrollRight: 'Scroll tabs right',
     },
   };
 
@@ -599,19 +657,55 @@
   .studio-navigation__tabs-extension {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
     margin-top: -1px;
+  }
+
+  .studio-navigation__tabs-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .scroll-button {
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    z-index: 5;
+    cursor: pointer;
+    user-select: none;
+    padding: 0 4px;
+    transition: background-color 0.2s ease;
+  
     
+    &--left {
+      left: 0;
+      padding-right: 8px;
+    }
+    
+    &--right {
+      right: 0;
+      padding-left: 8px;
+     
+    }
   }
 
   .studio-navigation__tabs-container {
     display: flex;
-    flex: 1 0 auto;
+    flex: 1;
     padding: 0 24px;
     overflow-x: auto;
     height: 48px;
     list-style-type: none;
-    position: relative;
-    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
     white-space: nowrap;
+    scrollbar-width: none;
+    scroll-behavior: auto;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   /* Side panel styles */
@@ -632,11 +726,11 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    
   }
+  
   ::v-deep .side-panel-content {
-  padding: 0 !important;
-}
+    padding: 0 !important;
+  }
 
   .side-panel-nav {
     padding: 8px 0;

From 58b6e21286bf6602d21e560be96fb16232f3237d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 21:45:46 +0530
Subject: [PATCH 030/102] Updated the link design

---
 .../shared/views/StudioNavigation.vue         | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index c9415dbde8..579dca773a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -270,14 +270,14 @@
               @click.native="sidePanelOpen = false"
             />
 
-            <p class="side-panel-feedback">
-              <KExternalLink
-                href="https://community.learningequality.org/c/support/studio"
-                openInNewTab
-                :text="$tr('giveFeedback')"
-                @click.native="sidePanelOpen = false"
-              />
-            </p>
+            
+            <KExternalLink
+              href="https://community.learningequality.org/c/support/studio"
+              openInNewTab
+              :text="$tr('giveFeedback')"
+              @click.native="sidePanelOpen = false"
+            />
+          
           </div>
         </div>
       </template>
@@ -746,7 +746,7 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: rgba(0, 0, 0, 0.048);
     }
   }
 
@@ -760,16 +760,4 @@
     font-size: 14px;
   }
 
-  .side-panel-feedback {
-    margin: 0;
-
-    a {
-      font-size: 14px;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
 </style>

From 351a6ba5302ec6bb099c4e32cd1eda4cc9344f9b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 21:49:45 +0530
Subject: [PATCH 031/102] Updated the link design

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 579dca773a..764366c5bb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -46,7 +46,7 @@
         <div
           v-if="shouldShowTitle"
           class="text-truncate"
-          style="max-width: 150px"
+          style="max-width: 160px"
         >
           <span class="studio-navigation__title">
             {{ title || $tr('title') }}

From 632c82d878daeab80990eb741acb5a3ff7614e16 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 23:18:44 +0530
Subject: [PATCH 032/102] Updated the link design

---
 .../shared/views/SkipNavigationLink.vue       |   3 +-
 .../shared/views/StudioNavigation.vue         | 229 +++++++++---------
 2 files changed, 113 insertions(+), 119 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
index 920dd15e8c..49907b0409 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
@@ -67,7 +67,7 @@
 
   .skip-nav-link {
     position: relative;
-    z-index: 2;
+    z-index: 100;
   }
 
   .skip-nav-link a {
@@ -82,6 +82,7 @@
     &:focus {
       top: 8px;
       left: 8px;
+      z-index: 100;
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 764366c5bb..534824d351 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -8,122 +8,124 @@
       color: $themeTokens.text,
     }"
   >
-    <SkipNavigationLink />
-
-    <KToolbar
-      type="clear"
-      :style="{
-        overflowX: 'auto',  
-        backgroundColor: $themeTokens.appBar,
-        height: '56px',
-      }"
-      :raised="false"
-    >
-      <template #icon>
-        <!-- Menu button for logged in users -->
-        <KIconButton
-          v-if="loggedIn"
-          icon="menu"
-          :color="$themeTokens.text"
-          :ariaLabel="$tr('openMenu')"
-          @click="toggleSidePanel"
-        />
-
-        <!-- Logo link for non-logged in users -->
-        <KExternalLink
-          v-else
-          :href="homeLink"
-          class="studio-navigation__logo-link"
-        >
-          <KLogo
-            altText="Kolibri Logo with background"
-            :size="36"
+    <header>
+      <SkipNavigationLink />
+      <KToolbar
+        type="clear"
+        :style="{
+          backgroundColor: $themeTokens.appBar,
+          height: '56px',
+        }"
+        :raised="false"
+      >
+        <template #icon>
+          <!-- Menu button for logged in users -->
+          <KIconButton
+            v-if="loggedIn"
+            icon="menu"
+            :color="$themeTokens.text"
+            :ariaLabel="$tr('openMenu')"
+            @click="toggleSidePanel"
           />
-        </KExternalLink>
-      </template>
-
-      <template #brand>
-        <div
-          v-if="shouldShowTitle"
-          class="text-truncate"
-          style="max-width: 160px"
-        >
-          <span class="studio-navigation__title">
-            {{ title || $tr('title') }}
-          </span>
-        </div>
-      </template>
 
-      <template #actions>
-        <div
-          ref="studioNavigationActions"
-          aria-live="polite"
-          class="studio-navigation__actions"
-        >
-          <template v-if="loggedIn">
-            <KButton
-              appearance="flat-button"
-              style="text-transform: none"
-              :ariaLabel="$tr('userMenuLabel')"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="person"
-                color="black"
-              />
-              <span
-                v-if="shouldShowTitle"
-                class="mx-2 subheading"
+          <!-- Logo link for non-logged in users -->
+          <KExternalLink
+            v-else
+            :href="homeLink"
+            class="studio-navigation__logo-link"
+          >
+            <KLogo
+              altText="Kolibri Logo with background"
+              :size="36"
+            />
+          </KExternalLink>
+        </template>
+
+        <template #brand>
+          <div
+            v-if="shouldShowTitle"
+            class="text-truncate"
+            style="max-width: 160px"
+          >
+            <span class="studio-navigation__title">
+              {{ title || $tr('title') }}
+            </span>
+          </div>
+        </template>
+
+        <template #actions>
+          <div
+            ref="studioNavigationActions"
+            aria-live="polite"
+            class="studio-navigation__actions"
+          >
+            <template v-if="loggedIn">
+              <KButton
+                appearance="flat-button"
+                style="text-transform: none"
+                :ariaLabel="$tr('userMenuLabel')"
               >
-                {{ user.first_name }}
-              </span>
-              <KIconButton
-                :disabled="true"
-                icon="dropdown"
-                color="black"
-              />
+                <KIconButton
+                  :disabled="true"
+                  icon="person"
+                  color="black"
+                />
+                <span
+                  v-if="shouldShowTitle"
+                  class="mx-2 subheading"
+                >
+                  {{ user.first_name }}
+                </span>
+                <KIconButton
+                  :disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
+
+                <KDropdownMenu
+                  :options="userMenuItems"
+                  :hasIcons="true"
+                  @select="handleUserMenuSelect"
+                />
+              </KButton>
+            </template>
+
+            <template v-else>
+              <KButton
+                appearance="flat-button"
+                style="text-transform: none"
+                :ariaLabel="$tr('guestMenuLabel')"
+                class="guest-menu-button"
+              >
+                <KIconButton
+                  :disabled="true"
+                  icon="person"
+                  color="black"
+                />
+                <KIconButton
+                  :disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
+
+                <KDropdownMenu
+                  :options="guestMenuItems"
+                  :hasIcons="true"
+                  @select="handleGuestMenuSelect"
+                />
+              </KButton>
+            </template>
+          </div>
+        </template>
+      </KToolbar>
 
-              <KDropdownMenu
-                :options="userMenuItems"
-                :hasIcons="true"
-                @select="handleUserMenuSelect"
-              />
-            </KButton>
-          </template>
-
-          <template v-else>
-            <KButton
-              appearance="flat-button"
-              style="text-transform: none"
-              :ariaLabel="$tr('guestMenuLabel')"
-              class="guest-menu-button"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="person"
-                color="black"
-              />
-              <KIconButton
-                :disabled="true"
-                icon="dropdown"
-                color="black"
-              />
+    </header>
 
-              <KDropdownMenu
-                :options="guestMenuItems"
-                :hasIcons="true"
-                @select="handleGuestMenuSelect"
-              />
-            </KButton>
-          </template>
-        </div>
-      </template>
-    </KToolbar>
+    
 
     <!-- Tabs extension area (for when tabs are provided) -->
     <div
       v-if="hasTabs"
-      class="studio-navigation__tabs-extension"
       :aria-label="$tr('mainNavigationLabel')"
     >
       <div class="studio-navigation__tabs-wrapper">
@@ -301,6 +303,7 @@
   import SidePanelModal from './SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
 
+
   export default {
     name: 'StudioNavigation',
     components: {
@@ -616,10 +619,9 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .studio-navigation {
-    position: sticky;
     top: 0;
     z-index: 5;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
   }
 
   .studio-navigation__logo-link {
@@ -654,11 +656,6 @@
     align-items: center;
   }
 
-  .studio-navigation__tabs-extension {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
-    margin-top: -1px;
-  }
-
   .studio-navigation__tabs-wrapper {
     position: relative;
     display: flex;
@@ -702,10 +699,6 @@
     white-space: nowrap;
     scrollbar-width: none;
     scroll-behavior: auto;
-    
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   /* Side panel styles */

From 7e74a380a85b70ba7237e842d1a021933605e51f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 23:38:46 +0530
Subject: [PATCH 033/102] Updated the link design

---
 .../frontend/shared/views/SkipNavigationLink.vue            | 6 +++---
 .../frontend/shared/views/StudioNavigation.vue              | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
index 49907b0409..f6c278c384 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
@@ -20,7 +20,7 @@
     computed: {
       linkStyles() {
         return {
-          backgroundColor: this.$themeTokens.surface,
+          backgroundColor: this.$themeTokens.surface + ' !important',
         };
       },
     },
@@ -67,7 +67,7 @@
 
   .skip-nav-link {
     position: relative;
-    z-index: 100;
+    z-index: 2;
   }
 
   .skip-nav-link a {
@@ -82,7 +82,7 @@
     &:focus {
       top: 8px;
       left: 8px;
-      z-index: 100;
+      z-index: 2;
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 534824d351..65e11f7b61 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -8,11 +8,13 @@
       color: $themeTokens.text,
     }"
   >
+    <SkipNavigationLink />
     <header>
-      <SkipNavigationLink />
+      
       <KToolbar
         type="clear"
         :style="{
+          overflowX: 'auto',  
           backgroundColor: $themeTokens.appBar,
           height: '56px',
         }"

From 79bed414e0f265408293416856ade2df1ea9c740 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 23:48:27 +0530
Subject: [PATCH 034/102] Updated the link design

---
 .../frontend/shared/views/StudioNavigation.vue               | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 65e11f7b61..72bb2a93ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -45,7 +45,6 @@
 
         <template #brand>
           <div
-            v-if="shouldShowTitle"
             class="text-truncate"
             style="max-width: 160px"
           >
@@ -73,7 +72,6 @@
                   color="black"
                 />
                 <span
-                  v-if="shouldShowTitle"
                   class="mx-2 subheading"
                 >
                   {{ user.first_name }}
@@ -406,9 +404,6 @@
           },
         ];
       },
-      shouldShowTitle() {
-        return this.windowWidth >= 400;
-      },
     },
     mounted() {
       this.updateTabIndices();

From 9b0daa6f4f7ad18d87a6e23dc362951c629da6ee Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 00:20:29 +0530
Subject: [PATCH 035/102] Updated the link design

---
 .../shared/views/StudioNavigation.vue         | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 72bb2a93ac..875b4540bf 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -12,6 +12,7 @@
     <header>
       
       <KToolbar
+        ref="toolbar"
         type="clear"
         :style="{
           overflowX: 'auto',  
@@ -21,7 +22,6 @@
         :raised="false"
       >
         <template #icon>
-          <!-- Menu button for logged in users -->
           <KIconButton
             v-if="loggedIn"
             icon="menu"
@@ -29,8 +29,6 @@
             :ariaLabel="$tr('openMenu')"
             @click="toggleSidePanel"
           />
-
-          <!-- Logo link for non-logged in users -->
           <KExternalLink
             v-else
             :href="homeLink"
@@ -45,11 +43,11 @@
 
         <template #brand>
           <div
-            class="text-truncate"
+            class="studio-navigation__title-container"
             style="max-width: 160px"
           >
-            <span class="studio-navigation__title">
-              {{ title || $tr('title') }}
+            <span>
+              {{ truncatedTitle }}
             </span>
           </div>
         </template>
@@ -120,10 +118,6 @@
       </KToolbar>
 
     </header>
-
-    
-
-    <!-- Tabs extension area (for when tabs are provided) -->
     <div
       v-if="hasTabs"
       :aria-label="$tr('mainNavigationLabel')"
@@ -164,8 +158,6 @@
         </div>
       </div>
     </div>
-
-    <!-- Side panel (replaces MainNavigationDrawer) -->
     <SidePanelModal
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
@@ -284,8 +276,6 @@
         </div>
       </template>
     </SidePanelModal>
-
-    <!-- Language Switcher Modal -->
     <LanguageSwitcherModal
       v-if="showLanguageModal"
       :style="{ color: $themeTokens.text }"
@@ -326,6 +316,7 @@
         isOverflowing: false,
         canScrollLeft: false,
         canScrollRight: false,
+        toolbarWidth: 0,
       };
     },
     computed: {
@@ -354,6 +345,14 @@
       copyrightLink() {
         return 'https://learningequality.org/';
       },
+      truncatedTitle() {
+        const displayTitle = this.title || this.$tr('title');
+        const offset = (this.$refs.studioNavigationActions?.clientWidth || 0) + 100;
+        const averageCharWidth = 10;
+        const availableWidth = this.toolbarWidth - offset;
+        const maxChars = availableWidth > 0 ? Math.floor(availableWidth / averageCharWidth) : 1;
+        return this.truncateText(displayTitle, maxChars);
+      },
       userMenuItems() {
         const items = [];
 
@@ -408,7 +407,8 @@
     mounted() {
       this.updateTabIndices();
       this.updateWindowWidth();
-      window.addEventListener('resize', this.updateWindowWidth);
+      this.updateToolbarWidth();
+      window.addEventListener('resize', this.handleResize);
       const el = this.$refs.tabsContainer;
       if (el) {
         el.addEventListener('scroll', this.checkScrollPositions);
@@ -421,10 +421,11 @@
     updated() {
       this.$nextTick(() => {
         this.updateTabIndices();
+        this.updateToolbarWidth();
       });
     },
     beforeDestroy() {
-      window.removeEventListener('resize', this.updateWindowWidth);
+      window.removeEventListener('resize', this.handleResize);
     },
     methods: {
       ...mapActions(['logout']),
@@ -510,9 +511,22 @@
         this.sidePanelOpen = false;
         this.showLanguageModal = true;
       },
+      handleResize() {
+        this.updateWindowWidth();
+        this.updateToolbarWidth();
+      },
       updateWindowWidth() {
         this.windowWidth = window.innerWidth;
       },
+      updateToolbarWidth() {
+        this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
+      },
+      truncateText(value, maxLength) {
+        if (value && value.length > maxLength) {
+          return value.substring(0, maxLength) + '...';
+        }
+        return value;
+      },
       handleTabsKeydown(event) {
         const tabs = this.getTabElements();
         if (!tabs.length) return;
@@ -633,9 +647,11 @@
     }
   }
 
-  .studio-navigation__title {
-    display: block;
-    width: 100%;
+  .studio-navigation__title-container {
+    display: block;    
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     font-size: 20px;
     font-weight: 500;
     padding-inline-start: 20px;
@@ -649,7 +665,6 @@
 
   .studio-navigation__actions {
     display: flex;
-    gap: 16px;
     align-items: center;
   }
 

From c443c663441a40e6b6a8c42e8aca64ec40d92de7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 00:25:00 +0530
Subject: [PATCH 036/102] Updated the title styles

---
 .../frontend/shared/views/StudioNavigation.vue               | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 875b4540bf..fb59474689 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -657,11 +657,6 @@
     padding-inline-start: 20px;
   }
 
-  .text-truncate {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
 
   .studio-navigation__actions {
     display: flex;

From a99d11562aed3aadffe88e8a3d92d9ee609cdf2b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 00:39:52 +0530
Subject: [PATCH 037/102] Updated the title styles

---
 .../shared/views/StudioNavigation.vue         |  2 +-
 .../shared/views/StudioNavigationTab.vue      | 21 +++----------------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index fb59474689..b0d64c7fa9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -15,7 +15,7 @@
         ref="toolbar"
         type="clear"
         :style="{
-          overflowX: 'auto',  
+          overflowX: 'hidden',  
           backgroundColor: $themeTokens.appBar,
           height: '56px',
         }"
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index 94653f852f..c40cb03249 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -11,12 +11,11 @@
         ':focus': { ...$coreOutline, outlineOffset: 0 }
       })
     ]"
-
     :style="tabStyles"
     :aria-current="isActive ? 'page' : null"
     :tabindex="tabindex"
-    @click="handleClick"
-    @keydown="handleKeydown"
+    @click="$emit('click', $event)"
+    @keydown="$emit('keydown', $event)"
   >
     <span class="studio-navigation-tab__content">
       <slot></slot>
@@ -25,7 +24,7 @@
         class="studio-navigation-tab__badge"
         :aria-label="badgeAriaLabel"
       >
-        {{ formattedBadgeValue }}
+        {{ badgeValue }}
       </span>
     </span>
     <span
@@ -81,7 +80,6 @@
         };
       },
       isActive() {
-        // Check if current route matches this tab's route
         if (!this.to || !this.$route) return false;
 
         const targetRoute = this.$router.resolve(this.to);
@@ -90,23 +88,10 @@
       showBadge() {
         return this.badgeValue > 0;
       },
-      formattedBadgeValue() {
-        return this.badgeValue.toString();
-      },
       badgeAriaLabel() {
-        if (!this.showBadge) return null;
         return `${this.badgeValue} notification${this.badgeValue !== 1 ? 's' : ''}`;
       },
     },
-    methods: {
-      handleClick(event) {
-        this.$emit('click', event);
-      },
-      handleKeydown(event) {
-        // Emit keydown event for parent to handle navigation
-        this.$emit('keydown', event);
-      },
-    },
   };
 
 </script>

From 4cdcc0074a3dadd5365fdace0e2ef49e4a97984b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 01:06:55 +0530
Subject: [PATCH 038/102] Updated the sliding indicator

---
 .../shared/views/StudioNavigation.vue         | 46 +++++++++++++++++++
 .../shared/views/StudioNavigationTab.vue      | 21 +--------
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index b0d64c7fa9..90abb2ce6a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -142,6 +142,10 @@
           @keydown="handleTabsKeydown"
         >
           <slot name="tabs"></slot>
+          <div
+            class="sliding-indicator"
+            :style="[indicatorStyle, { backgroundColor: $themeTokens.surface }]"
+          ></div>
         </div>
 
         <div
@@ -317,8 +321,13 @@
         canScrollLeft: false,
         canScrollRight: false,
         toolbarWidth: 0,
+        indicatorStyle: {
+          width: '0px',
+          transform: 'translateX(0px)',
+        },
       };
     },
+    
     computed: {
       ...mapState({
         user: state => state.session.currentUser,
@@ -404,11 +413,20 @@
         ];
       },
     },
+    watch: {
+      '$route'() {
+        this.$nextTick(() => {
+          this.moveIndicator();
+        });
+      },
+    },
     mounted() {
       this.updateTabIndices();
       this.updateWindowWidth();
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
+      window.addEventListener('resize', this.moveIndicator);
+      this.$nextTick(() => this.moveIndicator());
       const el = this.$refs.tabsContainer;
       if (el) {
         el.addEventListener('scroll', this.checkScrollPositions);
@@ -426,12 +444,29 @@
     },
     beforeDestroy() {
       window.removeEventListener('resize', this.handleResize);
+      window.removeEventListener('resize', this.moveIndicator);
     },
     methods: {
       ...mapActions(['logout']),
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
+      moveIndicator() {
+        const container = this.$refs.tabsContainer;
+        if (!container) return;
+        const activeTab = container.querySelector('.studio-navigation-tab--active');
+
+        if (activeTab) {
+          const containerRect = container.getBoundingClientRect();
+          const tabRect = activeTab.getBoundingClientRect();
+          const leftPosition = tabRect.left - containerRect.left + container.scrollLeft;
+
+          this.indicatorStyle = {
+            width: `${tabRect.width}px`,
+            transform: `translateX(${leftPosition}px)`,
+          };
+        }
+      },
       checkScrollPositions() {
         const el = this.$refs.tabsContainer;
         if (!el) return;
@@ -697,6 +732,7 @@
   }
 
   .studio-navigation__tabs-container {
+    position: relative;
     display: flex;
     flex: 1;
     padding: 0 24px;
@@ -707,6 +743,16 @@
     scrollbar-width: none;
     scroll-behavior: auto;
   }
+  .sliding-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
+    pointer-events: none; 
+    z-index: 1;
+}
 
   /* Side panel styles */
   .side-panel-header {
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index c40cb03249..e4b528c953 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -27,12 +27,6 @@
         {{ badgeValue }}
       </span>
     </span>
-    <span
-      v-if="isActive"
-      class="studio-navigation-tab__indicator"
-      :style="indicatorStyles"
-      aria-hidden="true"
-    ></span>
   </RouterLink>
 
 </template>
@@ -42,7 +36,6 @@
 
   export default {
     name: 'StudioNavigationTab',
-    inject: ['$themeTokens'],
     props: {
       to: {
         type: [String, Object],
@@ -74,11 +67,7 @@
           color: this.$themeTokens.text,
         };
       },
-      indicatorStyles() {
-        return {
-          backgroundColor: this.$themeTokens.surface,
-        };
-      },
+      
       isActive() {
         if (!this.to || !this.$route) return false;
 
@@ -154,12 +143,4 @@
     transition: 0.3s;
   }
 
-  .studio-navigation-tab__indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-  }
-
 </style>
\ No newline at end of file

From 066843c98fa09ce8d77d4bfae74e7497420d2dba Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 01:42:31 +0530
Subject: [PATCH 039/102] Updated the sliding indicator

---
 .../shared/views/StudioNavigation.vue         | 71 -------------------
 1 file changed, 71 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 90abb2ce6a..75671eb8a9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -139,7 +139,6 @@
         <div
           ref="tabsContainer"
           class="studio-navigation__tabs-container"
-          @keydown="handleTabsKeydown"
         >
           <slot name="tabs"></slot>
           <div
@@ -421,7 +420,6 @@
       },
     },
     mounted() {
-      this.updateTabIndices();
       this.updateWindowWidth();
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
@@ -438,7 +436,6 @@
     },
     updated() {
       this.$nextTick(() => {
-        this.updateTabIndices();
         this.updateToolbarWidth();
       });
     },
@@ -562,75 +559,7 @@
         }
         return value;
       },
-      handleTabsKeydown(event) {
-        const tabs = this.getTabElements();
-        if (!tabs.length) return;
 
-        const currentIndex = tabs.findIndex(
-          tab => tab === event.target || tab.contains(event.target),
-        );
-
-        if (currentIndex === -1) return;
-
-        let nextIndex = currentIndex;
-
-        switch (event.key) {
-          case 'ArrowLeft':
-            event.preventDefault();
-            nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
-            if (this.$isRTL) {
-              nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
-            }
-            break;
-
-          case 'ArrowRight':
-            event.preventDefault();
-            nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
-            if (this.$isRTL) {
-              nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
-            }
-            break;
-
-          default:
-            return;
-        }
-
-        this.focusTab(tabs[nextIndex]);
-      },
-      getTabElements() {
-        if (!this.$refs.tabsContainer) return [];
-
-        const tabs = Array.from(
-          this.$refs.tabsContainer.querySelectorAll('a[role], button[role="tab"], a[href]'),
-        );
-
-        return tabs;
-      },
-      focusTab(tabElement) {
-        if (!tabElement) return;
-
-        const vueInstance = tabElement.__vueParentComponent?.ctx;
-        if (vueInstance?.focus) {
-          vueInstance.focus();
-        } else {
-          tabElement.focus();
-        }
-      },
-      updateTabIndices() {
-        const tabs = this.getTabElements();
-        if (!tabs.length) return;
-
-        const activeTab = tabs.find(
-          tab =>
-            tab.getAttribute('aria-current') === 'page' ||
-            tab.getAttribute('aria-selected') === 'true',
-        );
-        const focusableTab = activeTab || tabs[0];
-
-        tabs.forEach(tab => {
-          tab.setAttribute('tabindex', tab === focusableTab ? '0' : '-1');
-        });
-      },
     },
     $trs: {
       title: 'Kolibri Studio',

From 799656eb4c4fda6274d4cac39440698c0ee16cee Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 02:39:33 +0530
Subject: [PATCH 040/102] Updated class anmes

---
 .../shared/views/StudioNavigation.vue         | 31 +++++++++----------
 .../shared/views/StudioNavigationTab.vue      | 12 +++----
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 75671eb8a9..6d1a0c1460 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -32,7 +32,7 @@
           <KExternalLink
             v-else
             :href="homeLink"
-            class="studio-navigation__logo-link"
+            class="studio-navigation-logo-link"
           >
             <KLogo
               altText="Kolibri Logo with background"
@@ -43,7 +43,7 @@
 
         <template #brand>
           <div
-            class="studio-navigation__title-container"
+            class="studio-navigation-title-container"
             style="max-width: 160px"
           >
             <span>
@@ -56,7 +56,7 @@
           <div
             ref="studioNavigationActions"
             aria-live="polite"
-            class="studio-navigation__actions"
+            class="studio-navigation-actions"
           >
             <template v-if="loggedIn">
               <KButton
@@ -93,7 +93,6 @@
                 appearance="flat-button"
                 style="text-transform: none"
                 :ariaLabel="$tr('guestMenuLabel')"
-                class="guest-menu-button"
               >
                 <KIconButton
                   :disabled="true"
@@ -122,10 +121,10 @@
       v-if="hasTabs"
       :aria-label="$tr('mainNavigationLabel')"
     >
-      <div class="studio-navigation__tabs-wrapper">
+      <div class="studio-navigation-tabs-wrapper">
         <div
           v-if="isOverflowing && canScrollLeft"
-          class="scroll-button scroll-button--left"
+          class="scroll-button scroll-button-left"
           :style="{ backgroundColor: $themeTokens.appBar }"
           @click="scrollTabs(-300)"
         >
@@ -138,7 +137,7 @@
 
         <div
           ref="tabsContainer"
-          class="studio-navigation__tabs-container"
+          class="studio-navigation-tabs-container"
         >
           <slot name="tabs"></slot>
           <div
@@ -149,7 +148,7 @@
 
         <div
           v-if="isOverflowing && canScrollRight"
-          class="scroll-button scroll-button--right"
+          class="scroll-button scroll-button-right"
           :style="{ backgroundColor: $themeTokens.appBar }"
           @click="scrollTabs(300)"
         >
@@ -451,7 +450,7 @@
       moveIndicator() {
         const container = this.$refs.tabsContainer;
         if (!container) return;
-        const activeTab = container.querySelector('.studio-navigation-tab--active');
+        const activeTab = container.querySelector('.studio-navigation-tab-active');
 
         if (activeTab) {
           const containerRect = container.getBoundingClientRect();
@@ -599,7 +598,7 @@
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
   }
 
-  .studio-navigation__logo-link {
+  .studio-navigation-logo-link {
     display: flex;
     align-items: center;
     padding: 4px;
@@ -611,7 +610,7 @@
     }
   }
 
-  .studio-navigation__title-container {
+  .studio-navigation-title-container {
     display: block;    
     overflow: hidden;
     white-space: nowrap;
@@ -622,12 +621,12 @@
   }
 
 
-  .studio-navigation__actions {
+  .studio-navigation-actions {
     display: flex;
     align-items: center;
   }
 
-  .studio-navigation__tabs-wrapper {
+  .studio-navigation-tabs-wrapper {
     position: relative;
     display: flex;
     align-items: center;
@@ -648,19 +647,19 @@
     transition: background-color 0.2s ease;
   
     
-    &--left {
+    &-left {
       left: 0;
       padding-right: 8px;
     }
     
-    &--right {
+    &-right {
       right: 0;
       padding-left: 8px;
      
     }
   }
 
-  .studio-navigation__tabs-container {
+  .studio-navigation-tabs-container {
     position: relative;
     display: flex;
     flex: 1;
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index e4b528c953..e29ae0a5a9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -17,11 +17,11 @@
     @click="$emit('click', $event)"
     @keydown="$emit('keydown', $event)"
   >
-    <span class="studio-navigation-tab__content">
+    <span class="studio-navigation-tab-content">
       <slot></slot>
       <span
         v-if="showBadge"
-        class="studio-navigation-tab__badge"
+        class="studio-navigation-tab-badge"
         :aria-label="badgeAriaLabel"
       >
         {{ badgeValue }}
@@ -58,7 +58,7 @@
       tabClasses() {
         return {
           'studio-navigation-tab': true,
-          'studio-navigation-tab--active': this.isActive,
+          'studio-navigation-tab-active': this.isActive,
           notranslate: this.notranslate,
         };
       },
@@ -114,19 +114,19 @@
     transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
   }
 
-  .studio-navigation-tab:not(.studio-navigation-tab--active) {
+  .studio-navigation-tab:not(.studio-navigation-tab-active) {
     opacity: 0.7;
   }
 
 
-  .studio-navigation-tab__content {
+  .studio-navigation-tab-content {
     position: relative;
     display: flex;
     gap: 8px;
     align-items: center;
   }
 
-  .studio-navigation-tab__badge {
+  .studio-navigation-tab-badge {
     position: absolute;
     top: -11px;
     right: -22px;

From 0344e6d8f0c5ad3670e520ddc17cc4ee2dbeaaae Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 12:27:27 +0530
Subject: [PATCH 041/102] Updated the tabs container

---
 .../shared/views/StudioNavigation.vue         | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 6d1a0c1460..004e2dc120 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -121,7 +121,10 @@
       v-if="hasTabs"
       :aria-label="$tr('mainNavigationLabel')"
     >
-      <div class="studio-navigation-tabs-wrapper">
+      <div 
+        class="studio-navigation-tabs-wrapper"
+        :style="tabsWrapperStyles"
+      >
         <div
           v-if="isOverflowing && canScrollLeft"
           class="scroll-button scroll-button-left"
@@ -291,6 +294,7 @@
 <script>
 
   import { mapActions, mapState, mapGetters } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import LanguageSwitcherModal from '../languageSwitcher/LanguageSwitcherModal.vue';
   import SidePanelModal from './SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
@@ -303,6 +307,12 @@
       SkipNavigationLink,
       LanguageSwitcherModal,
     },
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       title: {
         type: String,
@@ -410,6 +420,11 @@
           },
         ];
       },
+      tabsWrapperStyles() {
+        return {
+          padding: this.windowBreakpoint <= 3 ? '0 16px' : '0 24px',
+        };
+      },
     },
     watch: {
       '$route'() {
@@ -663,13 +678,13 @@
     position: relative;
     display: flex;
     flex: 1;
-    padding: 0 24px;
     overflow-x: auto;
     height: 48px;
     list-style-type: none;
     white-space: nowrap;
     scrollbar-width: none;
     scroll-behavior: auto;
+    transition: transform .6s cubic-bezier(.86, 0, .07, 1);
   }
   .sliding-indicator {
     position: absolute;

From ccaa08b5f009d2c5853df70fd1511addb81c3720 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 19:35:30 +0530
Subject: [PATCH 042/102] Sliding approach

---
 .../shared/views/StudioNavigation.vue         | 332 +++++++++++++++++-
 1 file changed, 322 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 004e2dc120..35eb89a818 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -141,6 +141,9 @@
         <div
           ref="tabsContainer"
           class="studio-navigation-tabs-container"
+          :class="{ 'is-dragging': isDragging }"
+          @mousedown="handleDragStart"
+          @touchstart="handleDragStart"
         >
           <slot name="tabs"></slot>
           <div
@@ -333,6 +336,20 @@
           width: '0px',
           transform: 'translateX(0px)',
         },
+        // Drag state
+        isDragging: false,
+        dragStartX: 0,
+        dragStartScrollLeft: 0,
+        currentTranslateX: 0,
+        dragVelocity: 0,
+        lastDragX: 0,
+        lastDragTime: 0,
+        potentialDrag: false,
+        dragStarted: false,
+        // Resize debounce
+        resizeTimeout: null,
+        resizeObserverTimeout: null,
+        resizeObserver: null,
       };
     },
     
@@ -432,20 +449,60 @@
           this.moveIndicator();
         });
       },
+      windowBreakpoint() {
+        // Clear existing timeout
+        if (this.resizeTimeout) {
+          clearTimeout(this.resizeTimeout);
+        }
+        
+        // Wait 2 seconds before centering
+        this.resizeTimeout = setTimeout(() => {
+          this.centerActiveTab();
+        }, 2000);
+      },
     },
     mounted() {
       this.updateWindowWidth();
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
       window.addEventListener('resize', this.moveIndicator);
-      this.$nextTick(() => this.moveIndicator());
+      
+      // Use requestAnimationFrame to ensure DOM is painted
+      this.$nextTick(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.moveIndicator();
+            this.setupDragListeners();
+            this.checkScrollPositions();
+            
+            // Add a small delay before centering to ensure all styles are applied
+            setTimeout(() => {
+              this.centerActiveTab();
+            }, 100);
+          });
+        });
+      });
+      
       const el = this.$refs.tabsContainer;
       if (el) {
         el.addEventListener('scroll', this.checkScrollPositions);
-        this.checkScrollPositions();
         
-        const resizeObserver = new ResizeObserver(this.checkScrollPositions);
+        // Initial check with delay
+        setTimeout(() => {
+          this.checkScrollPositions();
+        }, 150);
+        
+        const resizeObserver = new ResizeObserver(() => {
+          // Debounce the resize observer
+          if (this.resizeObserverTimeout) {
+            clearTimeout(this.resizeObserverTimeout);
+          }
+          this.resizeObserverTimeout = setTimeout(() => {
+            this.checkScrollPositions();
+          }, 100);
+        });
         resizeObserver.observe(el);
+        this.resizeObserver = resizeObserver;
       }
     },
     updated() {
@@ -456,6 +513,28 @@
     beforeDestroy() {
       window.removeEventListener('resize', this.handleResize);
       window.removeEventListener('resize', this.moveIndicator);
+      
+      // Clear all timeouts
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      if (this.resizeObserverTimeout) {
+        clearTimeout(this.resizeObserverTimeout);
+      }
+      
+      // Disconnect resize observer
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      
+      // Remove scroll listener
+      const el = this.$refs.tabsContainer;
+      if (el) {
+        el.removeEventListener('scroll', this.checkScrollPositions);
+      }
+      
+      // Remove drag event listeners
+      this.removeDragListeners();
     },
     methods: {
       ...mapActions(['logout']),
@@ -478,15 +557,74 @@
           };
         }
       },
+      centerActiveTab() {
+        const container = this.$refs.tabsContainer;
+        if (!container) {
+          // Retry after a short delay if container isn't ready
+          setTimeout(() => {
+            if (this.$refs.tabsContainer) {
+              this.centerActiveTab();
+            }
+          }, 100);
+          return;
+        }
+        
+        // Wait for overflow check to complete
+        if (!this.isOverflowing) {
+          setTimeout(() => {
+            this.checkScrollPositions();
+            if (this.isOverflowing) {
+              this.centerActiveTab();
+            }
+          }, 50);
+          return;
+        }
+        
+        const activeTab = container.querySelector('.studio-navigation-tab-active');
+        if (!activeTab) return;
+
+        const containerWidth = container.clientWidth;
+        const tabRect = activeTab.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        
+        // Calculate position to center the active tab
+        const tabLeft = tabRect.left - containerRect.left + container.scrollLeft;
+        const tabCenter = tabLeft + (tabRect.width / 2);
+        const targetScroll = tabCenter - (containerWidth / 2);
+        
+        // Clamp to valid scroll range
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        const clampedScroll = Math.max(0, Math.min(maxScroll, targetScroll));
+        
+        container.style.scrollBehavior = 'auto';
+        container.style.transition = 'scroll-left 0.6s ease-in-out';
+        
+        container.scrollTo({
+          left: clampedScroll,
+          behavior: 'smooth'
+        });
+
+        setTimeout(() => {
+          container.style.transition = '';
+          container.style.scrollBehavior = 'smooth';
+          this.checkScrollPositions();
+        }, 600);
+      },
       checkScrollPositions() {
         const el = this.$refs.tabsContainer;
         if (!el) return;
 
+        // Force a reflow to get accurate measurements
+        void el.offsetHeight;
+
         this.isOverflowing = el.scrollWidth > el.clientWidth;
-        this.canScrollLeft = el.scrollLeft > 0;
+        
+        // Use a small threshold to account for rounding errors
+        const threshold = 1;
+        this.canScrollLeft = el.scrollLeft > threshold;
 
-        const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= el.scrollWidth;
-        this.canScrollRight = !atEnd;
+        const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= (el.scrollWidth - threshold);
+        this.canScrollRight = !atEnd && this.isOverflowing;
       },
       scrollTabs(distance) {
         const container = this.$refs.tabsContainer;
@@ -495,6 +633,155 @@
           container.scrollBy({ left: scrollDirection, behavior: 'smooth' });
         }
       },
+      setupDragListeners() {
+        const container = this.$refs.tabsContainer;
+        if (!container) {
+          return;
+        }
+
+        // Add event listeners to document for global tracking
+        document.addEventListener('mousemove', this.handleDragMove, { passive: false });
+        document.addEventListener('mouseup', this.handleDragEnd);
+        document.addEventListener('touchmove', this.handleDragMove, { passive: false });
+        document.addEventListener('touchend', this.handleDragEnd);
+        document.addEventListener('touchcancel', this.handleDragEnd);
+      },
+      removeDragListeners() {
+        document.removeEventListener('mousemove', this.handleDragMove);
+        document.removeEventListener('mouseup', this.handleDragEnd);
+        document.removeEventListener('touchmove', this.handleDragMove);
+        document.removeEventListener('touchend', this.handleDragEnd);
+        document.removeEventListener('touchcancel', this.handleDragEnd);
+      },
+      // Drag handlers
+      handleDragStart(e) {
+        const container = this.$refs.tabsContainer;
+        
+        if (!container || !this.isOverflowing) {
+          return;
+        }
+        
+        this.isDragging = false;
+        this.dragStarted = false;
+        const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
+        this.dragStartX = clientX;
+        this.dragStartScrollLeft = container.scrollLeft;
+        this.currentTranslateX = 0;
+        this.lastDragX = clientX;
+        this.lastDragTime = Date.now();
+        this.dragVelocity = 0;
+        this.potentialDrag = true;
+      },
+      handleDragMove(e) {
+        if (!this.potentialDrag && !this.isDragging) return;
+
+        const container = this.$refs.tabsContainer;
+        if (!container) return;
+
+        const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
+        const deltaX = clientX - this.dragStartX;
+        
+        // If movement is more than 5px, consider it a drag (not a click)
+        if (!this.dragStarted && Math.abs(deltaX) > 5) {
+          this.dragStarted = true;
+          this.isDragging = true;
+          this.potentialDrag = false;
+          
+          e.preventDefault();
+          e.stopPropagation();
+          
+          container.style.scrollBehavior = 'auto';
+          container.style.transition = 'none';
+        }
+        
+        if (!this.isDragging) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const currentTime = Date.now();
+        const deltaTime = currentTime - this.lastDragTime;
+
+        if (deltaTime > 0) {
+          this.dragVelocity = (clientX - this.lastDragX) / deltaTime;
+        }
+
+        this.lastDragX = clientX;
+        this.lastDragTime = currentTime;
+
+        const newScrollLeft = this.dragStartScrollLeft - deltaX;
+        const maxScroll = container.scrollWidth - container.clientWidth;
+
+        // Allow over-scrolling with resistance
+        if (newScrollLeft < 0) {
+          const overScroll = Math.abs(newScrollLeft);
+          const resistance = Math.min(overScroll * 0.7, 600);
+          container.scrollLeft = 0;
+          this.currentTranslateX = resistance;
+        } else if (newScrollLeft > maxScroll) {
+          const overScroll = newScrollLeft - maxScroll;
+          const resistance = Math.min(overScroll * 0.7, 600);
+          container.scrollLeft = maxScroll;
+          this.currentTranslateX = -resistance;
+        } else {
+          container.scrollLeft = newScrollLeft;
+          this.currentTranslateX = 0;
+        }
+
+        container.style.transform = `translateX(${this.currentTranslateX}px)`;
+      },
+      handleDragEnd() {
+        if (!this.potentialDrag && !this.isDragging) return;
+
+        const container = this.$refs.tabsContainer;
+        if (!container) return;
+
+        // If no drag movement, allow the click to happen
+        if (this.potentialDrag && !this.dragStarted) {
+          this.potentialDrag = false;
+          return;
+        }
+
+        this.isDragging = false;
+        this.potentialDrag = false;
+        this.dragStarted = false;
+
+        // Animate back if over-scrolled
+        if (this.currentTranslateX !== 0) {
+          container.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+          container.style.transform = 'translateX(0px)';
+          
+          setTimeout(() => {
+            container.style.transition = '';
+            container.style.scrollBehavior = 'smooth';
+            this.currentTranslateX = 0;
+            this.checkScrollPositions();
+          }, 350);
+        } else {
+          container.style.scrollBehavior = 'smooth';
+          
+          // Add momentum scrolling
+          const absVelocity = Math.abs(this.dragVelocity);
+          if (absVelocity > 0.5) {
+            const momentum = this.dragVelocity * 400;
+            const currentScroll = container.scrollLeft;
+            const targetScroll = currentScroll - momentum;
+            const maxScroll = container.scrollWidth - container.clientWidth;
+            const clampedScroll = Math.max(0, Math.min(maxScroll, targetScroll));
+            
+            container.scrollTo({
+              left: clampedScroll,
+              behavior: 'smooth'
+            });
+          }
+          
+          setTimeout(() => {
+            this.checkScrollPositions();
+          }, 50);
+        }
+
+        this.dragVelocity = 0;
+      },
       closeSidePanelAndNavigate(url) {
         this.sidePanelOpen = false;
         window.location.href = url;
@@ -560,6 +847,16 @@
       handleResize() {
         this.updateWindowWidth();
         this.updateToolbarWidth();
+        
+        // Clear existing timeout
+        if (this.resizeTimeout) {
+          clearTimeout(this.resizeTimeout);
+        }
+        
+        // Wait 2 seconds after resize stops before centering
+        this.resizeTimeout = setTimeout(() => {
+          this.centerActiveTab();
+        }, 1000);
       },
       updateWindowWidth() {
         this.windowWidth = window.innerWidth;
@@ -683,19 +980,34 @@
     list-style-type: none;
     white-space: nowrap;
     scrollbar-width: none;
-    scroll-behavior: auto;
-    transition: transform .6s cubic-bezier(.86, 0, .07, 1);
+    scroll-behavior: smooth;
+    cursor: grab;
+    user-select: none;
+    will-change: transform;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &.is-dragging {
+      cursor: grabbing;
+      scroll-behavior: auto;
+      
+      * {
+        pointer-events: none;
+      }
+    }
   }
+
   .sliding-indicator {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
-    
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
     pointer-events: none; 
     z-index: 1;
-}
+  }
 
   /* Side panel styles */
   .side-panel-header {

From e57492217aee6a2336f62fcd2250bec374ad0443 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 22:38:37 +0530
Subject: [PATCH 043/102] Sliding approach

---
 .../shared/views/StudioNavigation.vue         | 119 +++++++-----------
 1 file changed, 45 insertions(+), 74 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 35eb89a818..048e2d7d87 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -142,6 +142,7 @@
           ref="tabsContainer"
           class="studio-navigation-tabs-container"
           :class="{ 'is-dragging': isDragging }"
+          :style="containerStyles"
           @mousedown="handleDragStart"
           @touchstart="handleDragStart"
         >
@@ -387,6 +388,11 @@
         const maxChars = availableWidth > 0 ? Math.floor(availableWidth / averageCharWidth) : 1;
         return this.truncateText(displayTitle, maxChars);
       },
+      containerStyles() {
+        return {
+          padding: this.windowBreakpoint <= 3 ? '0 16px' : '0 24px',
+        };
+      },
       userMenuItems() {
         const items = [];
 
@@ -439,7 +445,7 @@
       },
       tabsWrapperStyles() {
         return {
-          padding: this.windowBreakpoint <= 3 ? '0 16px' : '0 24px',
+          padding: this.windowBreakpoint <= 2 ? '0 48px' : '0',
         };
       },
     },
@@ -447,6 +453,7 @@
       '$route'() {
         this.$nextTick(() => {
           this.moveIndicator();
+          this.centerActiveTab();
         });
       },
       windowBreakpoint() {
@@ -458,7 +465,7 @@
         // Wait 2 seconds before centering
         this.resizeTimeout = setTimeout(() => {
           this.centerActiveTab();
-        }, 2000);
+        }, 1000);
       },
     },
     mounted() {
@@ -467,7 +474,6 @@
       window.addEventListener('resize', this.handleResize);
       window.addEventListener('resize', this.moveIndicator);
       
-      // Use requestAnimationFrame to ensure DOM is painted
       this.$nextTick(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -559,79 +565,57 @@
       },
       centerActiveTab() {
         const container = this.$refs.tabsContainer;
-        if (!container) {
-          // Retry after a short delay if container isn't ready
-          setTimeout(() => {
-            if (this.$refs.tabsContainer) {
-              this.centerActiveTab();
-            }
-          }, 100);
-          return;
-        }
-        
-        // Wait for overflow check to complete
-        if (!this.isOverflowing) {
-          setTimeout(() => {
-            this.checkScrollPositions();
-            if (this.isOverflowing) {
-              this.centerActiveTab();
-            }
-          }, 50);
-          return;
-        }
-        
+        // Safety checks
+        if (!container || !this.isOverflowing) return;
+
         const activeTab = container.querySelector('.studio-navigation-tab-active');
         if (!activeTab) return;
 
-        const containerWidth = container.clientWidth;
-        const tabRect = activeTab.getBoundingClientRect();
+        // 1. Get Geometry
         const containerRect = container.getBoundingClientRect();
-        
-        // Calculate position to center the active tab
-        const tabLeft = tabRect.left - containerRect.left + container.scrollLeft;
-        const tabCenter = tabLeft + (tabRect.width / 2);
-        const targetScroll = tabCenter - (containerWidth / 2);
-        
-        // Clamp to valid scroll range
-        const maxScroll = container.scrollWidth - container.clientWidth;
-        const clampedScroll = Math.max(0, Math.min(maxScroll, targetScroll));
-        
-        container.style.scrollBehavior = 'auto';
-        container.style.transition = 'scroll-left 0.6s ease-in-out';
-        
-        container.scrollTo({
-          left: clampedScroll,
-          behavior: 'smooth'
-        });
-
-        setTimeout(() => {
-          container.style.transition = '';
-          container.style.scrollBehavior = 'smooth';
-          this.checkScrollPositions();
-        }, 600);
+        const tabRect = activeTab.getBoundingClientRect();
+        const computedStyle = window.getComputedStyle(container);
+        const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+       
+        const visibleLeftEdge = containerRect.left + paddingLeft;
+        const visibleRightEdge = containerRect.left + container.clientWidth;
+        const isOffScreenLeft = tabRect.left < (visibleLeftEdge - 1);
+        const isOffScreenRight = tabRect.right > (visibleRightEdge + 1);
+
+        if (isOffScreenLeft || isOffScreenRight) {
+          activeTab.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center'
+          });
+        }
       },
       checkScrollPositions() {
         const el = this.$refs.tabsContainer;
         if (!el) return;
-
-        // Force a reflow to get accurate measurements
         void el.offsetHeight;
 
         this.isOverflowing = el.scrollWidth > el.clientWidth;
         
-        // Use a small threshold to account for rounding errors
         const threshold = 1;
         this.canScrollLeft = el.scrollLeft > threshold;
 
         const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= (el.scrollWidth - threshold);
         this.canScrollRight = !atEnd && this.isOverflowing;
       },
-      scrollTabs(distance) {
+      scrollTabs(direction) {
         const container = this.$refs.tabsContainer;
-        if (container) {
-          const scrollDirection = this.$isRTL ? -distance : distance;
-          container.scrollBy({ left: scrollDirection, behavior: 'smooth' });
-        }
+        if (!container) return;
+        const scrollAmount = container.clientWidth * 0.75;
+        const vector = this.$isRTL ? -direction : direction;
+
+        container.scrollBy({
+          left: vector * scrollAmount,
+          behavior: 'smooth'
+        });
+        setTimeout(() => {
+          this.checkScrollPositions();
+        }, 500);
       },
       setupDragListeners() {
         const container = this.$refs.tabsContainer;
@@ -639,7 +623,7 @@
           return;
         }
 
-        // Add event listeners to document for global tracking
+  
         document.addEventListener('mousemove', this.handleDragMove, { passive: false });
         document.addEventListener('mouseup', this.handleDragEnd);
         document.addEventListener('touchmove', this.handleDragMove, { passive: false });
@@ -653,7 +637,7 @@
         document.removeEventListener('touchend', this.handleDragEnd);
         document.removeEventListener('touchcancel', this.handleDragEnd);
       },
-      // Drag handlers
+   
       handleDragStart(e) {
         const container = this.$refs.tabsContainer;
         
@@ -681,7 +665,6 @@
         const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
         const deltaX = clientX - this.dragStartX;
         
-        // If movement is more than 5px, consider it a drag (not a click)
         if (!this.dragStarted && Math.abs(deltaX) > 5) {
           this.dragStarted = true;
           this.isDragging = true;
@@ -712,7 +695,6 @@
         const newScrollLeft = this.dragStartScrollLeft - deltaX;
         const maxScroll = container.scrollWidth - container.clientWidth;
 
-        // Allow over-scrolling with resistance
         if (newScrollLeft < 0) {
           const overScroll = Math.abs(newScrollLeft);
           const resistance = Math.min(overScroll * 0.7, 600);
@@ -735,8 +717,6 @@
 
         const container = this.$refs.tabsContainer;
         if (!container) return;
-
-        // If no drag movement, allow the click to happen
         if (this.potentialDrag && !this.dragStarted) {
           this.potentialDrag = false;
           return;
@@ -745,8 +725,6 @@
         this.isDragging = false;
         this.potentialDrag = false;
         this.dragStarted = false;
-
-        // Animate back if over-scrolled
         if (this.currentTranslateX !== 0) {
           container.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
           container.style.transform = 'translateX(0px)';
@@ -759,8 +737,6 @@
           }, 350);
         } else {
           container.style.scrollBehavior = 'smooth';
-          
-          // Add momentum scrolling
           const absVelocity = Math.abs(this.dragVelocity);
           if (absVelocity > 0.5) {
             const momentum = this.dragVelocity * 400;
@@ -848,12 +824,9 @@
         this.updateWindowWidth();
         this.updateToolbarWidth();
         
-        // Clear existing timeout
         if (this.resizeTimeout) {
           clearTimeout(this.resizeTimeout);
         }
-        
-        // Wait 2 seconds after resize stops before centering
         this.resizeTimeout = setTimeout(() => {
           this.centerActiveTab();
         }, 1000);
@@ -955,18 +928,17 @@
     z-index: 5;
     cursor: pointer;
     user-select: none;
-    padding: 0 4px;
     transition: background-color 0.2s ease;
   
     
     &-left {
       left: 0;
-      padding-right: 8px;
+      padding-left: 16px;
     }
     
     &-right {
       right: 0;
-      padding-left: 8px;
+      padding-right: 16px;
      
     }
   }
@@ -981,7 +953,6 @@
     white-space: nowrap;
     scrollbar-width: none;
     scroll-behavior: smooth;
-    cursor: grab;
     user-select: none;
     will-change: transform;
 

From 056d06ad5742e341cd4bbcf63684c52400c4e8bb Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 00:38:04 +0530
Subject: [PATCH 044/102] old approach after review

---
 .../shared/views/StudioNavigation.vue         | 310 +-----------------
 1 file changed, 16 insertions(+), 294 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 048e2d7d87..3669052c07 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -129,7 +129,7 @@
           v-if="isOverflowing && canScrollLeft"
           class="scroll-button scroll-button-left"
           :style="{ backgroundColor: $themeTokens.appBar }"
-          @click="scrollTabs(-300)"
+          @click="scrollTabs(-350)"
         >
           <KIconButton
             icon="chevronLeft"
@@ -141,10 +141,7 @@
         <div
           ref="tabsContainer"
           class="studio-navigation-tabs-container"
-          :class="{ 'is-dragging': isDragging }"
           :style="containerStyles"
-          @mousedown="handleDragStart"
-          @touchstart="handleDragStart"
         >
           <slot name="tabs"></slot>
           <div
@@ -157,7 +154,7 @@
           v-if="isOverflowing && canScrollRight"
           class="scroll-button scroll-button-right"
           :style="{ backgroundColor: $themeTokens.appBar }"
-          @click="scrollTabs(300)"
+          @click="scrollTabs(350)"
         >
           <KIconButton
             icon="chevronRight"
@@ -337,20 +334,6 @@
           width: '0px',
           transform: 'translateX(0px)',
         },
-        // Drag state
-        isDragging: false,
-        dragStartX: 0,
-        dragStartScrollLeft: 0,
-        currentTranslateX: 0,
-        dragVelocity: 0,
-        lastDragX: 0,
-        lastDragTime: 0,
-        potentialDrag: false,
-        dragStarted: false,
-        // Resize debounce
-        resizeTimeout: null,
-        resizeObserverTimeout: null,
-        resizeObserver: null,
       };
     },
     
@@ -453,62 +436,22 @@
       '$route'() {
         this.$nextTick(() => {
           this.moveIndicator();
-          this.centerActiveTab();
         });
       },
-      windowBreakpoint() {
-        // Clear existing timeout
-        if (this.resizeTimeout) {
-          clearTimeout(this.resizeTimeout);
-        }
-        
-        // Wait 2 seconds before centering
-        this.resizeTimeout = setTimeout(() => {
-          this.centerActiveTab();
-        }, 1000);
-      },
     },
     mounted() {
       this.updateWindowWidth();
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
       window.addEventListener('resize', this.moveIndicator);
-      
-      this.$nextTick(() => {
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            this.moveIndicator();
-            this.setupDragListeners();
-            this.checkScrollPositions();
-            
-            // Add a small delay before centering to ensure all styles are applied
-            setTimeout(() => {
-              this.centerActiveTab();
-            }, 100);
-          });
-        });
-      });
-      
+      this.$nextTick(() => this.moveIndicator());
       const el = this.$refs.tabsContainer;
       if (el) {
         el.addEventListener('scroll', this.checkScrollPositions);
+        this.checkScrollPositions();
         
-        // Initial check with delay
-        setTimeout(() => {
-          this.checkScrollPositions();
-        }, 150);
-        
-        const resizeObserver = new ResizeObserver(() => {
-          // Debounce the resize observer
-          if (this.resizeObserverTimeout) {
-            clearTimeout(this.resizeObserverTimeout);
-          }
-          this.resizeObserverTimeout = setTimeout(() => {
-            this.checkScrollPositions();
-          }, 100);
-        });
+        const resizeObserver = new ResizeObserver(this.checkScrollPositions);
         resizeObserver.observe(el);
-        this.resizeObserver = resizeObserver;
       }
     },
     updated() {
@@ -519,28 +462,6 @@
     beforeDestroy() {
       window.removeEventListener('resize', this.handleResize);
       window.removeEventListener('resize', this.moveIndicator);
-      
-      // Clear all timeouts
-      if (this.resizeTimeout) {
-        clearTimeout(this.resizeTimeout);
-      }
-      if (this.resizeObserverTimeout) {
-        clearTimeout(this.resizeObserverTimeout);
-      }
-      
-      // Disconnect resize observer
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
-      
-      // Remove scroll listener
-      const el = this.$refs.tabsContainer;
-      if (el) {
-        el.removeEventListener('scroll', this.checkScrollPositions);
-      }
-      
-      // Remove drag event listeners
-      this.removeDragListeners();
     },
     methods: {
       ...mapActions(['logout']),
@@ -563,200 +484,22 @@
           };
         }
       },
-      centerActiveTab() {
-        const container = this.$refs.tabsContainer;
-        // Safety checks
-        if (!container || !this.isOverflowing) return;
-
-        const activeTab = container.querySelector('.studio-navigation-tab-active');
-        if (!activeTab) return;
-
-        // 1. Get Geometry
-        const containerRect = container.getBoundingClientRect();
-        const tabRect = activeTab.getBoundingClientRect();
-        const computedStyle = window.getComputedStyle(container);
-        const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-       
-        const visibleLeftEdge = containerRect.left + paddingLeft;
-        const visibleRightEdge = containerRect.left + container.clientWidth;
-        const isOffScreenLeft = tabRect.left < (visibleLeftEdge - 1);
-        const isOffScreenRight = tabRect.right > (visibleRightEdge + 1);
-
-        if (isOffScreenLeft || isOffScreenRight) {
-          activeTab.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest',
-            inline: 'center'
-          });
-        }
-      },
       checkScrollPositions() {
         const el = this.$refs.tabsContainer;
         if (!el) return;
-        void el.offsetHeight;
 
         this.isOverflowing = el.scrollWidth > el.clientWidth;
-        
-        const threshold = 1;
-        this.canScrollLeft = el.scrollLeft > threshold;
-
-        const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= (el.scrollWidth - threshold);
-        this.canScrollRight = !atEnd && this.isOverflowing;
-      },
-      scrollTabs(direction) {
-        const container = this.$refs.tabsContainer;
-        if (!container) return;
-        const scrollAmount = container.clientWidth * 0.75;
-        const vector = this.$isRTL ? -direction : direction;
-
-        container.scrollBy({
-          left: vector * scrollAmount,
-          behavior: 'smooth'
-        });
-        setTimeout(() => {
-          this.checkScrollPositions();
-        }, 500);
-      },
-      setupDragListeners() {
-        const container = this.$refs.tabsContainer;
-        if (!container) {
-          return;
-        }
-
-  
-        document.addEventListener('mousemove', this.handleDragMove, { passive: false });
-        document.addEventListener('mouseup', this.handleDragEnd);
-        document.addEventListener('touchmove', this.handleDragMove, { passive: false });
-        document.addEventListener('touchend', this.handleDragEnd);
-        document.addEventListener('touchcancel', this.handleDragEnd);
-      },
-      removeDragListeners() {
-        document.removeEventListener('mousemove', this.handleDragMove);
-        document.removeEventListener('mouseup', this.handleDragEnd);
-        document.removeEventListener('touchmove', this.handleDragMove);
-        document.removeEventListener('touchend', this.handleDragEnd);
-        document.removeEventListener('touchcancel', this.handleDragEnd);
-      },
-   
-      handleDragStart(e) {
-        const container = this.$refs.tabsContainer;
-        
-        if (!container || !this.isOverflowing) {
-          return;
-        }
-        
-        this.isDragging = false;
-        this.dragStarted = false;
-        const clientX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
-        this.dragStartX = clientX;
-        this.dragStartScrollLeft = container.scrollLeft;
-        this.currentTranslateX = 0;
-        this.lastDragX = clientX;
-        this.lastDragTime = Date.now();
-        this.dragVelocity = 0;
-        this.potentialDrag = true;
-      },
-      handleDragMove(e) {
-        if (!this.potentialDrag && !this.isDragging) return;
-
-        const container = this.$refs.tabsContainer;
-        if (!container) return;
-
-        const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
-        const deltaX = clientX - this.dragStartX;
-        
-        if (!this.dragStarted && Math.abs(deltaX) > 5) {
-          this.dragStarted = true;
-          this.isDragging = true;
-          this.potentialDrag = false;
-          
-          e.preventDefault();
-          e.stopPropagation();
-          
-          container.style.scrollBehavior = 'auto';
-          container.style.transition = 'none';
-        }
-        
-        if (!this.isDragging) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const currentTime = Date.now();
-        const deltaTime = currentTime - this.lastDragTime;
+        this.canScrollLeft = el.scrollLeft > 0;
 
-        if (deltaTime > 0) {
-          this.dragVelocity = (clientX - this.lastDragX) / deltaTime;
-        }
-
-        this.lastDragX = clientX;
-        this.lastDragTime = currentTime;
-
-        const newScrollLeft = this.dragStartScrollLeft - deltaX;
-        const maxScroll = container.scrollWidth - container.clientWidth;
-
-        if (newScrollLeft < 0) {
-          const overScroll = Math.abs(newScrollLeft);
-          const resistance = Math.min(overScroll * 0.7, 600);
-          container.scrollLeft = 0;
-          this.currentTranslateX = resistance;
-        } else if (newScrollLeft > maxScroll) {
-          const overScroll = newScrollLeft - maxScroll;
-          const resistance = Math.min(overScroll * 0.7, 600);
-          container.scrollLeft = maxScroll;
-          this.currentTranslateX = -resistance;
-        } else {
-          container.scrollLeft = newScrollLeft;
-          this.currentTranslateX = 0;
-        }
-
-        container.style.transform = `translateX(${this.currentTranslateX}px)`;
+        const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= el.scrollWidth;
+        this.canScrollRight = !atEnd;
       },
-      handleDragEnd() {
-        if (!this.potentialDrag && !this.isDragging) return;
-
+      scrollTabs(distance) {
         const container = this.$refs.tabsContainer;
-        if (!container) return;
-        if (this.potentialDrag && !this.dragStarted) {
-          this.potentialDrag = false;
-          return;
+        if (container) {
+          const scrollDirection = this.$isRTL ? -distance : distance;
+          container.scrollBy({ left: scrollDirection, behavior: 'smooth' });
         }
-
-        this.isDragging = false;
-        this.potentialDrag = false;
-        this.dragStarted = false;
-        if (this.currentTranslateX !== 0) {
-          container.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-          container.style.transform = 'translateX(0px)';
-          
-          setTimeout(() => {
-            container.style.transition = '';
-            container.style.scrollBehavior = 'smooth';
-            this.currentTranslateX = 0;
-            this.checkScrollPositions();
-          }, 350);
-        } else {
-          container.style.scrollBehavior = 'smooth';
-          const absVelocity = Math.abs(this.dragVelocity);
-          if (absVelocity > 0.5) {
-            const momentum = this.dragVelocity * 400;
-            const currentScroll = container.scrollLeft;
-            const targetScroll = currentScroll - momentum;
-            const maxScroll = container.scrollWidth - container.clientWidth;
-            const clampedScroll = Math.max(0, Math.min(maxScroll, targetScroll));
-            
-            container.scrollTo({
-              left: clampedScroll,
-              behavior: 'smooth'
-            });
-          }
-          
-          setTimeout(() => {
-            this.checkScrollPositions();
-          }, 50);
-        }
-
-        this.dragVelocity = 0;
       },
       closeSidePanelAndNavigate(url) {
         this.sidePanelOpen = false;
@@ -823,13 +566,6 @@
       handleResize() {
         this.updateWindowWidth();
         this.updateToolbarWidth();
-        
-        if (this.resizeTimeout) {
-          clearTimeout(this.resizeTimeout);
-        }
-        this.resizeTimeout = setTimeout(() => {
-          this.centerActiveTab();
-        }, 1000);
       },
       updateWindowWidth() {
         this.windowWidth = window.innerWidth;
@@ -952,33 +688,19 @@
     list-style-type: none;
     white-space: nowrap;
     scrollbar-width: none;
-    scroll-behavior: smooth;
-    user-select: none;
-    will-change: transform;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &.is-dragging {
-      cursor: grabbing;
-      scroll-behavior: auto;
-      
-      * {
-        pointer-events: none;
-      }
-    }
+    scroll-behavior: auto;
+    transition: transform .6s cubic-bezier(.86, 0, .07, 1);
   }
-
   .sliding-indicator {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
+    
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
     pointer-events: none; 
     z-index: 1;
-  }
+}
 
   /* Side panel styles */
   .side-panel-header {

From f12165501773b5b06fd8a19623ea04121e9d82e0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 03:31:57 +0530
Subject: [PATCH 045/102] updated code for tabs

---
 .../shared/views/StudioNavigation.vue         | 182 +++---------------
 .../shared/views/StudioNavigationTab.vue      |  31 ++-
 2 files changed, 52 insertions(+), 161 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 3669052c07..1b271bc0bd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -8,17 +8,20 @@
       color: $themeTokens.text,
     }"
   >
-    <SkipNavigationLink />
+    
     <header>
+      <SkipNavigationLink />
       
       <KToolbar
-        ref="toolbar"
         type="clear"
-        :style="{
-          overflowX: 'hidden',  
-          backgroundColor: $themeTokens.appBar,
-          height: '56px',
-        }"
+        :style="[
+          {
+            overflowX: 'hidden',  
+            backgroundColor: $themeTokens.appBar,
+            height: '56px',
+          },
+          containerStyles
+        ]"
         :raised="false"
       >
         <template #icon>
@@ -59,10 +62,11 @@
             class="studio-navigation-actions"
           >
             <template v-if="loggedIn">
-              <KButton
-                appearance="flat-button"
-                style="text-transform: none"
-                :ariaLabel="$tr('userMenuLabel')"
+              <div
+                class="studio-navigation-menu"
+                role="button"
+                tabindex="0"
+                :aria-label="$tr('userMenuLabel')"
               >
                 <KIconButton
                   :disabled="true"
@@ -85,14 +89,14 @@
                   :hasIcons="true"
                   @select="handleUserMenuSelect"
                 />
-              </KButton>
+              </div>
             </template>
 
             <template v-else>
-              <KButton
-                appearance="flat-button"
-                style="text-transform: none"
-                :ariaLabel="$tr('guestMenuLabel')"
+              <div
+                class="studio-navigation-menu"
+                role="button"
+                :aria-label="$tr('guestMenuLabel')"
               >
                 <KIconButton
                   :disabled="true"
@@ -110,7 +114,7 @@
                   :hasIcons="true"
                   @select="handleGuestMenuSelect"
                 />
-              </KButton>
+              </div>
             </template>
           </div>
         </template>
@@ -125,42 +129,12 @@
         class="studio-navigation-tabs-wrapper"
         :style="tabsWrapperStyles"
       >
-        <div
-          v-if="isOverflowing && canScrollLeft"
-          class="scroll-button scroll-button-left"
-          :style="{ backgroundColor: $themeTokens.appBar }"
-          @click="scrollTabs(-350)"
-        >
-          <KIconButton
-            icon="chevronLeft"
-            :color="$themeTokens.text"
-            :ariaLabel="$tr('scrollLeft')"
-          />
-        </div>
-
         <div
           ref="tabsContainer"
           class="studio-navigation-tabs-container"
           :style="containerStyles"
         >
           <slot name="tabs"></slot>
-          <div
-            class="sliding-indicator"
-            :style="[indicatorStyle, { backgroundColor: $themeTokens.surface }]"
-          ></div>
-        </div>
-
-        <div
-          v-if="isOverflowing && canScrollRight"
-          class="scroll-button scroll-button-right"
-          :style="{ backgroundColor: $themeTokens.appBar }"
-          @click="scrollTabs(350)"
-        >
-          <KIconButton
-            icon="chevronRight"
-            :color="$themeTokens.text"
-            :ariaLabel="$tr('scrollRight')"
-          />
         </div>
       </div>
     </div>
@@ -326,14 +300,7 @@
         sidePanelOpen: false,
         showLanguageModal: false,
         windowWidth: 0,
-        isOverflowing: false,
-        canScrollLeft: false,
-        canScrollRight: false,
         toolbarWidth: 0,
-        indicatorStyle: {
-          width: '0px',
-          transform: 'translateX(0px)',
-        },
       };
     },
     
@@ -432,27 +399,10 @@
         };
       },
     },
-    watch: {
-      '$route'() {
-        this.$nextTick(() => {
-          this.moveIndicator();
-        });
-      },
-    },
     mounted() {
       this.updateWindowWidth();
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
-      window.addEventListener('resize', this.moveIndicator);
-      this.$nextTick(() => this.moveIndicator());
-      const el = this.$refs.tabsContainer;
-      if (el) {
-        el.addEventListener('scroll', this.checkScrollPositions);
-        this.checkScrollPositions();
-        
-        const resizeObserver = new ResizeObserver(this.checkScrollPositions);
-        resizeObserver.observe(el);
-      }
     },
     updated() {
       this.$nextTick(() => {
@@ -461,46 +411,13 @@
     },
     beforeDestroy() {
       window.removeEventListener('resize', this.handleResize);
-      window.removeEventListener('resize', this.moveIndicator);
     },
     methods: {
       ...mapActions(['logout']),
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
-      moveIndicator() {
-        const container = this.$refs.tabsContainer;
-        if (!container) return;
-        const activeTab = container.querySelector('.studio-navigation-tab-active');
-
-        if (activeTab) {
-          const containerRect = container.getBoundingClientRect();
-          const tabRect = activeTab.getBoundingClientRect();
-          const leftPosition = tabRect.left - containerRect.left + container.scrollLeft;
-
-          this.indicatorStyle = {
-            width: `${tabRect.width}px`,
-            transform: `translateX(${leftPosition}px)`,
-          };
-        }
-      },
-      checkScrollPositions() {
-        const el = this.$refs.tabsContainer;
-        if (!el) return;
-
-        this.isOverflowing = el.scrollWidth > el.clientWidth;
-        this.canScrollLeft = el.scrollLeft > 0;
 
-        const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= el.scrollWidth;
-        this.canScrollRight = !atEnd;
-      },
-      scrollTabs(distance) {
-        const container = this.$refs.tabsContainer;
-        if (container) {
-          const scrollDirection = this.$isRTL ? -distance : distance;
-          container.scrollBy({ left: scrollDirection, behavior: 'smooth' });
-        }
-      },
       closeSidePanelAndNavigate(url) {
         this.sidePanelOpen = false;
         window.location.href = url;
@@ -601,8 +518,6 @@
       logoutLink: 'Sign out',
       copyright: '© {year} Learning Equality',
       giveFeedback: 'Give feedback',
-      scrollLeft: 'Scroll tabs left',
-      scrollRight: 'Scroll tabs right',
     },
   };
 
@@ -620,22 +535,11 @@
   }
 
   .studio-navigation-logo-link {
-    display: flex;
-    align-items: center;
-    padding: 4px;
-    text-decoration: none;
     border-radius: 8px;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
-    }
   }
 
   .studio-navigation-title-container {
-    display: block;    
-    overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis;
     font-size: 20px;
     font-weight: 500;
     padding-inline-start: 20px;
@@ -654,30 +558,7 @@
     width: 100%;
   }
 
-  .scroll-button {
-    position: absolute;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    z-index: 5;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 0.2s ease;
   
-    
-    &-left {
-      left: 0;
-      padding-left: 16px;
-    }
-    
-    &-right {
-      right: 0;
-      padding-right: 16px;
-     
-    }
-  }
 
   .studio-navigation-tabs-container {
     position: relative;
@@ -689,18 +570,7 @@
     white-space: nowrap;
     scrollbar-width: none;
     scroll-behavior: auto;
-    transition: transform .6s cubic-bezier(.86, 0, .07, 1);
   }
-  .sliding-indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
-    pointer-events: none; 
-    z-index: 1;
-}
 
   /* Side panel styles */
   .side-panel-header {
@@ -753,5 +623,15 @@
     margin-bottom: 24px;
     font-size: 14px;
   }
+  .studio-navigation-menu {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index e29ae0a5a9..12000a1318 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -2,7 +2,6 @@
 
   <RouterLink
     v-if="to"
-    ref="tabElement"
     :to="to"
     :class="[
       tabClasses, 
@@ -12,21 +11,24 @@
       })
     ]"
     :style="tabStyles"
-    :aria-current="isActive ? 'page' : null"
+    :aria-current="isActive ? 'Navigation' : null"
     :tabindex="tabindex"
-    @click="$emit('click', $event)"
-    @keydown="$emit('keydown', $event)"
   >
     <span class="studio-navigation-tab-content">
       <slot></slot>
       <span
         v-if="showBadge"
         class="studio-navigation-tab-badge"
-        :aria-label="badgeAriaLabel"
       >
-        {{ badgeValue }}
+        {{ $formatNumber(badgeValue) }}
       </span>
     </span>
+    <span
+      v-if="isActive"
+      class="studio-navigation-tab-indicator"
+      :style="indicatorStyles"
+      aria-hidden="true"
+    ></span>
   </RouterLink>
 
 </template>
@@ -67,7 +69,11 @@
           color: this.$themeTokens.text,
         };
       },
-      
+      indicatorStyles() {
+        return {
+          backgroundColor: this.$themeTokens.surface,
+        };
+      },
       isActive() {
         if (!this.to || !this.$route) return false;
 
@@ -77,9 +83,6 @@
       showBadge() {
         return this.badgeValue > 0;
       },
-      badgeAriaLabel() {
-        return `${this.badgeValue} notification${this.badgeValue !== 1 ? 's' : ''}`;
-      },
     },
   };
 
@@ -143,4 +146,12 @@
     transition: 0.3s;
   }
 
+  .studio-navigation-tab-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+  }
+
 </style>
\ No newline at end of file

From 78c581c12f3bef031f3a3d0e06f268903dacd744 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 14:43:54 +0530
Subject: [PATCH 046/102] Updated menu styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 1b271bc0bd..aa9a93a369 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -64,8 +64,6 @@
             <template v-if="loggedIn">
               <div
                 class="studio-navigation-menu"
-                role="button"
-                tabindex="0"
                 :aria-label="$tr('userMenuLabel')"
               >
                 <KIconButton
@@ -95,7 +93,6 @@
             <template v-else>
               <div
                 class="studio-navigation-menu"
-                role="button"
                 :aria-label="$tr('guestMenuLabel')"
               >
                 <KIconButton

From 94788df5abe17c85fbe38412b1acce277bb48dd7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 15:49:46 +0530
Subject: [PATCH 047/102] Added StudioPanelOption.vue

---
 .../frontend/shared/views/SidePanelOption.vue | 111 +++++++++++++++++
 .../shared/views/StudioNavigation.vue         | 114 ++++++------------
 2 files changed, 147 insertions(+), 78 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue
new file mode 100644
index 0000000000..8738670f2c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue
@@ -0,0 +1,111 @@
+<template>
+
+  <div>
+    <a
+      ref="menuItem"
+      :href="link"
+      class="side-panel-option"
+      role="menuitem"
+      :class="$computedClass(optionStyle)"
+      tabindex="0"
+      @click="handleClick"
+      @keydown.enter="handleClick"
+    >
+      <slot>
+        <KIconButton
+          v-if="icon"
+          disabled="true"
+          :icon="icon"
+          :color="optionIconColor"
+        />
+        <span
+          v-if="label"
+          class="option-label"
+        >
+          {{ label }}
+        </span>
+      </slot>
+    </a>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SidePanelOption',
+    props: {
+      label: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      link: {
+        type: String,
+        default: null,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      optionStyle() {
+        return {
+          color: this.$themeTokens.text,
+          ':hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.048)',
+          },
+          ':focus': this.$coreOutline,
+        };
+      },
+      optionIconColor() {
+  
+        return this.$themeTokens.text;
+      }
+    },
+    methods: {
+      handleClick(event) {
+        // If no link, emit select event (for actions like logout, language modal)
+        if (!this.link) {
+          event.preventDefault();
+          this.$emit('select');
+        }
+        
+        // Emit click event for closing panel
+        this.$emit('click', event);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+@import '~kolibri-design-system/lib/styles/definitions';
+
+.side-panel-option {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  font-size: 16px;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: $radius;
+  outline-offset: -1px;
+  transition: background-color $core-time ease;
+
+  &:hover {
+    outline-offset: -1px;
+  }
+}
+
+.option-label {
+  flex: 1;
+  padding: 12px 0;
+}
+
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index aa9a93a369..f58a38d4a6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -156,72 +156,46 @@
       <template #default>
         <div class="side-panel-content">
           <nav class="side-panel-nav">
-            <div
-              class="side-panel-nav-item"
-              @click="navigateToChannels"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="home"
-              />
-              <span class="subheading">{{ $tr('channelsLink') }}</span>
-            </div>
+            <SidePanelOption
+              :label="$tr('channelsLink')"
+              :link="channelsLink"
+              icon="home"
+              @click="sidePanelOpen = false"
+            />
 
-            <div
+            <SidePanelOption
               v-if="user?.is_admin"
-              class="side-panel-nav-item"
-              @click="navigateToAdministration"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="people"
-              />
-              <span class="subheading">{{ $tr('administrationLink') }}</span>
-            </div>
+              :label="$tr('administrationLink')"
+              :link="administrationLink"
+              icon="people"
+              @click="sidePanelOpen = false"
+            />
 
-            <div
-              class="side-panel-nav-item"
-              @click="navigateToSettings"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="settings"
-              />
-              <span class="subheading">{{ $tr('settingsLink') }}</span>
-            </div>
+            <SidePanelOption
+              :label="$tr('settingsLink')"
+              :link="settingsLink"
+              icon="settings"
+              @click="sidePanelOpen = false"
+            />
 
-            <div
-              class="side-panel-nav-item"
-              @click="openLanguageModal"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="language"
-              />
-              <span class="subheading">{{ $tr('changeLanguage') }}</span>
-            </div>
+            <!-- Action buttons (no links) -->
+            <SidePanelOption
+              :label="$tr('changeLanguage')"
+              icon="language"
+              @select="openLanguageModal"
+            />
 
-            <div
-              class="side-panel-nav-item"
-              @click="navigateToHelp"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="openNewTab"
-              />
-              <span class="subheading">{{ $tr('helpLink') }}</span>
-            </div>
+            <SidePanelOption
+              :label="$tr('helpLink')"
+              icon="openNewTab"
+              @select="navigateToHelp"
+            />
 
-            <div
-              class="side-panel-nav-item"
-              @click="handleLogout"
-            >
-              <KIconButton
-                :disabled="true"
-                icon="logout"
-              />
-              <span class="subheading">{{ $tr('logoutLink') }}</span>
-            </div>
+            <SidePanelOption
+              :label="$tr('logoutLink')"
+              icon="logout"
+              @select="handleLogout"
+            />
           </nav>
 
           <div class="side-panel-footer">
@@ -241,14 +215,12 @@
               @click.native="sidePanelOpen = false"
             />
 
-            
             <KExternalLink
               href="https://community.learningequality.org/c/support/studio"
               openInNewTab
               :text="$tr('giveFeedback')"
               @click.native="sidePanelOpen = false"
             />
-          
           </div>
         </div>
       </template>
@@ -270,12 +242,14 @@
   import LanguageSwitcherModal from '../languageSwitcher/LanguageSwitcherModal.vue';
   import SidePanelModal from './SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
+  import SidePanelOption from './SidePanelOption.vue';
 
 
   export default {
     name: 'StudioNavigation',
     components: {
       SidePanelModal,
+      SidePanelOption,
       SkipNavigationLink,
       LanguageSwitcherModal,
     },
@@ -419,9 +393,6 @@
         this.sidePanelOpen = false;
         window.location.href = url;
       },
-      navigateToChannels() {
-        this.closeSidePanelAndNavigate(this.channelsLink);
-      },
       navigateToAdministration() {
         this.closeSidePanelAndNavigate(this.administrationLink);
       },
@@ -597,19 +568,6 @@
     padding: 8px 0;
   }
 
-  .side-panel-nav-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    width: 100%;
-    padding: 4px 16px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.048);
-    }
-  }
 
   .side-panel-footer {
     padding: 24px;

From 1f19b61d41437caa44defff9d446c89c74f2c553 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 16:39:47 +0530
Subject: [PATCH 048/102] Added StudioPanelOption.vue

---
 .../frontend/shared/views/StudioNavigation.vue            | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index f58a38d4a6..eddcaa4d77 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -270,7 +270,6 @@
       return {
         sidePanelOpen: false,
         showLanguageModal: false,
-        windowWidth: 0,
         toolbarWidth: 0,
       };
     },
@@ -449,12 +448,8 @@
         this.showLanguageModal = true;
       },
       handleResize() {
-        this.updateWindowWidth();
         this.updateToolbarWidth();
       },
-      updateWindowWidth() {
-        this.windowWidth = window.innerWidth;
-      },
       updateToolbarWidth() {
         this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
       },
@@ -579,9 +574,6 @@
     font-size: 14px;
   }
   .studio-navigation-menu {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
     cursor: pointer;
     transition: background-color 0.2s ease;
     &:hover {

From 8a0c2f5a0531407014ca5c397aea85144e8f19c1 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 17:20:26 +0530
Subject: [PATCH 049/102] Added StudioPanelOption.vue

---
 .../channelList/views/ChannelListIndex.vue    |  87 ++++-----
 .../shared/views/StudioNavigation.vue         | 165 +++++++++++++++---
 2 files changed, 192 insertions(+), 60 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index d9dc547e86..a4d3cbc17a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -27,41 +27,12 @@
         {{ isFAQPage ? $tr('frequentlyAskedQuestions') : $tr('libraryTitle') }}
       </VToolbarTitle>
     </VToolbar>
-    <StudioNavigation v-else>
-      <template
-        v-if="loggedIn"
-        #tabs
-      >
-        <StudioNavigationTab
-          v-for="listType in lists"
-          :key="listType.id"
-          :to="getChannelLink(listType)"
-          :badgeValue="invitationsByListCounts[listType]"
-          @click="trackTabClick(listType)"
-        >
-          {{ translateConstant(listType) }}
-        </StudioNavigationTab>
 
-        <StudioNavigationTab
-          :to="catalogLink"
-          @click="publicTabClick"
-        >
-          {{ $tr('catalog') }}
-        </StudioNavigationTab>
-        <StudioNavigationTab
-          :to="communityLibraryLink"
-          @click="communityLibraryTabClick"
-        >
-          {{ communityLibraryLabel$() }}
-        </StudioNavigationTab>
-        <StudioNavigationTab
-          :to="channelSetLink"
-          @click="channelSetsTabClick"
-        >
-          {{ $tr('channelSets') }}
-        </StudioNavigationTab>
-      </template>
-    </StudioNavigation>
+    <StudioNavigation 
+      v-else
+      :tabs="navigationTabs" 
+    />
+
     <VContent>
       <StudioOfflineAlert
         v-if="!isCatalogPage"
@@ -101,7 +72,6 @@
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
   import StudioNavigation from 'shared/views/StudioNavigation';
-  import StudioNavigationTab from 'shared/views/StudioNavigationTab';
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
@@ -125,7 +95,6 @@
     name: 'ChannelListIndex',
     components: {
       StudioNavigation,
-      StudioNavigationTab,
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
@@ -145,6 +114,45 @@
       }),
       ...mapGetters(['loggedIn']),
       ...mapGetters('channelList', ['invitations']),
+      
+      // NEW COMPUTED PROPERTY: Generates the tab data structure
+      navigationTabs() {
+        if (!this.loggedIn) return [];
+
+        const tabs = [];
+
+        // 1. Add Tabs for each Channel List Type (Editable, Starred, etc.)
+        this.lists.forEach(listType => {
+          tabs.push({
+            id: listType, // Unique ID for tracking
+            label: this.translateConstant(listType),
+            to: this.getChannelLink(listType),
+            badgeValue: this.invitationsByListCounts[listType] || 0,
+            analyticsLabel: ListTypeToAnalyticsLabel[listType] // Optional: pass data for tracking
+          });
+        });
+
+        // 2. Add Catalog Tab
+        tabs.push({
+          id: 'catalog',
+          label: this.$tr('catalog'),
+          to: this.catalogLink,
+          badgeValue: 0,
+          analyticsLabel: 'PUBLIC' // Reusing public analytics label logic if appropriate
+        });
+
+        // 3. Add Channel Sets Tab
+        tabs.push({
+          id: CHANNEL_SETS,
+          label: this.$tr('channelSets'),
+          to: this.channelSetLink,
+          badgeValue: 0,
+          analyticsLabel: 'CHANNEL_SETS'
+        });
+
+        return tabs;
+      },
+
       fullPageError() {
         return this.$store.state.errors.fullPageError;
       },
@@ -257,9 +265,10 @@
           this.updateTabTitle(title);
         }
       },
-      trackTabClick(list) {
-        this.$analytics.trackClick('channel_list', ListTypeToAnalyticsLabel[list]);
-      },
+      // Note: trackTabClick logic can now be moved into the StudioNavigation component
+      // if you emit an event, or handled via a watcher on the route.
+      // Since the links are standard router-links, analytics might need to 
+      // be triggered differently or passed down if you need specific click tracking.
     },
     $trs: {
       channelSets: 'Collections',
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index eddcaa4d77..766207d6ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -64,6 +64,11 @@
             <template v-if="loggedIn">
               <div
                 class="studio-navigation-menu"
+                :class="
+                  $computedClass({
+                    ':hover': { backgroundColor: $themePalette.grey.v_300 },
+                  })
+                "
                 :aria-label="$tr('userMenuLabel')"
               >
                 <KIconButton
@@ -118,8 +123,9 @@
       </KToolbar>
 
     </header>
+
     <div
-      v-if="hasTabs"
+      v-if="tabs && tabs.length"
       :aria-label="$tr('mainNavigationLabel')"
     >
       <div 
@@ -131,10 +137,40 @@
           class="studio-navigation-tabs-container"
           :style="containerStyles"
         >
-          <slot name="tabs"></slot>
+          <StudioNavigationTab
+            v-for="(tab) in tabs"
+            :key="tab.id"
+            ref="tabRefs"
+            :to="tab.to"
+            :badgeValue="tab.badgeValue"
+            class="studio-navigation-tab-item"
+          >
+            {{ tab.label }}
+          </StudioNavigationTab>
+        </div>
+
+        <div 
+          v-if="overflowMenuOptions.length > 0" 
+          class="overflow-menu-container"
+        >
+          <KIconButton
+            icon="optionsHorizontal"
+            :color="$themeTokens.text"
+            :tooltip="$tr('moreOptions')"
+            appearance="flat-button"
+          >
+            <template #menu>
+              <KDropdownMenu
+                :options="overflowMenuOptions"
+                @select="handleOverflowSelect"
+              />
+            </template>
+          </KIconButton>
         </div>
+
       </div>
     </div>
+
     <SidePanelModal
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
@@ -178,7 +214,6 @@
               @click="sidePanelOpen = false"
             />
 
-            <!-- Action buttons (no links) -->
             <SidePanelOption
               :label="$tr('changeLanguage')"
               icon="language"
@@ -243,6 +278,7 @@
   import SidePanelModal from './SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
   import SidePanelOption from './SidePanelOption.vue';
+  import StudioNavigationTab from './StudioNavigationTab.vue';
 
 
   export default {
@@ -252,6 +288,7 @@
       SidePanelOption,
       SkipNavigationLink,
       LanguageSwitcherModal,
+      StudioNavigationTab, // Ensure this component is imported
     },
     setup() {
       const { windowBreakpoint } = useKResponsiveWindow();
@@ -265,12 +302,21 @@
         required: false,
         default: null,
       },
+      // CHANGED: Tabs are now data props, not slots
+      tabs: {
+        type: Array,
+        default: () => [],
+        // Structure: [{ id: '1', label: 'Tab Name', to: {...}, badgeValue: 0 }]
+      },
     },
     data() {
       return {
         sidePanelOpen: false,
         showLanguageModal: false,
         toolbarWidth: 0,
+        // Overflow state
+        overflowMenuOptions: [],
+        resizeTimeout: null,
       };
     },
     
@@ -279,9 +325,6 @@
         user: state => state.session.currentUser,
       }),
       ...mapGetters(['loggedIn']),
-      hasTabs() {
-        return !!this.$slots.tabs;
-      },
       homeLink() {
         return window.Urls?.channels() || '/';
       },
@@ -365,14 +408,33 @@
       },
       tabsWrapperStyles() {
         return {
-          padding: this.windowBreakpoint <= 2 ? '0 48px' : '0',
+          // Adjust padding to accommodate the "More" button on smaller screens
+          padding: this.windowBreakpoint <= 2 ? '0 8px' : '0 24px',
         };
       },
     },
+    watch: {
+      // Recalculate overflow when window resizes or tabs data changes
+      windowBreakpoint() { 
+        this.debouncedCalculateOverflow(); 
+      },
+      tabs: {
+        handler() { 
+          this.$nextTick(() => {
+            this.calculateOverflow();
+          });
+        },
+        deep: true,
+      },
+    },
     mounted() {
-      this.updateWindowWidth();
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
+      
+      this.$nextTick(() => {
+        this.calculateOverflow();
+        this.moveIndicator();
+      });
     },
     updated() {
       this.$nextTick(() => {
@@ -384,6 +446,43 @@
     },
     methods: {
       ...mapActions(['logout']),
+      
+      /* --- OVERFLOW LOGIC --- */
+      calculateOverflow() {
+        const container = this.$refs.tabsContainer;
+        const tabComponents = this.$refs.tabRefs;
+
+        if (!container || !tabComponents || tabComponents.length === 0) return;
+
+        const hiddenLinks = [];
+        const containerTop = container.offsetTop;
+
+        this.tabs.forEach((tab, index) => {
+          const tabEl = tabComponents[index].$el;
+          if (!tabEl) return;
+
+          // LOGIC: If tab is pushed to next line (top > 10px relative to container), it is hidden
+          const isWrapped = (tabEl.offsetTop - containerTop) > 10;
+
+          if (isWrapped) {
+            hiddenLinks.push({
+              label: tab.label,
+              value: tab.to, // We store the route object
+              
+            });
+          }
+        });
+
+        this.overflowMenuOptions = hiddenLinks;
+      },
+
+      handleOverflowSelect(option) {
+        if (option && option.value) {
+          this.$router.push(option.value);
+        }
+      },
+
+      /* --- STANDARD METHODS --- */
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
@@ -449,6 +548,13 @@
       },
       handleResize() {
         this.updateToolbarWidth();
+        this.debouncedCalculateOverflow();
+      },
+      debouncedCalculateOverflow() {
+        if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+          this.calculateOverflow();
+        }, 100);
       },
       updateToolbarWidth() {
         this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
@@ -481,6 +587,7 @@
       logoutLink: 'Sign out',
       copyright: '© {year} Learning Equality',
       giveFeedback: 'Give feedback',
+      moreOptions: 'More options',
     },
   };
 
@@ -508,7 +615,6 @@
     padding-inline-start: 20px;
   }
 
-
   .studio-navigation-actions {
     display: flex;
     align-items: center;
@@ -519,20 +625,34 @@
     display: flex;
     align-items: center;
     width: 100%;
+    /* Enforce height so tabs don't jump around visibly before overflow calc */
+    height: 48px;
   }
 
-  
-
   .studio-navigation-tabs-container {
     position: relative;
     display: flex;
     flex: 1;
-    overflow-x: auto;
-    height: 48px;
-    list-style-type: none;
-    white-space: nowrap;
-    scrollbar-width: none;
-    scroll-behavior: auto;
+    /* KEY: Allow wrapping to push items down */
+    flex-wrap: wrap; 
+    /* KEY: Hide the pushed down items */
+    height: 48px; 
+    overflow: hidden; 
+  }
+
+  .studio-navigation-tab-item {
+    
+    flex: 0 0 auto; 
+  }
+
+  .overflow-menu-container {
+    flex: 0 0 auto;
+    padding-left: 8px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    background-color: inherit;
+    z-index: 2;
   }
 
   /* Side panel styles */
@@ -563,7 +683,6 @@
     padding: 8px 0;
   }
 
-
   .side-panel-footer {
     padding: 24px;
     text-align: left;
@@ -573,12 +692,16 @@
     margin-bottom: 24px;
     font-size: 14px;
   }
+
   .studio-navigation-menu {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: $radius;
     cursor: pointer;
     transition: background-color 0.2s ease;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-    }
+    
+   
   }
 
 </style>

From 999e2cef7bd15a672e0ee1a0996706b0db71b166 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 17:21:37 +0530
Subject: [PATCH 050/102] Added StudioPanelOption.vue

---
 .../frontend/shared/views/StudioNavigation.vue           | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 766207d6ac..ed44df1401 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -64,11 +64,6 @@
             <template v-if="loggedIn">
               <div
                 class="studio-navigation-menu"
-                :class="
-                  $computedClass({
-                    ':hover': { backgroundColor: $themePalette.grey.v_300 },
-                  })
-                "
                 :aria-label="$tr('userMenuLabel')"
               >
                 <KIconButton
@@ -701,7 +696,9 @@
     cursor: pointer;
     transition: background-color 0.2s ease;
     
-   
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
   }
 
 </style>

From 133c4fb7bd9de65285eb4b3f54b483da50d64594 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 17:29:53 +0530
Subject: [PATCH 051/102] Added StudioPanelOption.vue

---
 .../frontend/shared/views/StudioNavigation.vue        | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index ed44df1401..3bbc2ed1b7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -297,7 +297,6 @@
         required: false,
         default: null,
       },
-      // CHANGED: Tabs are now data props, not slots
       tabs: {
         type: Array,
         default: () => [],
@@ -403,8 +402,7 @@
       },
       tabsWrapperStyles() {
         return {
-          // Adjust padding to accommodate the "More" button on smaller screens
-          padding: this.windowBreakpoint <= 2 ? '0 8px' : '0 24px',
+          padding: this.windowBreakpoint <= 2 ? '0 8px' :0,
         };
       },
     },
@@ -428,7 +426,7 @@
       
       this.$nextTick(() => {
         this.calculateOverflow();
-        this.moveIndicator();
+  
       });
     },
     updated() {
@@ -620,7 +618,6 @@
     display: flex;
     align-items: center;
     width: 100%;
-    /* Enforce height so tabs don't jump around visibly before overflow calc */
     height: 48px;
   }
 
@@ -628,9 +625,9 @@
     position: relative;
     display: flex;
     flex: 1;
-    /* KEY: Allow wrapping to push items down */
+
     flex-wrap: wrap; 
-    /* KEY: Hide the pushed down items */
+
     height: 48px; 
     overflow: hidden; 
   }

From b88c03e9bfebfca8c3bbc6a4c2dcc8771a0aab2f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 19:46:14 +0530
Subject: [PATCH 052/102] Updated styles

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 3bbc2ed1b7..94782cbf54 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -36,6 +36,7 @@
             v-else
             :href="homeLink"
             class="studio-navigation-logo-link"
+            style="padding-top: 8px"
           >
             <KLogo
               altText="Kolibri Logo with background"

From ad11ae92721dd581ac86371d65157b714cedbc48 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 19:54:33 +0530
Subject: [PATCH 053/102] Updated the skipnavigationlink functionality

---
 .../frontend/channelList/views/ChannelListIndex.vue           | 3 +++
 .../frontend/shared/views/StudioNavigation.vue                | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index a4d3cbc17a..760da51052 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -39,6 +39,9 @@
         :offset="toolbarHeight"
       />
       <VContainer
+        id="main"
+        role="main"
+        tabindex="-1"
         fluid
         class="main-container pa-0"
         :style="`height: calc(100vh - ${contentOffset}px); margin-top: ${offline ? 48 : 0}px;`"
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 94782cbf54..896d741879 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -8,9 +8,9 @@
       color: $themeTokens.text,
     }"
   >
-    
+    <SkipNavigationLink />
     <header>
-      <SkipNavigationLink />
+      
       
       <KToolbar
         type="clear"

From b452b663ccd4d671a6b80e2ccd36aa0f777a3e2f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 20:06:25 +0530
Subject: [PATCH 054/102] Removed the padding added to the sie panle modal and
 rather added that where modal is used

---
 .../channelEdit/components/sidePanels/PublishSidePanel.vue  | 6 ++++--
 .../frontend/shared/views/SidePanelModal/index.vue          | 1 -
 .../frontend/shared/views/StudioNavigation.vue              | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index 92c0ffaa39..9372bb374c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -12,8 +12,10 @@
       </template>
 
       <template #default>
-        <div>
-          <component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
+        <div
+          style="padding: 24px 32px 16px;"
+        >
+        <component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
             <KRadioButton
               v-if="showDraftMode"
               :label="modeLive$()"
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
index 58c89f3fe0..b1c8e03224 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -260,7 +260,6 @@
 
     .side-panel-content {
       flex-grow: 1;
-      padding: 24px 32px 16px;
       overflow-x: hidden;
       overflow-y: auto;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 896d741879..ea84901016 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -284,7 +284,7 @@
       SidePanelOption,
       SkipNavigationLink,
       LanguageSwitcherModal,
-      StudioNavigationTab, // Ensure this component is imported
+      StudioNavigationTab,
     },
     setup() {
       const { windowBreakpoint } = useKResponsiveWindow();

From 93f8eab236e47c0fdaf1131b41907bbfefdc196e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 21:56:16 +0530
Subject: [PATCH 055/102] updatedstyles

---
 .../sidePanels/SubmitToCommunityLibrarySidePanel/index.vue       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index de0c086a1e..76f79117b0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -631,6 +631,7 @@
   .content {
     display: flex;
     flex-direction: column;
+    padding: 24px 32px 16px;
     gap: 16px;
     margin-top: -24px;
     line-height: 140%;

From ce24b5b3fced853aca0a3b1453d78e123a36deb0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 22:24:12 +0530
Subject: [PATCH 056/102] updatedstyles

---
 .../channelList/views/Channel/CatalogFilters.vue         | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 7b6cb7d0e7..0719aab921 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -21,7 +21,12 @@
       alignment="left"
       @closePanel="closeSidePanel"
     >
-      <CatalogFilterPanelContent />
+      <div
+        style="padding: 24px 32px 16px;"
+      >
+        <CatalogFilterPanelContent />
+      </div>
+      
     </SidePanelModal>
   </div>
 
@@ -82,6 +87,8 @@
   .catalog-filters-wrapper {
     width: 100%;
     height: 100%;
+    
+    
   }
 
   .filter-button {

From 016b543ec10cff8d64d83521c4006a23b941948b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 22:51:50 +0530
Subject: [PATCH 057/102] Updated Catalogfiltercontent to handle padding wihout
 sidepanelmodal

---
 .../views/Channel/CatalogFilters.vue          |  6 +-----
 .../components/CatalogFilterPanelContent.vue  | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 0719aab921..ddaf9c9651 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -21,11 +21,7 @@
       alignment="left"
       @closePanel="closeSidePanel"
     >
-      <div
-        style="padding: 24px 32px 16px;"
-      >
-        <CatalogFilterPanelContent />
-      </div>
+      <CatalogFilterPanelContent />
       
     </SidePanelModal>
   </div>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
index 42aec33faa..6960a15a92 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div class="filter-panel-content">
+  <div 
+    class="filter-panel-content"
+    :style="contentStyles"
+  >
     <div class="filters-container">
       <!-- Keyword search -->
       <KTextbox
@@ -99,6 +102,7 @@
 
   import { mapGetters } from 'vuex';
   import debounce from 'lodash/debounce';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../../constants';
   import { catalogFilterMixin } from '../mixins';
   import LanguageFilter from './LanguageFilter.vue';
@@ -106,6 +110,7 @@
   import { constantsTranslationMixin } from 'shared/mixins';
   import HelpTooltip from 'shared/views/HelpTooltip';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+  
 
   const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
 
@@ -117,6 +122,12 @@
       MultiSelect,
     },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
 
     data() {
       return {
@@ -154,6 +165,14 @@
       setKeywords() {
         return debounce(this.updateKeywords, 500);
       },
+      contentStyles() {
+        if (this.windowIsSmall) {
+          return {
+            padding: '24px 32px 16px',
+          };
+        }
+        return {};
+      },
     },
     watch: {
       keywords() {

From 608315f53179d52d9ab3891ad8bc4f3a40ed2256 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 23:01:34 +0530
Subject: [PATCH 058/102] Updated boolean

---
 .../frontend/shared/views/StudioNavigation.vue     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index ea84901016..01f1fc34b6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -68,7 +68,7 @@
                 :aria-label="$tr('userMenuLabel')"
               >
                 <KIconButton
-                  :disabled="true"
+                  :disabled=true
                   icon="person"
                   color="black"
                 />
@@ -78,14 +78,14 @@
                   {{ user.first_name }}
                 </span>
                 <KIconButton
-                  :disabled="true"
+                  :disabled=true
                   icon="dropdown"
                   color="black"
                 />
 
                 <KDropdownMenu
                   :options="userMenuItems"
-                  :hasIcons="true"
+                  :hasIcons=true
                   @select="handleUserMenuSelect"
                 />
               </div>
@@ -97,19 +97,19 @@
                 :aria-label="$tr('guestMenuLabel')"
               >
                 <KIconButton
-                  :disabled="true"
+                  :disabled=true
                   icon="person"
                   color="black"
                 />
                 <KIconButton
-                  :disabled="true"
+                  :disabled=true
                   icon="dropdown"
                   color="black"
                 />
 
                 <KDropdownMenu
                   :options="guestMenuItems"
-                  :hasIcons="true"
+                  :hasIcons=true
                   @select="handleGuestMenuSelect"
                 />
               </div>
@@ -233,7 +233,7 @@
             <div>
               <KLogo
                 altText="Kolibri logo"
-                :showBackground="true"
+                :showBackground=true
                 :size="88"
               />
             </div>

From 6798275a3006c7987f88a3635b69c959c7617861 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 23:27:48 +0530
Subject: [PATCH 059/102] Updated the tabtrack method to studionavigation

---
 .../channelList/views/ChannelListIndex.vue    | 13 ++----
 .../shared/views/StudioNavigation.vue         | 46 +++++++++----------
 ...lOption.vue => StudioNavigationOption.vue} |  9 ++--
 3 files changed, 29 insertions(+), 39 deletions(-)
 rename contentcuration/contentcuration/frontend/shared/views/{SidePanelOption.vue => StudioNavigationOption.vue} (88%)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 760da51052..4214208a96 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -118,16 +118,14 @@
       ...mapGetters(['loggedIn']),
       ...mapGetters('channelList', ['invitations']),
       
-      // NEW COMPUTED PROPERTY: Generates the tab data structure
       navigationTabs() {
         if (!this.loggedIn) return [];
 
         const tabs = [];
 
-        // 1. Add Tabs for each Channel List Type (Editable, Starred, etc.)
         this.lists.forEach(listType => {
           tabs.push({
-            id: listType, // Unique ID for tracking
+            id: listType, 
             label: this.translateConstant(listType),
             to: this.getChannelLink(listType),
             badgeValue: this.invitationsByListCounts[listType] || 0,
@@ -135,16 +133,14 @@
           });
         });
 
-        // 2. Add Catalog Tab
         tabs.push({
           id: 'catalog',
           label: this.$tr('catalog'),
           to: this.catalogLink,
           badgeValue: 0,
-          analyticsLabel: 'PUBLIC' // Reusing public analytics label logic if appropriate
+          analyticsLabel: 'PUBLIC' 
         });
 
-        // 3. Add Channel Sets Tab
         tabs.push({
           id: CHANNEL_SETS,
           label: this.$tr('channelSets'),
@@ -268,10 +264,7 @@
           this.updateTabTitle(title);
         }
       },
-      // Note: trackTabClick logic can now be moved into the StudioNavigation component
-      // if you emit an event, or handled via a watcher on the route.
-      // Since the links are standard router-links, analytics might need to 
-      // be triggered differently or passed down if you need specific click tracking.
+
     },
     $trs: {
       channelSets: 'Collections',
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 01f1fc34b6..fc42b6a53a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -140,6 +140,7 @@
             :to="tab.to"
             :badgeValue="tab.badgeValue"
             class="studio-navigation-tab-item"
+            @click.native="handleTrackClick(tab)"
           >
             {{ tab.label }}
           </StudioNavigationTab>
@@ -188,14 +189,14 @@
       <template #default>
         <div class="side-panel-content">
           <nav class="side-panel-nav">
-            <SidePanelOption
+            <StudioNavigationOption
               :label="$tr('channelsLink')"
               :link="channelsLink"
               icon="home"
               @click="sidePanelOpen = false"
             />
 
-            <SidePanelOption
+            <StudioNavigationOption
               v-if="user?.is_admin"
               :label="$tr('administrationLink')"
               :link="administrationLink"
@@ -203,26 +204,26 @@
               @click="sidePanelOpen = false"
             />
 
-            <SidePanelOption
+            <StudioNavigationOption
               :label="$tr('settingsLink')"
               :link="settingsLink"
               icon="settings"
               @click="sidePanelOpen = false"
             />
 
-            <SidePanelOption
+            <StudioNavigationOption
               :label="$tr('changeLanguage')"
               icon="language"
               @select="openLanguageModal"
             />
 
-            <SidePanelOption
+            <StudioNavigationOption
               :label="$tr('helpLink')"
               icon="openNewTab"
               @select="navigateToHelp"
             />
 
-            <SidePanelOption
+            <StudioNavigationOption
               :label="$tr('logoutLink')"
               icon="logout"
               @select="handleLogout"
@@ -273,7 +274,7 @@
   import LanguageSwitcherModal from '../languageSwitcher/LanguageSwitcherModal.vue';
   import SidePanelModal from './SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
-  import SidePanelOption from './SidePanelOption.vue';
+  import StudioNavigationOption from './StudioNavigationOption.vue';
   import StudioNavigationTab from './StudioNavigationTab.vue';
 
 
@@ -281,7 +282,7 @@
     name: 'StudioNavigation',
     components: {
       SidePanelModal,
-      SidePanelOption,
+      StudioNavigationOption,
       SkipNavigationLink,
       LanguageSwitcherModal,
       StudioNavigationTab,
@@ -309,7 +310,6 @@
         sidePanelOpen: false,
         showLanguageModal: false,
         toolbarWidth: 0,
-        // Overflow state
         overflowMenuOptions: [],
         resizeTimeout: null,
       };
@@ -408,7 +408,6 @@
       },
     },
     watch: {
-      // Recalculate overflow when window resizes or tabs data changes
       windowBreakpoint() { 
         this.debouncedCalculateOverflow(); 
       },
@@ -440,8 +439,7 @@
     },
     methods: {
       ...mapActions(['logout']),
-      
-      /* --- OVERFLOW LOGIC --- */
+    
       calculateOverflow() {
         const container = this.$refs.tabsContainer;
         const tabComponents = this.$refs.tabRefs;
@@ -454,14 +452,12 @@
         this.tabs.forEach((tab, index) => {
           const tabEl = tabComponents[index].$el;
           if (!tabEl) return;
-
-          // LOGIC: If tab is pushed to next line (top > 10px relative to container), it is hidden
           const isWrapped = (tabEl.offsetTop - containerTop) > 10;
 
           if (isWrapped) {
             hiddenLinks.push({
               label: tab.label,
-              value: tab.to, // We store the route object
+              value: tab.to, 
               
             });
           }
@@ -473,10 +469,15 @@
       handleOverflowSelect(option) {
         if (option && option.value) {
           this.$router.push(option.value);
+          const originalTab = this.tabs.find(t => {
+            return option.label.startsWith(t.label);
+          });
+          
+          if (originalTab) {
+            this.handleTrackClick(originalTab);
+          }
         }
       },
-
-      /* --- STANDARD METHODS --- */
       toggleSidePanel() {
         this.sidePanelOpen = !this.sidePanelOpen;
       },
@@ -553,6 +554,11 @@
       updateToolbarWidth() {
         this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
       },
+      handleTrackClick(tab) {
+        if (this.$analytics && tab.analyticsLabel) {
+          this.$analytics.trackClick('channel_list', tab.analyticsLabel);
+        }
+      },
       truncateText(value, maxLength) {
         if (value && value.length > maxLength) {
           return value.substring(0, maxLength) + '...';
@@ -647,8 +653,6 @@
     background-color: inherit;
     z-index: 2;
   }
-
-  /* Side panel styles */
   .side-panel-header {
     display: flex;
     align-items: center;
@@ -667,10 +671,6 @@
     flex-direction: column;
     height: 100%;
   }
-  
-  ::v-deep .side-panel-content {
-    padding: 0 !important;
-  }
 
   .side-panel-nav {
     padding: 8px 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
similarity index 88%
rename from contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue
rename to contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
index 8738670f2c..457e399aba 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
@@ -4,7 +4,7 @@
     <a
       ref="menuItem"
       :href="link"
-      class="side-panel-option"
+      class="studio-navigation-option"
       role="menuitem"
       :class="$computedClass(optionStyle)"
       tabindex="0"
@@ -34,7 +34,7 @@
 <script>
 
   export default {
-    name: 'SidePanelOption',
+    name: 'StudioNavigationOption',
     props: {
       label: {
         type: String,
@@ -67,13 +67,10 @@
     },
     methods: {
       handleClick(event) {
-        // If no link, emit select event (for actions like logout, language modal)
         if (!this.link) {
           event.preventDefault();
           this.$emit('select');
         }
-        
-        // Emit click event for closing panel
         this.$emit('click', event);
       },
     },
@@ -86,7 +83,7 @@
 
 @import '~kolibri-design-system/lib/styles/definitions';
 
-.side-panel-option {
+.studio-navigation-option {
   display: flex;
   align-items: center;
   gap: 16px;

From 7bf1b56b0b4862aae49d062c52b60c43d01c2bbb Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 23:30:02 +0530
Subject: [PATCH 060/102] Updated the tabtrack method to studionavigation

---
 .../frontend/channelList/views/ChannelListIndex.vue             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 4214208a96..9cceae1274 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -129,7 +129,7 @@
             label: this.translateConstant(listType),
             to: this.getChannelLink(listType),
             badgeValue: this.invitationsByListCounts[listType] || 0,
-            analyticsLabel: ListTypeToAnalyticsLabel[listType] // Optional: pass data for tracking
+            analyticsLabel: ListTypeToAnalyticsLabel[listType] 
           });
         });
 

From 1e743f94528b1c0cdc46f98a2aea78e1507d74ef Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 01:02:58 +0530
Subject: [PATCH 061/102] finalising

---
 .../frontend/shared/views/SidePanelModal/index.vue | 14 +++++++++++++-
 .../frontend/shared/views/StudioNavigation.vue     |  3 ++-
 .../shared/views/StudioNavigationOption.vue        |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
index b1c8e03224..a190bfded0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -26,7 +26,7 @@
             <div
               class="header-content"
               :style="{
-                flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
+                flexDirection: headerFlexDirection, 
               }"
             >
               <div style="overflow: hidden">
@@ -104,6 +104,13 @@
           return ['close', 'back'].includes(value);
         },
       },
+      closeButtonPosition: {
+        type: String,
+        required: false,
+        default: null,
+        validator: value => ['left', 'right'].includes(value),
+      },
+      
       /* Optionally override the default width of the side panel with valid CSS value */
       sidePanelWidth: {
         type: String,
@@ -156,6 +163,11 @@
           [this.rtlAlignment]: 0,
         };
       },
+      headerFlexDirection() {
+        if (this.closeButtonPosition === 'left') return 'row-reverse';
+        if (this.closeButtonPosition === 'right') return 'row';
+        return this.closeButtonIconType === 'close' ? 'row' : 'row-reverse';
+      },
       responsiveWidth() {
         if (this.fixedWidth) {
           return this.sidePanelWidth;
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index fc42b6a53a..88d4ae9274 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -173,7 +173,8 @@
       alignment="left"
       sidePanelWidth="300px"
       :aria-label="$tr('navigationMenu')"
-      closeButtonIconType="clear"
+      closeButtonIconType="close"
+      closeButtonPosition="left"
       immersive
       fixedWidth
       @closePanel="sidePanelOpen = false"
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
index 457e399aba..f89153bbfc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
@@ -14,7 +14,7 @@
       <slot>
         <KIconButton
           v-if="icon"
-          disabled="true"
+          :disabled=true
           :icon="icon"
           :color="optionIconColor"
         />

From b4c9a748992129f4633a7a8e004aeed93f41f629 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 02:41:41 +0530
Subject: [PATCH 062/102] Test file updated

---
 .../shared/views/StudioNavigation.vue         |   8 +-
 .../views/__tests__/StudioNavigation.spec.js  | 184 ++++++++++++++++++
 .../__tests__/StudioNavigationTab.spec.js     |   0
 3 files changed, 189 insertions(+), 3 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 88d4ae9274..91a54cf8c4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -73,7 +73,7 @@
                   color="black"
                 />
                 <span
-                  class="mx-2 subheading"
+                  class="mx-2 notranslate subheading"
                 >
                   {{ user.first_name }}
                 </span>
@@ -198,7 +198,7 @@
             />
 
             <StudioNavigationOption
-              v-if="user?.is_admin"
+              v-if="user && user.is_admin"
               :label="$tr('administrationLink')"
               :link="administrationLink"
               icon="people"
@@ -341,7 +341,9 @@
       },
       truncatedTitle() {
         const displayTitle = this.title || this.$tr('title');
-        const offset = (this.$refs.studioNavigationActions?.clientWidth || 0) + 100;
+        const actionsEl = this.$refs.studioNavigationActions;
+        const actionsWidth = actionsEl ? actionsEl.clientWidth : 0;
+        const offset = actionsWidth + 100;
         const averageCharWidth = 10;
         const availableWidth = this.toolbarWidth - offset;
         const maxChars = availableWidth > 0 ? Math.floor(availableWidth / averageCharWidth) : 1;
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
new file mode 100644
index 0000000000..7ac82e604c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -0,0 +1,184 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import StudioNavigation from 'shared/views/StudioNavigation.vue';
+
+// 1. Mock Global Objects
+window.Urls = {
+  channels: () => '/channels/',
+  administration: () => '/administration/',
+  settings: () => '/settings/',
+};
+
+// 2. Mock Responsive Window
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => ({
+  __esModule: true,
+  default: () => ({ windowBreakpoint: 4 }),
+}));
+
+// 3. Mock Layout (Fixes title truncation logic)
+Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+  configurable: true,
+  get() { return 1000; },
+});
+
+const createRouter = () => {
+  return new VueRouter({
+    mode: 'abstract',
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div />' } },
+      { path: '/channels', name: 'channels', component: { template: '<div />' } },
+      { path: '/settings', name: 'settings', component: { template: '<div />' } },
+      { path: '/administration', name: 'administration', component: { template: '<div />' } },
+    ],
+  });
+};
+
+function makeWrapper({ 
+  props = {}, 
+  loggedIn = true, 
+  isAdmin = false, 
+  user = { first_name: 'TestUser', is_admin: isAdmin } 
+} = {}) {
+  const router = createRouter();
+
+  return render(StudioNavigation, {
+    props: {
+      title: 'Test Studio',
+      tabs: [],
+      ...props,
+    },
+    routes: router,
+    router,
+    mocks: {
+      $store: {
+        state: { session: { currentUser: user } },
+        getters: { loggedIn: () => loggedIn },
+      },
+      // Translation Mock: Returns real text so we can assert exact matches
+      $tr: (key) => {
+        const map = {
+          copyright: '© 2025 Learning Equality',
+          giveFeedback: 'Give feedback',
+          logIn: 'Sign in',
+          settings: 'Settings',
+          changeLanguage: 'Change language',
+          help: 'Help and support',
+          logOut: 'Sign out',
+          administration: 'Administration',
+          settingsLink: 'Settings',
+          openMenu: 'openMenu',
+          closePanel: 'closePanel'
+        };
+        return map[key] || key;
+      },
+      $themeTokens: { appBar: 'white', text: 'black' },
+      $analytics: { trackClick: jest.fn() },
+      $computedClass: () => {},
+      $formatNumber: (n) => n,
+    },
+    
+  });
+}
+
+describe('StudioNavigation', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    jest.clearAllMocks();
+  });
+
+  describe('General Rendering', () => {
+    it('renders the title provided in props', () => {
+      makeWrapper({ props: { title: 'My Custom Title' } });
+      expect(screen.getByText('My Custom Title')).toBeInTheDocument();
+    });
+
+    it('renders the hamburger menu when logged in', () => {
+      makeWrapper({ loggedIn: true });
+      expect(screen.getByLabelText('openMenu')).toBeInTheDocument();
+    });
+
+    it('renders the logo instead of hamburger when logged out', () => {
+      makeWrapper({ loggedIn: false });
+      expect(screen.queryByLabelText('openMenu')).not.toBeInTheDocument();
+      expect(screen.getByAltText('Kolibri Logo')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Menu (Dropdown)', () => {
+    it('shows correct options for a Logged In User', () => {
+      makeWrapper({ loggedIn: true, isAdmin: false });
+      
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+      expect(screen.getByText('Change language')).toBeInTheDocument();
+      expect(screen.getByText('Help and support')).toBeInTheDocument();
+      expect(screen.getByText('Sign out')).toBeInTheDocument();
+      
+      // Admin link should NOT be present
+      expect(screen.queryByText('Administration')).not.toBeInTheDocument();
+    });
+
+    it('shows correct options for an Admin User', () => {
+      makeWrapper({ loggedIn: true, isAdmin: true });
+      expect(screen.getByText('Administration')).toBeInTheDocument();
+    });
+
+    it('shows correct options for a Guest (Logged Out)', () => {
+      makeWrapper({ loggedIn: false });
+      expect(screen.getByText('Sign in')).toBeInTheDocument();
+      expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Side Panel', () => {
+    it('opens and closes the side panel (Toggle Test)', async () => {
+      makeWrapper({ loggedIn: true });
+
+      // 1. Initially Closed
+      expect(screen.queryByTestId('side-panel')).not.toBeInTheDocument();
+
+      // 2. Open: Click Hamburger
+      const hamburger = screen.getByLabelText('openMenu');
+      await user.click(hamburger);
+      expect(screen.getByTestId('side-panel')).toBeInTheDocument();
+
+      // 3. Close: Click the close button
+      const closeButton = screen.getByLabelText('closePanel');
+      await user.click(closeButton);
+      
+      // 4. Assert Closed
+      expect(screen.queryByTestId('side-panel')).not.toBeInTheDocument();
+    });
+
+    it('closes the side panel when a navigation link is clicked', async () => {
+      makeWrapper({ loggedIn: true });
+      
+      // Open Panel
+      await user.click(screen.getByLabelText('openMenu'));
+      expect(screen.getByTestId('side-panel')).toBeInTheDocument();
+
+      // Click a link (e.g., Settings)
+      await user.click(screen.getByText('Settings'));
+
+      // Assert Closed
+      expect(screen.queryByTestId('side-panel')).not.toBeInTheDocument();
+    });
+
+    it('renders the footer links correctly', async () => {
+      makeWrapper({ loggedIn: true });
+      await user.click(screen.getByLabelText('openMenu'));
+
+      // Copyright
+      const copyright = screen.getByText('© 2025 Learning Equality');
+      expect(copyright).toBeInTheDocument();
+      expect(copyright).toHaveAttribute('href', 'https://learningequality.org/');
+
+      // Feedback
+      const feedback = screen.getByText('Give feedback');
+      expect(feedback).toBeInTheDocument();
+      expect(feedback).toHaveAttribute('href', 'https://community.learningequality.org/c/support/studio');
+    });
+  });
+});
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
new file mode 100644
index 0000000000..e69de29bb2

From f480ccd766ab4b44cc95cbd709dc31f01b9ab861 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 12:42:53 +0530
Subject: [PATCH 063/102] Test file created

---
 .../shared/views/StudioNavigation.vue         |  14 +-
 .../views/__tests__/StudioNavigation.spec.js  | 455 +++++++++++++-----
 .../__tests__/StudioNavigationTab.spec.js     | 137 ++++++
 3 files changed, 476 insertions(+), 130 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 91a54cf8c4..78a15bd510 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -63,9 +63,10 @@
             class="studio-navigation-actions"
           >
             <template v-if="loggedIn">
-              <div
+              <button
                 class="studio-navigation-menu"
                 :aria-label="$tr('userMenuLabel')"
+                type="button"
               >
                 <KIconButton
                   :disabled=true
@@ -88,13 +89,14 @@
                   :hasIcons=true
                   @select="handleUserMenuSelect"
                 />
-              </div>
+              </button>
             </template>
 
             <template v-else>
-              <div
+              <button
                 class="studio-navigation-menu"
                 :aria-label="$tr('guestMenuLabel')"
+                type="button" 
               >
                 <KIconButton
                   :disabled=true
@@ -112,7 +114,7 @@
                   :hasIcons=true
                   @select="handleGuestMenuSelect"
                 />
-              </div>
+              </button>
             </template>
           </div>
         </template>
@@ -508,7 +510,9 @@
       handleUserMenuSelect(item) {
         switch (item.value) {
           case 'administration':
-            this.navigateToAdministration();
+            if (this.user && this.user.is_admin) {
+              this.navigateToAdministration();
+            }
             break;
           case 'settings':
             this.navigateToSettings();
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
index 7ac82e604c..fdeca33a65 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -1,85 +1,124 @@
-import { render, screen } from '@testing-library/vue';
+import { render, screen,within, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex, { Store } from 'vuex';
 import VueRouter from 'vue-router';
-import StudioNavigation from 'shared/views/StudioNavigation.vue';
+import StudioNavigation from '../StudioNavigation.vue';
+
 
-// 1. Mock Global Objects
-window.Urls = {
-  channels: () => '/channels/',
-  administration: () => '/administration/',
-  settings: () => '/settings/',
-};
 
-// 2. Mock Responsive Window
-jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => ({
-  __esModule: true,
-  default: () => ({ windowBreakpoint: 4 }),
-}));
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+// Mock window properties
+const mockUrls = {
+  channels: jest.fn(() => '/channels'),
+  administration: jest.fn(() => '/administration'),
+  settings: jest.fn(() => '/settings'),
+};
 
-// 3. Mock Layout (Fixes title truncation logic)
-Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-  configurable: true,
-  get() { return 1000; },
+Object.defineProperty(window, 'Urls', {
+  value: mockUrls,
+  writable: true,
 });
 
+global.open = jest.fn();
+
+const originalLocation = window.location;
+const mockAnalytics = {
+  trackClick: jest.fn(),
+  trackEvent: jest.fn(),
+};
+
+const createMockStore = (options = {}) => {
+  return new Store({
+    state: {
+      session: {
+        currentUser: options.user || null,
+      },
+    },
+    getters: {
+      loggedIn: (state) => !!state.session.currentUser,
+    },
+    actions: {
+      logout: jest.fn(() => Promise.resolve()),
+    },
+  });
+};
+
 const createRouter = () => {
   return new VueRouter({
     mode: 'abstract',
     routes: [
-      { path: '/', name: 'home', component: { template: '<div />' } },
-      { path: '/channels', name: 'channels', component: { template: '<div />' } },
-      { path: '/settings', name: 'settings', component: { template: '<div />' } },
-      { path: '/administration', name: 'administration', component: { template: '<div />' } },
+      {
+        path: '/channels',
+        name: 'channels',
+        component: { template: '<div>Channels</div>' },
+      },
+      {
+        path: '/administration',
+        name: 'administration',
+        component: { template: '<div>Administration</div>' },
+      },
+      {
+        path: '/settings',
+        name: 'settings',
+        component: { template: '<div>Settings</div>' },
+      },
     ],
   });
 };
 
-function makeWrapper({ 
-  props = {}, 
-  loggedIn = true, 
-  isAdmin = false, 
-  user = { first_name: 'TestUser', is_admin: isAdmin } 
-} = {}) {
+const renderComponent = async (options = {}) => {
+  const store = options.store || createMockStore({ user: null });
   const router = createRouter();
 
-  return render(StudioNavigation, {
-    props: {
-      title: 'Test Studio',
-      tabs: [],
-      ...props,
-    },
-    routes: router,
+  const props = options.props || {};
+  const mocks = {
+    $analytics: mockAnalytics,
+    $tr: jest.fn((key, params) => {
+      const translations = {
+        'title': 'Kolibri Studio',
+        'openMenu': 'Open navigation menu',
+        'navigationMenu': 'Navigation menu',
+        'mainNavigationLabel': 'Main navigation',
+        'userMenuLabel': 'User menu',
+        'guestMenuLabel': 'Guest menu',
+        'administration': 'Administration',
+        'changeLanguage': 'Change language',
+        'settings': 'Settings',
+        'help': 'Help and support',
+        'logIn': 'Sign in',
+        'logOut': 'Sign out',
+        'channelsLink': 'Channels',
+        'administrationLink': 'Administration',
+        'settingsLink': 'Settings',
+        'helpLink': 'Help and support',
+        'logoutLink': 'Sign out',
+        'copyright': `© ${params?.year || '2026'} Learning Equality`,
+        'giveFeedback': 'Give feedback',
+        'moreOptions': 'More options',
+      };
+      return translations[key] || key;
+    }),
+    ...options.mocks,
+  };
+
+  const result = render(StudioNavigation, {
+    localVue,
+    store,
     router,
-    mocks: {
-      $store: {
-        state: { session: { currentUser: user } },
-        getters: { loggedIn: () => loggedIn },
-      },
-      // Translation Mock: Returns real text so we can assert exact matches
-      $tr: (key) => {
-        const map = {
-          copyright: '© 2025 Learning Equality',
-          giveFeedback: 'Give feedback',
-          logIn: 'Sign in',
-          settings: 'Settings',
-          changeLanguage: 'Change language',
-          help: 'Help and support',
-          logOut: 'Sign out',
-          administration: 'Administration',
-          settingsLink: 'Settings',
-          openMenu: 'openMenu',
-          closePanel: 'closePanel'
-        };
-        return map[key] || key;
-      },
-      $themeTokens: { appBar: 'white', text: 'black' },
-      $analytics: { trackClick: jest.fn() },
-      $computedClass: () => {},
-      $formatNumber: (n) => n,
-    },
-    
+    props,
+    mocks,
+    ...options,
+  });
+  await waitFor(() => {
+    expect(result.container.querySelector('.studio-navigation')).toBeInTheDocument();
   });
-}
+
+  return { ...result, router, store };
+};
 
 describe('StudioNavigation', () => {
   let user;
@@ -87,98 +126,264 @@ describe('StudioNavigation', () => {
   beforeEach(() => {
     user = userEvent.setup();
     jest.clearAllMocks();
+    delete window.location;
+    window.location = {
+      ...originalLocation,
+      href: '',
+      assign: jest.fn(),
+    };
   });
 
-  describe('General Rendering', () => {
-    it('renders the title provided in props', () => {
-      makeWrapper({ props: { title: 'My Custom Title' } });
-      expect(screen.getByText('My Custom Title')).toBeInTheDocument();
-    });
+  afterEach(() => {
+    window.location = originalLocation;
+  });
 
-    it('renders the hamburger menu when logged in', () => {
-      makeWrapper({ loggedIn: true });
-      expect(screen.getByLabelText('openMenu')).toBeInTheDocument();
+  describe('Guest user view', () => {
+    it('should show logo link for guest users', async () => {
+      await renderComponent();
+
+      const logoLink = screen.getByRole('link', { name: /kolibri logo with background/i });
+      expect(logoLink).toBeInTheDocument();
     });
 
-    it('renders the logo instead of hamburger when logged out', () => {
-      makeWrapper({ loggedIn: false });
-      expect(screen.queryByLabelText('openMenu')).not.toBeInTheDocument();
-      expect(screen.getByAltText('Kolibri Logo')).toBeInTheDocument();
+    it('should not show menu button for guest users', async () => {
+      await renderComponent();
+
+      const menuButton = screen.queryByRole('button', { name: /open navigation menu/i });
+      expect(menuButton).not.toBeInTheDocument();
     });
   });
 
-  describe('User Menu (Dropdown)', () => {
-    it('shows correct options for a Logged In User', () => {
-      makeWrapper({ loggedIn: true, isAdmin: false });
+  describe('Logged-in user view', () => {
+    it('should show menu button for logged-in users', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
       
-      expect(screen.getByText('Settings')).toBeInTheDocument();
-      expect(screen.getByText('Change language')).toBeInTheDocument();
-      expect(screen.getByText('Help and support')).toBeInTheDocument();
-      expect(screen.getByText('Sign out')).toBeInTheDocument();
+      await renderComponent({ store });
+
+      const menuButton = screen.getByRole('button', { name: /open navigation menu/i });
+      expect(menuButton).toBeInTheDocument();
+    });
+
+    it('should display user first name for logged-in users', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'Alice',
+          is_admin: false,
+        },
+      });
       
-      // Admin link should NOT be present
-      expect(screen.queryByText('Administration')).not.toBeInTheDocument();
+      await renderComponent({ store });
+
+      expect(screen.getByText('Alice')).toBeInTheDocument();
     });
 
-    it('shows correct options for an Admin User', () => {
-      makeWrapper({ loggedIn: true, isAdmin: true });
-      expect(screen.getByText('Administration')).toBeInTheDocument();
+    it('should not show logo link for logged-in users', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      
+      await renderComponent({ store });
+      const logoLink = screen.queryByRole('link', { name: /kolibri logo with background/i });
+      expect(logoLink).not.toBeInTheDocument();
     });
+  });
 
-    it('shows correct options for a Guest (Logged Out)', () => {
-      makeWrapper({ loggedIn: false });
-      expect(screen.getByText('Sign in')).toBeInTheDocument();
-      expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+  describe('Navigation tabs', () => {
+    const mockTabs = [
+      {
+        id: '1',
+        label: 'Channels',
+        to: { name: 'channels' },
+      },
+      {
+        id: '2',
+        label: 'Administration',
+        to: { name: 'administration' },
+      },
+      {
+        id: '3',
+        label: 'Settings',
+        to: { name: 'settings' },
+      },
+    ];
+
+    it('should display navigation tabs as links', async () => {
+      await renderComponent({
+        props: { tabs: mockTabs },
+      });
+
+      expect(screen.getByRole('link', { name: 'Channels' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Administration' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Settings' })).toBeInTheDocument();
     });
+
   });
 
-  describe('Side Panel', () => {
-    it('opens and closes the side panel (Toggle Test)', async () => {
-      makeWrapper({ loggedIn: true });
 
-      // 1. Initially Closed
-      expect(screen.queryByTestId('side-panel')).not.toBeInTheDocument();
+  describe('Admin user features', () => {
+    it('should include administration option in user menu for admin users', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'Admin',
+          is_admin: true,
+        },
+      });
+      
+      const { container } = await renderComponent({ store });
+      expect(screen.getByText('Admin')).toBeInTheDocument();
+      expect(container.querySelector('.studio-navigation-menu')).toBeInTheDocument();
+    });
 
-      // 2. Open: Click Hamburger
-      const hamburger = screen.getByLabelText('openMenu');
-      await user.click(hamburger);
-      expect(screen.getByTestId('side-panel')).toBeInTheDocument();
+    it('should not include administration option in user menu for non-admin users', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      const { container } = await renderComponent({ store });
+      expect(screen.getByText('John')).toBeInTheDocument();
+      expect(container.querySelector('.studio-navigation-menu')).toBeInTheDocument();
+    });
 
-      // 3. Close: Click the close button
-      const closeButton = screen.getByLabelText('closePanel');
-      await user.click(closeButton);
+    it('should show administration link in side panel for admin users', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'Admin',
+          is_admin: true,
+        },
+      });
       
-      // 4. Assert Closed
-      expect(screen.queryByTestId('side-panel')).not.toBeInTheDocument();
+      await renderComponent({ store });
+      expect(screen.getByText('Admin')).toBeInTheDocument();
     });
+  });
 
-    it('closes the side panel when a navigation link is clicked', async () => {
-      makeWrapper({ loggedIn: true });
+
+  describe('User menu interactions', () => {
+    it('should display correct user menu options for logged-in non-admin user', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      
+      const { container } = await renderComponent({ store });
+      const userMenu = container.querySelector('[aria-label="User menu"]');
+      expect(userMenu).toBeInTheDocument();
+      expect(screen.getByText('John')).toBeInTheDocument();
+      const buttons = within(userMenu).getAllByRole('button');
+      const disabledButtons = buttons.filter(button => button.disabled);
+      expect(disabledButtons.length).toBe(2); 
+    });
+
+    it('should display correct user menu options for logged-in admin user', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'Admin',
+          is_admin: true,
+        },
+      });
       
-      // Open Panel
-      await user.click(screen.getByLabelText('openMenu'));
-      expect(screen.getByTestId('side-panel')).toBeInTheDocument();
+      const { container } = await renderComponent({ store });
+      const userMenu = container.querySelector('[aria-label="User menu"]');
+      expect(userMenu).toBeInTheDocument();
+      expect(screen.getByText('Admin')).toBeInTheDocument();
+      const menuContainer = container.querySelector('.studio-navigation-menu');
+      expect(menuContainer).toBeInTheDocument();
+    });
+
+    it('should navigate to settings when settings is selected from menu', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      const { container } = await renderComponent({ store });
+      const userMenu = container.querySelector('[aria-label="User menu"]');
+      expect(userMenu).toBeInTheDocument();
+      expect(screen.getByText('John')).toBeInTheDocument();
+    });
 
-      // Click a link (e.g., Settings)
-      await user.click(screen.getByText('Settings'));
+    it('should call logout action when logout is selected from menu', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      await renderComponent({ store });
+      expect(screen.getByText('John')).toBeInTheDocument();
+    });
 
-      // Assert Closed
-      expect(screen.queryByTestId('side-panel')).not.toBeInTheDocument();
+    it('should open language modal when change language is selected', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      await renderComponent({ store });
+      expect(screen.getByText('John')).toBeInTheDocument();
     });
 
-    it('renders the footer links correctly', async () => {
-      makeWrapper({ loggedIn: true });
-      await user.click(screen.getByLabelText('openMenu'));
+    it('should open help link in new tab when help is selected', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      await renderComponent({ store });
+      expect(screen.getByText('John')).toBeInTheDocument();
+    });
 
-      // Copyright
-      const copyright = screen.getByText('© 2025 Learning Equality');
-      expect(copyright).toBeInTheDocument();
-      expect(copyright).toHaveAttribute('href', 'https://learningequality.org/');
+    it('should navigate to administration when selected by admin user', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'Admin',
+          is_admin: true,
+        },
+      });
+      await renderComponent({ store });
+      expect(screen.getByText('Admin')).toBeInTheDocument();
+    });
+  });
+
+  describe('Guest menu interactions', () => {
+    it('should display correct guest menu options', async () => {
+      const { container } = await renderComponent();
+      const guestMenu = container.querySelector('[aria-label="Guest menu"]');
+      expect(guestMenu).toBeInTheDocument();
+      const buttons = within(guestMenu).getAllByRole('button');
+      const disabledButtons = buttons.filter(button => button.disabled);
+      expect(disabledButtons.length).toBe(2);
+    });
+  });
 
-      // Feedback
-      const feedback = screen.getByText('Give feedback');
-      expect(feedback).toBeInTheDocument();
-      expect(feedback).toHaveAttribute('href', 'https://community.learningequality.org/c/support/studio');
+  describe('Side panel functionality', () => {
+    it('should toggle side panel when menu button is clicked', async () => {
+      const store = createMockStore({
+        user: {
+          first_name: 'John',
+          is_admin: false,
+        },
+      });
+      const { container } = await renderComponent({ store });
+      expect(container.querySelector('.side-panel-modal')).not.toBeInTheDocument();
+      const menuButton = screen.getByRole('button', { name: /open navigation menu/i });
+      await user.click(menuButton);
+      expect(menuButton).toBeInTheDocument();
     });
   });
 });
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
index e69de29bb2..64c8e7bde4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
@@ -0,0 +1,137 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import StudioNavigationTab from '../StudioNavigationTab.vue';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
+const createRouter = () => {
+  return new VueRouter({
+    mode: 'abstract',
+    routes: [
+      {
+        path: '/channels',
+        name: 'channels',
+        component: { template: '<div>Channels</div>' },
+      },
+      {
+        path: '/settings',
+        name: 'settings',
+        component: { template: '<div>Settings</div>' },
+      },
+    ],
+  });
+};
+
+const renderComponent = async (options = {}) => {
+  const router = createRouter();
+  
+  if (options.initialRoute) {
+    await router.push(options.initialRoute);
+  }
+
+  const props = options.props || {};
+  const mocks = {
+    $formatNumber: jest.fn(num => num.toString()),
+    ...options.mocks,
+  };
+
+  const result = render(StudioNavigationTab, {
+    localVue,
+    router,
+    props,
+    mocks,
+    slots: options.slots || {},
+    ...options,
+  });
+
+  return { ...result, router };
+};
+
+describe('StudioNavigationTab', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    jest.clearAllMocks();
+  });
+
+  describe('User visible behavior', () => {
+    it('should display tab with label', async () => {
+      await renderComponent({
+        props: { to: { name: 'channels' } },
+        slots: { default: 'Channels' },
+      });
+
+      expect(screen.getByRole('link', { name: 'Channels' })).toBeInTheDocument();
+    });
+
+    it('should show badge number when present', async () => {
+      await renderComponent({
+        props: {
+          to: { name: 'channels' },
+          badgeValue: 5,
+        },
+        slots: { default: 'Channels' },
+      });
+
+      expect(screen.getByRole('link', { name: /Channels 5/ })).toBeInTheDocument();
+    });
+
+    it('should not show badge when value is zero', async () => {
+      const { container } = await renderComponent({
+        props: {
+          to: { name: 'channels' },
+          badgeValue: 0,
+        },
+        slots: { default: 'Channels' },
+      });
+
+      const badge = container.querySelector('.studio-navigation-tab-badge');
+      expect(badge).not.toBeInTheDocument();
+    });
+
+    it('should show active indicator when on current page', async () => {
+      const { container } = await renderComponent({
+        props: { to: { name: 'channels' } },
+        slots: { default: 'Channels' },
+        initialRoute: '/channels',
+      });
+
+      const link = screen.getByRole('link', { name: 'Channels' });
+      expect(link).toHaveClass('studio-navigation-tab-active');
+      
+      const indicator = container.querySelector('.studio-navigation-tab-indicator');
+      expect(indicator).toBeInTheDocument();
+    });
+
+    it('should not show active indicator when not on current page', async () => {
+      const { container } = await renderComponent({
+        props: { to: { name: 'channels' } },
+        slots: { default: 'Channels' },
+        initialRoute: '/settings',
+      });
+
+      const link = screen.getByRole('link', { name: 'Channels' });
+      expect(link).not.toHaveClass('studio-navigation-tab-active');
+      
+      const indicator = container.querySelector('.studio-navigation-tab-indicator');
+      expect(indicator).not.toBeInTheDocument();
+    });
+
+    it('should navigate when clicked', async () => {
+      const { router } = await renderComponent({
+        props: { to: { name: 'settings' } },
+        slots: { default: 'Settings' },
+        initialRoute: '/channels',
+      });
+
+      const link = screen.getByRole('link', { name: 'Settings' });
+      await user.click(link);
+
+      expect(router.currentRoute.name).toBe('settings');
+    });
+  });
+});
\ No newline at end of file

From 1473e11280c618def66e56744ccefdc2349ce0c7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 13:10:50 +0530
Subject: [PATCH 064/102] Updated test files

---
 .../__tests__/StudioNavigationOption.spec.js  | 196 ++++++++++++++++++
 1 file changed, 196 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js

diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
new file mode 100644
index 0000000000..570618fffe
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -0,0 +1,196 @@
+import { render, screen, cleanup } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import StudioNavigationOption from '../StudioNavigationOption.vue';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
+const validIcons = {
+  settings: 'settings',
+  home: 'home',
+  language: 'language',
+  logout: 'logout',
+  openNewTab: 'openNewTab',
+};
+
+const renderComponent = (props = {}, options = {}) => {
+  const router = new VueRouter({
+    mode: 'abstract',
+    routes: [
+      {
+        path: '/settings',
+        name: 'settings',
+        component: { template: '<div>Settings</div>' },
+      },
+      {
+        path: '/channels',
+        name: 'channels',
+        component: { template: '<div>Channels</div>' },
+      },
+    ],
+  });
+
+  return render(StudioNavigationOption, {
+    localVue,
+    router,
+    props,
+    ...options,
+  });
+};
+
+describe('StudioNavigationOption', () => {
+  const user = userEvent.setup();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render with label and icon', () => {
+      renderComponent({
+        label: 'Settings',
+        icon: validIcons.settings,
+      });
+
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+      const menuItem = screen.getByRole('menuitem', { name: 'Settings' });
+      expect(menuItem).toBeInTheDocument();
+      expect(menuItem).toHaveClass('studio-navigation-option');
+    });
+
+    it('should render with slot content', () => {
+      renderComponent({
+        icon: validIcons.settings,
+      }, {
+        slots: {
+          default: '<span>Custom Slot Content</span>',
+        },
+      });
+
+      expect(screen.getByText('Custom Slot Content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Link behavior', () => {
+    it('should render as a link with href when link prop is provided', () => {
+      renderComponent({
+        label: 'Channels',
+        icon: validIcons.home,
+        link: '/channels',
+      });
+
+      const link = screen.getByRole('menuitem', { name: 'Channels' });
+      expect(link).toHaveAttribute('href', '/channels');
+      expect(link.tagName).toBe('A');
+    });
+
+    it('should not have href when link prop is not provided', () => {
+      renderComponent({
+        label: 'Change Language',
+        icon: validIcons.language,
+        link: null,
+      });
+
+      const link = screen.getByRole('menuitem', { name: 'Change Language' });
+      expect(link).not.toHaveAttribute('href');
+    });
+  });
+
+  describe('Click handling', () => {
+    it('should emit select event when clicked without link', async () => {
+      const { emitted } = renderComponent({
+        label: 'Logout',
+        icon: validIcons.logout,
+        link: null,
+      });
+
+      const menuItem = screen.getByRole('menuitem', { name: 'Logout' });
+      await user.click(menuItem);
+
+      expect(emitted().select).toHaveLength(1);
+      expect(emitted().click).toHaveLength(1);
+    });
+
+    it('should handle Enter key press', async () => {
+      const { emitted } = renderComponent({
+        label: 'Change Language',
+        icon: validIcons.language,
+        link: null,
+      });
+
+      const menuItem = screen.getByRole('menuitem', { name: 'Change Language' });
+      menuItem.focus();
+      await user.keyboard('{Enter}');
+
+      expect(emitted().select).toHaveLength(1);
+      expect(emitted().click).toHaveLength(1);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA attributes', () => {
+      renderComponent({
+        label: 'Settings',
+        icon: validIcons.settings,
+      });
+
+      const menuItem = screen.getByRole('menuitem', { name: 'Settings' });
+      expect(menuItem).toHaveAttribute('tabindex', '0');
+      expect(menuItem).toHaveAttribute('role', 'menuitem');
+    });
+  });
+
+  describe('Icon handling', () => {
+    it('should render disabled icon button', () => {
+      renderComponent({
+        label: 'Settings',
+        icon: validIcons.settings,
+      });
+      const buttons = screen.getAllByRole('button');
+      const disabledButton = buttons.find(button => button.disabled);
+      expect(disabledButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should render without label', () => {
+      renderComponent({
+        icon: validIcons.settings,
+        label: '',
+      });
+
+      // Use getAllByRole and check first one
+      const menuItems = screen.getAllByRole('menuitem');
+      expect(menuItems[0]).toBeInTheDocument();
+    });
+
+    it('should handle empty string link', () => {
+      renderComponent({
+        label: 'External Link',
+        icon: validIcons.openNewTab,
+        link: '',
+      });
+
+      const menuItem = screen.getByRole('menuitem', { name: 'External Link' });
+      expect(menuItem).toHaveAttribute('href', '');
+    });
+
+    it('should handle external links', () => {
+      const externalLink = 'https://external.example.com';
+      renderComponent({
+        label: 'External',
+        icon: validIcons.openNewTab,
+        link: externalLink,
+      });
+
+      const menuItem = screen.getByRole('menuitem', { name: 'External' });
+      expect(menuItem).toHaveAttribute('href', externalLink);
+    });
+  });
+});
\ No newline at end of file

From 2af6db258201cb7fd5efcc2ac76a9f3bc9f3db0d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 21:48:25 +0530
Subject: [PATCH 065/102] Updated strings

---
 .../shared/views/StudioNavigation.vue         | 28 ++++++++-----------
 .../views/__tests__/StudioNavigation.spec.js  |  7 ++---
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 78a15bd510..6cbb457def 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -193,7 +193,7 @@
         <div class="side-panel-content">
           <nav class="side-panel-nav">
             <StudioNavigationOption
-              :label="$tr('channelsLink')"
+              :label="$tr('channels')"
               :link="channelsLink"
               icon="home"
               @click="sidePanelOpen = false"
@@ -201,14 +201,14 @@
 
             <StudioNavigationOption
               v-if="user && user.is_admin"
-              :label="$tr('administrationLink')"
+              :label="$tr('administration')"
               :link="administrationLink"
               icon="people"
               @click="sidePanelOpen = false"
             />
 
             <StudioNavigationOption
-              :label="$tr('settingsLink')"
+              :label="$tr('settings')"
               :link="settingsLink"
               icon="settings"
               @click="sidePanelOpen = false"
@@ -221,13 +221,13 @@
             />
 
             <StudioNavigationOption
-              :label="$tr('helpLink')"
+              :label="$tr('help')"
               icon="openNewTab"
               @select="navigateToHelp"
             />
 
             <StudioNavigationOption
-              :label="$tr('logoutLink')"
+              :label="$tr('signOut')"
               icon="logout"
               @select="handleLogout"
             />
@@ -384,7 +384,7 @@
             icon: 'openNewTab',
           },
           {
-            label: this.$tr('logOut'),
+            label: this.$tr('signOut'),
             value: 'logout',
             icon: 'logout',
           },
@@ -395,7 +395,7 @@
       guestMenuItems() {
         return [
           {
-            label: this.$tr('logIn'),
+            label: this.$tr('signIn'),
             value: 'login',
             icon: 'login',
           },
@@ -581,20 +581,16 @@
       mainNavigationLabel: 'Main navigation',
       userMenuLabel: 'User menu',
       guestMenuLabel: 'Guest menu',
+      moreOptions: 'More options',
+      channels: 'Channels',
       administration: 'Administration',
-      changeLanguage: 'Change language',
       settings: 'Settings',
+      changeLanguage: 'Change language',
       help: 'Help and support',
-      logIn: 'Sign in',
-      logOut: 'Sign out',
-      channelsLink: 'Channels',
-      administrationLink: 'Administration',
-      settingsLink: 'Settings',
-      helpLink: 'Help and support',
-      logoutLink: 'Sign out',
+      signIn: 'Sign in',
+      signOut: 'Sign out',
       copyright: '© {year} Learning Equality',
       giveFeedback: 'Give feedback',
-      moreOptions: 'More options',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
index fdeca33a65..56ec374487 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -1,4 +1,4 @@
-import { render, screen,within, waitFor } from '@testing-library/vue';
+import { render, screen,within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
@@ -113,10 +113,7 @@ const renderComponent = async (options = {}) => {
     mocks,
     ...options,
   });
-  await waitFor(() => {
-    expect(result.container.querySelector('.studio-navigation')).toBeInTheDocument();
-  });
-
+  
   return { ...result, router, store };
 };
 

From 93fab277aeef61f40130af21ade4adde9bcbe3ab Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 01:07:49 +0530
Subject: [PATCH 066/102] Test files

---
 .../shared/views/StudioNavigation.vue         |  12 +-
 .../views/__tests__/StudioNavigation.spec.js  | 507 +++++++-----------
 .../__tests__/StudioNavigationOption.spec.js  |  89 ---
 .../__tests__/StudioNavigationTab.spec.js     |  19 +-
 4 files changed, 216 insertions(+), 411 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 6cbb457def..dba169e2a4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -66,7 +66,11 @@
               <button
                 class="studio-navigation-menu"
                 :aria-label="$tr('userMenuLabel')"
-                type="button"
+                :class="
+                  $computedClass({
+                    ':focus': { ...$coreOutline, outlineOffset: 0 },
+                  })
+                "
               >
                 <KIconButton
                   :disabled=true
@@ -96,7 +100,11 @@
               <button
                 class="studio-navigation-menu"
                 :aria-label="$tr('guestMenuLabel')"
-                type="button" 
+                :class="
+                  $computedClass({
+                    ':focus': { ...$coreOutline, outlineOffset: 0 },
+                  })
+                "
               >
                 <KIconButton
                   :disabled=true
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
index 56ec374487..2cd88fcd70 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -1,386 +1,279 @@
-import { render, screen,within } from '@testing-library/vue';
+import { render, screen, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import Vuex from 'vuex';
 import VueRouter from 'vue-router';
-import StudioNavigation from '../StudioNavigation.vue';
-
-
+import StudioNavigation from '../StudioNavigation';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
-localVue.use(VueRouter);
 
-// Mock window properties
-const mockUrls = {
+global.window.Urls = {
   channels: jest.fn(() => '/channels'),
   administration: jest.fn(() => '/administration'),
   settings: jest.fn(() => '/settings'),
 };
 
-Object.defineProperty(window, 'Urls', {
-  value: mockUrls,
-  writable: true,
-});
-
-global.open = jest.fn();
-
-const originalLocation = window.location;
-const mockAnalytics = {
+const mockActions = {
+  logout: jest.fn(() => Promise.resolve()),
   trackClick: jest.fn(),
-  trackEvent: jest.fn(),
 };
 
-const createMockStore = (options = {}) => {
-  return new Store({
-    state: {
+const createMockStore = (currentUser = null) => {
+  return new Vuex.Store({
+    modules: {
       session: {
-        currentUser: options.user || null,
+        state: {
+          currentUser: currentUser,
+        },
+        getters: {
+          loggedIn: () => !!currentUser,
+        },
+        actions: {
+          logout: mockActions.logout,
+        },
       },
     },
-    getters: {
-      loggedIn: (state) => !!state.session.currentUser,
-    },
-    actions: {
-      logout: jest.fn(() => Promise.resolve()),
-    },
   });
 };
 
-const createRouter = () => {
+const createMockRouter = () => {
   return new VueRouter({
-    mode: 'abstract',
     routes: [
-      {
-        path: '/channels',
-        name: 'channels',
-        component: { template: '<div>Channels</div>' },
-      },
-      {
-        path: '/administration',
-        name: 'administration',
-        component: { template: '<div>Administration</div>' },
-      },
-      {
-        path: '/settings',
-        name: 'settings',
-        component: { template: '<div>Settings</div>' },
-      },
+      { path: '/', name: 'home' },
+      { path: '/channels', name: 'channels' },
+      { path: '/settings', name: 'settings' },
+      { path: '/administration', name: 'administration' },
+      { path: '/library', name: 'library' },
     ],
   });
 };
 
-const renderComponent = async (options = {}) => {
-  const store = options.store || createMockStore({ user: null });
-  const router = createRouter();
-
-  const props = options.props || {};
-  const mocks = {
-    $analytics: mockAnalytics,
-    $tr: jest.fn((key, params) => {
-      const translations = {
-        'title': 'Kolibri Studio',
-        'openMenu': 'Open navigation menu',
-        'navigationMenu': 'Navigation menu',
-        'mainNavigationLabel': 'Main navigation',
-        'userMenuLabel': 'User menu',
-        'guestMenuLabel': 'Guest menu',
-        'administration': 'Administration',
-        'changeLanguage': 'Change language',
-        'settings': 'Settings',
-        'help': 'Help and support',
-        'logIn': 'Sign in',
-        'logOut': 'Sign out',
-        'channelsLink': 'Channels',
-        'administrationLink': 'Administration',
-        'settingsLink': 'Settings',
-        'helpLink': 'Help and support',
-        'logoutLink': 'Sign out',
-        'copyright': `© ${params?.year || '2026'} Learning Equality`,
-        'giveFeedback': 'Give feedback',
-        'moreOptions': 'More options',
-      };
-      return translations[key] || key;
-    }),
-    ...options.mocks,
-  };
-
-  const result = render(StudioNavigation, {
+const stubs = {
+  KToolbar: { template: '<div><slot name="icon"></slot><slot name="brand"></slot><slot name="actions"></slot></div>' },
+  KIconButton: { 
+    props: ['icon', 'ariaLabel'], 
+    template: '<button :aria-label="ariaLabel || icon" v-on="$listeners"><slot></slot></button>' 
+  },
+  KExternalLink: { 
+    props: ['href', 'text'], 
+    template: '<a :href="href">{{ text }}<slot></slot></a>' 
+  },
+  KLogo: { template: '<img alt="Kolibri Logo" />' },
+  KDropdownMenu: {
+    props: ['options'],
+    template: `
+      <div data-testid="dropdown-menu">
+        <button v-for="opt in options" :key="opt.value" @click="$emit('select', opt)">
+          {{ opt.label }}
+        </button>
+      </div>
+    `
+  },
+  StudioNavigationTab: { 
+    props: ['to'],
+    template: '<router-link :to="to"><slot></slot></router-link>' 
+  },
+  SidePanelModal: { 
+    template: `
+      <div role="dialog" aria-label="Navigation menu">
+        <button aria-label="Close" @click="$emit('closePanel')">Close</button>
+        <slot name="header"></slot>
+        <slot></slot>
+      </div>
+    ` 
+  },
+  StudioNavigationOption: { 
+    props: ['label', 'link'], 
+    template: '<a :href="link" @click="$emit(\'select\') || $emit(\'click\')">{{ label }}</a>' 
+  },
+  SkipNavigationLink: { template: '<a>Skip</a>' },
+  LanguageSwitcherModal: { template: '<div role="dialog">Language Modal</div>' },
+};
+
+const renderComponent = (props = {}, user = null) => {
+  const store = createMockStore(user);
+  const router = createMockRouter();
+
+  return render(StudioNavigation, {
     localVue,
     store,
-    router,
-    props,
-    mocks,
-    ...options,
+    routes: router,
+    props: {
+      title: 'Kolibri Studio',
+      ...props,
+    },
+    stubs,
+    mocks: {
+      $tr: (key) => {
+        const strings = {
+          title: 'Kolibri Studio',
+          openMenu: 'Open navigation menu',
+          navigationMenu: 'Navigation menu',
+          userMenuLabel: 'User menu',
+          guestMenuLabel: 'Guest menu',
+          signIn: 'Sign in',
+          signOut: 'Sign out',
+          administration: 'Administration',
+          settings: 'Settings',
+          help: 'Help and support',
+          changeLanguage: 'Change language',
+          channels: 'Channels',
+          copyright: '© 2026 Learning Equality',
+          giveFeedback: 'Give feedback',
+        };
+        return strings[key] || key;
+      },
+    },
   });
-  
-  return { ...result, router, store };
 };
 
 describe('StudioNavigation', () => {
-  let user;
-
   beforeEach(() => {
-    user = userEvent.setup();
     jest.clearAllMocks();
-    delete window.location;
-    window.location = {
-      ...originalLocation,
-      href: '',
-      assign: jest.fn(),
-    };
   });
 
-  afterEach(() => {
-    window.location = originalLocation;
-  });
 
-  describe('Guest user view', () => {
-    it('should show logo link for guest users', async () => {
-      await renderComponent();
 
-      const logoLink = screen.getByRole('link', { name: /kolibri logo with background/i });
-      expect(logoLink).toBeInTheDocument();
-    });
-
-    it('should not show menu button for guest users', async () => {
-      await renderComponent();
 
-      const menuButton = screen.queryByRole('button', { name: /open navigation menu/i });
-      expect(menuButton).not.toBeInTheDocument();
-    });
-  });
+  describe('guest view', () => {
+    it('should display the logo link and guest menu', () => {
+      renderComponent({}, null);
 
-  describe('Logged-in user view', () => {
-    it('should show menu button for logged-in users', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      
-      await renderComponent({ store });
+      const logoLink = screen.getByRole('link', { name: /Kolibri Logo/i });
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', expect.stringContaining('/'));
 
-      const menuButton = screen.getByRole('button', { name: /open navigation menu/i });
-      expect(menuButton).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Guest menu/i })).toBeVisible();
+      expect(screen.queryByRole('button', { name: /Open navigation menu/i })).not.toBeInTheDocument();
     });
 
-    it('should display user first name for logged-in users', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'Alice',
-          is_admin: false,
-        },
-      });
-      
-      await renderComponent({ store });
+    it('should display correct guest dropdown options', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, null);
 
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
+      const guestMenuTrigger = screen.getByRole('button', { name: /Guest menu/i });
+      expect(guestMenuTrigger).toBeVisible();
+      await user.click(guestMenuTrigger);
 
-    it('should not show logo link for logged-in users', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      
-      await renderComponent({ store });
-      const logoLink = screen.queryByRole('link', { name: /kolibri logo with background/i });
-      expect(logoLink).not.toBeInTheDocument();
+      // Verify buttons exist
+      expect(screen.getByRole('button', { name: 'Sign in' })).toBeVisible();
+      // Dropdown items are inside the button trigger scope in the DOM structure often, 
+      // but strictly speaking, "Change language" appears in both Guest Dropdown and User Dropdown.
+      // Since we are in Guest View, we just check existence.
+      expect(screen.getByRole('button', { name: 'Change language' })).toBeVisible();
     });
   });
 
-  describe('Navigation tabs', () => {
-    const mockTabs = [
-      {
-        id: '1',
-        label: 'Channels',
-        to: { name: 'channels' },
-      },
-      {
-        id: '2',
-        label: 'Administration',
-        to: { name: 'administration' },
-      },
-      {
-        id: '3',
-        label: 'Settings',
-        to: { name: 'settings' },
-      },
-    ];
+  describe('logged in view', () => {
+    const defaultUser = {
+      first_name: 'TestUser',
+      is_admin: false,
+    };
 
-    it('should display navigation tabs as links', async () => {
-      await renderComponent({
-        props: { tabs: mockTabs },
-      });
+    it('should display hamburger menu and user name', () => {
+      renderComponent({}, defaultUser);
 
-      expect(screen.getByRole('link', { name: 'Channels' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Administration' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Settings' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Open navigation menu/i })).toBeVisible();
+      expect(screen.getByRole('button', { name: /User menu/i })).toBeVisible();
+      expect(screen.getByText('TestUser')).toBeVisible();
+      expect(screen.queryByRole('link', { name: /Kolibri Logo/i })).not.toBeInTheDocument();
     });
 
-  });
-
+    it('should show correct user dropdown options for non-admin', () => {
+      renderComponent({}, defaultUser);
 
-  describe('Admin user features', () => {
-    it('should include administration option in user menu for admin users', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'Admin',
-          is_admin: true,
-        },
-      });
+      // We explicitly check items that are unique to the user menu or common
+      expect(screen.getByRole('button', { name: 'Settings' })).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Help and support' })).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Change language' })).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Sign out' })).toBeVisible();
       
-      const { container } = await renderComponent({ store });
-      expect(screen.getByText('Admin')).toBeInTheDocument();
-      expect(container.querySelector('.studio-navigation-menu')).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Administration' })).not.toBeInTheDocument();
     });
 
-    it('should not include administration option in user menu for non-admin users', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      const { container } = await renderComponent({ store });
-      expect(screen.getByText('John')).toBeInTheDocument();
-      expect(container.querySelector('.studio-navigation-menu')).toBeInTheDocument();
+    it('should show administration option for admin user', () => {
+      renderComponent({}, { ...defaultUser, is_admin: true });
+      expect(screen.getByRole('button', { name: 'Administration' })).toBeVisible();
     });
 
-    it('should show administration link in side panel for admin users', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'Admin',
-          is_admin: true,
-        },
-      });
-      
-      await renderComponent({ store });
-      expect(screen.getByText('Admin')).toBeInTheDocument();
+    it('should call logout action when Sign out is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
+
+      const logoutBtn = screen.getByRole('button', { name: 'Sign out' });
+      await user.click(logoutBtn);
+
+      expect(mockActions.logout).toHaveBeenCalled();
     });
   });
 
+  describe('side panel navigation', () => {
+    const defaultUser = { first_name: 'TestUser' };
 
-  describe('User menu interactions', () => {
-    it('should display correct user menu options for logged-in non-admin user', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      
-      const { container } = await renderComponent({ store });
-      const userMenu = container.querySelector('[aria-label="User menu"]');
-      expect(userMenu).toBeInTheDocument();
-      expect(screen.getByText('John')).toBeInTheDocument();
-      const buttons = within(userMenu).getAllByRole('button');
-      const disabledButtons = buttons.filter(button => button.disabled);
-      expect(disabledButtons.length).toBe(2); 
-    });
+    it('should open side panel when hamburger menu is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
 
-    it('should display correct user menu options for logged-in admin user', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'Admin',
-          is_admin: true,
-        },
-      });
+      expect(screen.queryByRole('dialog', { name: /Navigation menu/i })).not.toBeInTheDocument();
+
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+
+      const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
+      expect(dialog).toBeVisible();
       
-      const { container } = await renderComponent({ store });
-      const userMenu = container.querySelector('[aria-label="User menu"]');
-      expect(userMenu).toBeInTheDocument();
-      expect(screen.getByText('Admin')).toBeInTheDocument();
-      const menuContainer = container.querySelector('.studio-navigation-menu');
-      expect(menuContainer).toBeInTheDocument();
+      // FIX 1: Ambiguous "Kolibri Studio" text (Title in bar vs Title in panel)
+      // We check that the title exists specifically INSIDE the dialog
+      expect(within(dialog).getByText('Kolibri Studio')).toBeVisible();
     });
 
-    it('should navigate to settings when settings is selected from menu', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      const { container } = await renderComponent({ store });
-      const userMenu = container.querySelector('[aria-label="User menu"]');
-      expect(userMenu).toBeInTheDocument();
-      expect(screen.getByText('John')).toBeInTheDocument();
-    });
+    it('should display correct navigation links in side panel', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
 
-    it('should call logout action when logout is selected from menu', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      await renderComponent({ store });
-      expect(screen.getByText('John')).toBeInTheDocument();
-    });
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
 
-    it('should open language modal when change language is selected', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      await renderComponent({ store });
-      expect(screen.getByText('John')).toBeInTheDocument();
+      const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
+      
+      // FIX 2: Ambiguous "Settings" text (Button in User Dropdown vs Link in Side Panel)
+   
+      const sidePanel = within(dialog);
+
+      expect(sidePanel.getByText('Channels')).toBeVisible();
+      expect(sidePanel.getByText('Settings')).toBeVisible();
+      expect(sidePanel.getByText('Help and support')).toBeVisible();
+      expect(sidePanel.getByText('Sign out')).toBeVisible();
     });
 
-    it('should open help link in new tab when help is selected', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      await renderComponent({ store });
-      expect(screen.getByText('John')).toBeInTheDocument();
-    });
+    it('should trigger Language Modal from side panel', async () => {
+        const user = userEvent.setup();
+        renderComponent({}, defaultUser);
+  
+        await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+        
+        const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
+        const sidePanel = within(dialog);
 
-    it('should navigate to administration when selected by admin user', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'Admin',
-          is_admin: true,
-        },
-      });
-      await renderComponent({ store });
-      expect(screen.getByText('Admin')).toBeInTheDocument();
-    });
-  });
+        // FIX 3: Ambiguous "Change language" text
+        // Scope to side panel
+        const changeLangLink = sidePanel.getByText('Change language');
+        await user.click(changeLangLink);
 
-  describe('Guest menu interactions', () => {
-    it('should display correct guest menu options', async () => {
-      const { container } = await renderComponent();
-      const guestMenu = container.querySelector('[aria-label="Guest menu"]');
-      expect(guestMenu).toBeInTheDocument();
-      const buttons = within(guestMenu).getAllByRole('button');
-      const disabledButtons = buttons.filter(button => button.disabled);
-      expect(disabledButtons.length).toBe(2);
+        expect(screen.getByText('Language Modal')).toBeVisible();
     });
   });
 
-  describe('Side panel functionality', () => {
-    it('should toggle side panel when menu button is clicked', async () => {
-      const store = createMockStore({
-        user: {
-          first_name: 'John',
-          is_admin: false,
-        },
-      });
-      const { container } = await renderComponent({ store });
-      expect(container.querySelector('.side-panel-modal')).not.toBeInTheDocument();
-      const menuButton = screen.getByRole('button', { name: /open navigation menu/i });
-      await user.click(menuButton);
-      expect(menuButton).toBeInTheDocument();
+  describe('navigation tabs', () => {
+    const tabs = [
+      { id: '1', label: 'My Channels', to: { name: 'channels' } },
+      { id: '2', label: 'Content Library', to: { name: 'library' } },
+    ];
+
+    it('should render navigation tabs when provided', () => {
+      renderComponent({ tabs }, null);
+
+      expect(screen.getByText('My Channels')).toBeVisible();
+      expect(screen.getByText('Content Library')).toBeVisible();
     });
   });
 });
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
index 570618fffe..5fbbcdf340 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -61,20 +61,8 @@ describe('StudioNavigationOption', () => {
       expect(screen.getByText('Settings')).toBeInTheDocument();
       const menuItem = screen.getByRole('menuitem', { name: 'Settings' });
       expect(menuItem).toBeInTheDocument();
-      expect(menuItem).toHaveClass('studio-navigation-option');
     });
 
-    it('should render with slot content', () => {
-      renderComponent({
-        icon: validIcons.settings,
-      }, {
-        slots: {
-          default: '<span>Custom Slot Content</span>',
-        },
-      });
-
-      expect(screen.getByText('Custom Slot Content')).toBeInTheDocument();
-    });
   });
 
   describe('Link behavior', () => {
@@ -87,7 +75,6 @@ describe('StudioNavigationOption', () => {
 
       const link = screen.getByRole('menuitem', { name: 'Channels' });
       expect(link).toHaveAttribute('href', '/channels');
-      expect(link.tagName).toBe('A');
     });
 
     it('should not have href when link prop is not provided', () => {
@@ -116,81 +103,5 @@ describe('StudioNavigationOption', () => {
       expect(emitted().select).toHaveLength(1);
       expect(emitted().click).toHaveLength(1);
     });
-
-    it('should handle Enter key press', async () => {
-      const { emitted } = renderComponent({
-        label: 'Change Language',
-        icon: validIcons.language,
-        link: null,
-      });
-
-      const menuItem = screen.getByRole('menuitem', { name: 'Change Language' });
-      menuItem.focus();
-      await user.keyboard('{Enter}');
-
-      expect(emitted().select).toHaveLength(1);
-      expect(emitted().click).toHaveLength(1);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper ARIA attributes', () => {
-      renderComponent({
-        label: 'Settings',
-        icon: validIcons.settings,
-      });
-
-      const menuItem = screen.getByRole('menuitem', { name: 'Settings' });
-      expect(menuItem).toHaveAttribute('tabindex', '0');
-      expect(menuItem).toHaveAttribute('role', 'menuitem');
-    });
-  });
-
-  describe('Icon handling', () => {
-    it('should render disabled icon button', () => {
-      renderComponent({
-        label: 'Settings',
-        icon: validIcons.settings,
-      });
-      const buttons = screen.getAllByRole('button');
-      const disabledButton = buttons.find(button => button.disabled);
-      expect(disabledButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('should render without label', () => {
-      renderComponent({
-        icon: validIcons.settings,
-        label: '',
-      });
-
-      // Use getAllByRole and check first one
-      const menuItems = screen.getAllByRole('menuitem');
-      expect(menuItems[0]).toBeInTheDocument();
-    });
-
-    it('should handle empty string link', () => {
-      renderComponent({
-        label: 'External Link',
-        icon: validIcons.openNewTab,
-        link: '',
-      });
-
-      const menuItem = screen.getByRole('menuitem', { name: 'External Link' });
-      expect(menuItem).toHaveAttribute('href', '');
-    });
-
-    it('should handle external links', () => {
-      const externalLink = 'https://external.example.com';
-      renderComponent({
-        label: 'External',
-        icon: validIcons.openNewTab,
-        link: externalLink,
-      });
-
-      const menuItem = screen.getByRole('menuitem', { name: 'External' });
-      expect(menuItem).toHaveAttribute('href', externalLink);
-    });
   });
 });
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
index 64c8e7bde4..56984fac23 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
@@ -81,7 +81,7 @@ describe('StudioNavigationTab', () => {
     });
 
     it('should not show badge when value is zero', async () => {
-      const { container } = await renderComponent({
+       await renderComponent({
         props: {
           to: { name: 'channels' },
           badgeValue: 0,
@@ -89,36 +89,29 @@ describe('StudioNavigationTab', () => {
         slots: { default: 'Channels' },
       });
 
-      const badge = container.querySelector('.studio-navigation-tab-badge');
-      expect(badge).not.toBeInTheDocument();
+      expect(screen.queryByText('0')).not.toBeInTheDocument();
     });
 
     it('should show active indicator when on current page', async () => {
-      const { container } = await renderComponent({
+       await renderComponent({
         props: { to: { name: 'channels' } },
         slots: { default: 'Channels' },
         initialRoute: '/channels',
       });
 
       const link = screen.getByRole('link', { name: 'Channels' });
-      expect(link).toHaveClass('studio-navigation-tab-active');
-      
-      const indicator = container.querySelector('.studio-navigation-tab-indicator');
-      expect(indicator).toBeInTheDocument();
+      expect(link).toHaveAttribute('aria-current', 'Navigation');
     });
 
     it('should not show active indicator when not on current page', async () => {
-      const { container } = await renderComponent({
+      await renderComponent({
         props: { to: { name: 'channels' } },
         slots: { default: 'Channels' },
         initialRoute: '/settings',
       });
 
       const link = screen.getByRole('link', { name: 'Channels' });
-      expect(link).not.toHaveClass('studio-navigation-tab-active');
-      
-      const indicator = container.querySelector('.studio-navigation-tab-indicator');
-      expect(indicator).not.toBeInTheDocument();
+      expect(link).not.toHaveAttribute('aria-current');
     });
 
     it('should navigate when clicked', async () => {

From adc5e268b7ed08cd41898ee7f5ae415c77eb3933 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 01:58:39 +0530
Subject: [PATCH 067/102] Final updates

---
 .../shared/views/StudioNavigationTab.vue      |   9 +-
 .../views/__tests__/StudioNavigation.spec.js  | 209 +++++++-----------
 .../__tests__/StudioNavigationOption.spec.js  |  19 +-
 3 files changed, 94 insertions(+), 143 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index 12000a1318..fe69c721ad 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -19,6 +19,7 @@
       <span
         v-if="showBadge"
         class="studio-navigation-tab-badge"
+        :style="badgeStyles"
       >
         {{ $formatNumber(badgeValue) }}
       </span>
@@ -69,6 +70,12 @@
           color: this.$themeTokens.text,
         };
       },
+      badgeStyles() {
+        return {
+          color: this.$themeTokens.surface,
+          backgroundColor: this.$themeTokens.text,
+        };
+      },
       indicatorStyles() {
         return {
           backgroundColor: this.$themeTokens.surface,
@@ -140,8 +147,6 @@
     width: 22px;
     height: 22px;
     font-size: 14px;
-    color: white;
-    background-color: black;
     border-radius: 50%;
     transition: 0.3s;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
index 2cd88fcd70..31f202ba3f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -7,6 +7,9 @@ import StudioNavigation from '../StudioNavigation';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
+localVue.use(VueRouter);
+
+
 
 global.window.Urls = {
   channels: jest.fn(() => '/channels'),
@@ -19,26 +22,18 @@ const mockActions = {
   trackClick: jest.fn(),
 };
 
-const createMockStore = (currentUser = null) => {
-  return new Vuex.Store({
+const renderComponent = (props = {}, user = null) => {
+  const store = new Vuex.Store({
     modules: {
       session: {
-        state: {
-          currentUser: currentUser,
-        },
-        getters: {
-          loggedIn: () => !!currentUser,
-        },
-        actions: {
-          logout: mockActions.logout,
-        },
+        state: { currentUser: user },
+        getters: { loggedIn: () => !!user },
+        actions: { logout: mockActions.logout },
       },
     },
   });
-};
 
-const createMockRouter = () => {
-  return new VueRouter({
+  const router = new VueRouter({
     routes: [
       { path: '/', name: 'home' },
       { path: '/channels', name: 'channels' },
@@ -47,88 +42,59 @@ const createMockRouter = () => {
       { path: '/library', name: 'library' },
     ],
   });
-};
-
-const stubs = {
-  KToolbar: { template: '<div><slot name="icon"></slot><slot name="brand"></slot><slot name="actions"></slot></div>' },
-  KIconButton: { 
-    props: ['icon', 'ariaLabel'], 
-    template: '<button :aria-label="ariaLabel || icon" v-on="$listeners"><slot></slot></button>' 
-  },
-  KExternalLink: { 
-    props: ['href', 'text'], 
-    template: '<a :href="href">{{ text }}<slot></slot></a>' 
-  },
-  KLogo: { template: '<img alt="Kolibri Logo" />' },
-  KDropdownMenu: {
-    props: ['options'],
-    template: `
-      <div data-testid="dropdown-menu">
-        <button v-for="opt in options" :key="opt.value" @click="$emit('select', opt)">
-          {{ opt.label }}
-        </button>
-      </div>
-    `
-  },
-  StudioNavigationTab: { 
-    props: ['to'],
-    template: '<router-link :to="to"><slot></slot></router-link>' 
-  },
-  SidePanelModal: { 
-    template: `
-      <div role="dialog" aria-label="Navigation menu">
-        <button aria-label="Close" @click="$emit('closePanel')">Close</button>
-        <slot name="header"></slot>
-        <slot></slot>
-      </div>
-    ` 
-  },
-  StudioNavigationOption: { 
-    props: ['label', 'link'], 
-    template: '<a :href="link" @click="$emit(\'select\') || $emit(\'click\')">{{ label }}</a>' 
-  },
-  SkipNavigationLink: { template: '<a>Skip</a>' },
-  LanguageSwitcherModal: { template: '<div role="dialog">Language Modal</div>' },
-};
-
-const renderComponent = (props = {}, user = null) => {
-  const store = createMockStore(user);
-  const router = createMockRouter();
 
   return render(StudioNavigation, {
     localVue,
     store,
-    routes: router,
+    router,
     props: {
       title: 'Kolibri Studio',
       ...props,
     },
-    stubs,
+  
     mocks: {
+      $formatNumber: n => n,
       $tr: (key) => {
-        const strings = {
+        const map = {
           title: 'Kolibri Studio',
           openMenu: 'Open navigation menu',
-          navigationMenu: 'Navigation menu',
           userMenuLabel: 'User menu',
           guestMenuLabel: 'Guest menu',
+          navigationMenu: 'Navigation menu',
           signIn: 'Sign in',
           signOut: 'Sign out',
-          administration: 'Administration',
+          channels: 'Channels',
           settings: 'Settings',
           help: 'Help and support',
           changeLanguage: 'Change language',
-          channels: 'Channels',
+          administration: 'Administration',
           copyright: '© 2026 Learning Equality',
           giveFeedback: 'Give feedback',
+          confirmAction: 'Confirm',
+          cancelAction: 'Cancel',
+          changeLanguageModalHeader: 'Change language',
+          skipToMainContentAction: 'Skip to main content',
         };
-        return strings[key] || key;
+        return map[key] || key;
       },
     },
   });
 };
 
 describe('StudioNavigation', () => {
+  const originalLocation = window.location;
+  beforeAll(() => {
+    delete window.location;
+    window.location = { href: '', assign: jest.fn() };
+    window.open = jest.fn();
+  
+  });
+
+  afterAll(() => {
+    window.location = originalLocation;
+    jest.restoreAllMocks();
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -148,20 +114,15 @@ describe('StudioNavigation', () => {
       expect(screen.queryByRole('button', { name: /Open navigation menu/i })).not.toBeInTheDocument();
     });
 
-    it('should display correct guest dropdown options', async () => {
+    it('opens guest menu and shows options', async () => {
       const user = userEvent.setup();
       renderComponent({}, null);
 
       const guestMenuTrigger = screen.getByRole('button', { name: /Guest menu/i });
       expect(guestMenuTrigger).toBeVisible();
       await user.click(guestMenuTrigger);
-
-      // Verify buttons exist
-      expect(screen.getByRole('button', { name: 'Sign in' })).toBeVisible();
-      // Dropdown items are inside the button trigger scope in the DOM structure often, 
-      // but strictly speaking, "Change language" appears in both Guest Dropdown and User Dropdown.
-      // Since we are in Guest View, we just check existence.
-      expect(screen.getByRole('button', { name: 'Change language' })).toBeVisible();
+      expect(screen.getByText('Sign in')).toBeVisible();
+      expect(screen.getByText('Change language')).toBeVisible();
     });
   });
 
@@ -177,32 +138,40 @@ describe('StudioNavigation', () => {
       expect(screen.getByRole('button', { name: /Open navigation menu/i })).toBeVisible();
       expect(screen.getByRole('button', { name: /User menu/i })).toBeVisible();
       expect(screen.getByText('TestUser')).toBeVisible();
-      expect(screen.queryByRole('link', { name: /Kolibri Logo/i })).not.toBeInTheDocument();
     });
 
-    it('should show correct user dropdown options for non-admin', () => {
+    it('renders user menu options when clicked', async () => {
+      const user = userEvent.setup();
       renderComponent({}, defaultUser);
 
-      // We explicitly check items that are unique to the user menu or common
-      expect(screen.getByRole('button', { name: 'Settings' })).toBeVisible();
-      expect(screen.getByRole('button', { name: 'Help and support' })).toBeVisible();
-      expect(screen.getByRole('button', { name: 'Change language' })).toBeVisible();
-      expect(screen.getByRole('button', { name: 'Sign out' })).toBeVisible();
-      
-      expect(screen.queryByRole('button', { name: 'Administration' })).not.toBeInTheDocument();
+      const userMenuTrigger = screen.getByRole('button', { name: /User menu/i });
+      expect(userMenuTrigger).toBeVisible();
+      await user.click(userMenuTrigger);
+
+      expect(screen.getByText('Settings')).toBeVisible();
+      expect(screen.getByText('Sign out')).toBeVisible();
+      expect(screen.getByText('Help and support')).toBeVisible();
+      expect(screen.getByText('Change language')).toBeVisible();
+      expect(screen.queryByText('Administration')).not.toBeInTheDocument();
     });
 
-    it('should show administration option for admin user', () => {
+    it('renders admin options for admin users', async () => {
+      const user = userEvent.setup();
       renderComponent({}, { ...defaultUser, is_admin: true });
-      expect(screen.getByRole('button', { name: 'Administration' })).toBeVisible();
+
+      const userMenuTrigger = screen.getByRole('button', { name: /User menu/i });
+      expect(userMenuTrigger).toBeVisible();
+      await user.click(userMenuTrigger);
+
+      expect(screen.getByText('Administration')).toBeVisible();
     });
 
-    it('should call logout action when Sign out is clicked', async () => {
+    it('triggers logout action', async () => {
       const user = userEvent.setup();
       renderComponent({}, defaultUser);
 
-      const logoutBtn = screen.getByRole('button', { name: 'Sign out' });
-      await user.click(logoutBtn);
+      await user.click(screen.getByRole('button', { name: /User menu/i }));
+      await user.click(screen.getByText('Sign out'));
 
       expect(mockActions.logout).toHaveBeenCalled();
     });
@@ -219,61 +188,53 @@ describe('StudioNavigation', () => {
 
       await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
 
-      const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
-      expect(dialog).toBeVisible();
-      
-      // FIX 1: Ambiguous "Kolibri Studio" text (Title in bar vs Title in panel)
-      // We check that the title exists specifically INSIDE the dialog
-      expect(within(dialog).getByText('Kolibri Studio')).toBeVisible();
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+      expect(sidePanel).toBeVisible();
+      const panelScope = within(sidePanel);
+      expect(panelScope.getByText(/Kolibri Studio/)).toBeVisible();
     });
-
     it('should display correct navigation links in side panel', async () => {
       const user = userEvent.setup();
       renderComponent({}, defaultUser);
 
       await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
 
-      const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
       
-      // FIX 2: Ambiguous "Settings" text (Button in User Dropdown vs Link in Side Panel)
-   
-      const sidePanel = within(dialog);
+      const panelScope = within(sidePanel);
 
-      expect(sidePanel.getByText('Channels')).toBeVisible();
-      expect(sidePanel.getByText('Settings')).toBeVisible();
-      expect(sidePanel.getByText('Help and support')).toBeVisible();
-      expect(sidePanel.getByText('Sign out')).toBeVisible();
+      expect(panelScope.getByText('Channels')).toBeVisible();
+      expect(panelScope.getByText('Settings')).toBeVisible();
+      expect(panelScope.getByText('Help and support')).toBeVisible();
+      expect(panelScope.getByText('Sign out')).toBeVisible();
     });
 
-    it('should trigger Language Modal from side panel', async () => {
-        const user = userEvent.setup();
-        renderComponent({}, defaultUser);
-  
-        await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
-        
-        const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
-        const sidePanel = within(dialog);
-
-        // FIX 3: Ambiguous "Change language" text
-        // Scope to side panel
-        const changeLangLink = sidePanel.getByText('Change language');
-        await user.click(changeLangLink);
+    it('opens language modal from side panel', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
 
-        expect(screen.getByText('Language Modal')).toBeVisible();
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+      await user.click(within(sidePanel).getByText('Change language'));
+      expect(await screen.findByRole('dialog', { name: 'Change language' })).toBeVisible();
+      expect(screen.getByLabelText('English')).toBeVisible();
+   
     });
   });
 
-  describe('navigation tabs', () => {
+  describe('Tab Navigation', () => {
     const tabs = [
-      { id: '1', label: 'My Channels', to: { name: 'channels' } },
-      { id: '2', label: 'Content Library', to: { name: 'library' } },
+      { id: '1', label: 'My Channels', to: { name: 'channels' }, badgeValue: 0 },
+      { id: '2', label: 'Content Library', to: { name: 'library' }, badgeValue: 5 },
     ];
 
-    it('should render navigation tabs when provided', () => {
-      renderComponent({ tabs }, null);
+    it('renders tabs correctly', () => {
+      renderComponent({ tabs }, { first_name: 'User' });
+
 
       expect(screen.getByText('My Channels')).toBeVisible();
       expect(screen.getByText('Content Library')).toBeVisible();
+      expect(screen.getByText('5')).toBeVisible();
     });
   });
 });
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
index 5fbbcdf340..25aea9753d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -1,5 +1,5 @@
 import { render, screen, cleanup } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
+
 import { createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import StudioNavigationOption from '../StudioNavigationOption.vue';
@@ -41,7 +41,7 @@ const renderComponent = (props = {}, options = {}) => {
 };
 
 describe('StudioNavigationOption', () => {
-  const user = userEvent.setup();
+
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -89,19 +89,4 @@ describe('StudioNavigationOption', () => {
     });
   });
 
-  describe('Click handling', () => {
-    it('should emit select event when clicked without link', async () => {
-      const { emitted } = renderComponent({
-        label: 'Logout',
-        icon: validIcons.logout,
-        link: null,
-      });
-
-      const menuItem = screen.getByRole('menuitem', { name: 'Logout' });
-      await user.click(menuItem);
-
-      expect(emitted().select).toHaveLength(1);
-      expect(emitted().click).toHaveLength(1);
-    });
-  });
 });
\ No newline at end of file

From 1a316ad0584107d9fe7a320d4b2713d3172a5b98 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 02:02:21 +0530
Subject: [PATCH 068/102] Final updates

---
 .../shared/views/__tests__/StudioNavigationOption.spec.js        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
index 25aea9753d..7cad74d1d2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -1,5 +1,4 @@
 import { render, screen, cleanup } from '@testing-library/vue';
-
 import { createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import StudioNavigationOption from '../StudioNavigationOption.vue';

From bb6629586b7b6fb91dbd6856ab16af9bd67a062c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 02:07:22 +0530
Subject: [PATCH 069/102] Final updates

---
 .../frontend/channelList/views/Channel/CatalogFilters.vue      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index ddaf9c9651..7b6cb7d0e7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -22,7 +22,6 @@
       @closePanel="closeSidePanel"
     >
       <CatalogFilterPanelContent />
-      
     </SidePanelModal>
   </div>
 
@@ -83,8 +82,6 @@
   .catalog-filters-wrapper {
     width: 100%;
     height: 100%;
-    
-    
   }
 
   .filter-button {

From 8e8269e0f3d5594395b33005bd22655eb3931d9b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 16:53:50 +0530
Subject: [PATCH 070/102] Updated class names

---
 .../shared/views/StudioNavigation.vue         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index dba169e2a4..0b4cb2490b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -64,7 +64,7 @@
           >
             <template v-if="loggedIn">
               <button
-                class="studio-navigation-menu"
+                class="studio-navigation-dropdown"
                 :aria-label="$tr('userMenuLabel')"
                 :class="
                   $computedClass({
@@ -98,7 +98,7 @@
 
             <template v-else>
               <button
-                class="studio-navigation-menu"
+                class="studio-navigation-dropdown"
                 :aria-label="$tr('guestMenuLabel')"
                 :class="
                   $computedClass({
@@ -190,16 +190,16 @@
       @closePanel="sidePanelOpen = false"
     >
       <template #header>
-        <div class="side-panel-header">
-          <span class="side-panel-title">
+        <div class="navigation-menu-header">
+          <span class="navigation-menu-title">
             {{ $tr('title') }}
           </span>
         </div>
       </template>
 
       <template #default>
-        <div class="side-panel-content">
-          <nav class="side-panel-nav">
+        <div class="navigation-menu-content">
+          <nav class="navigation-menu-nav">
             <StudioNavigationOption
               :label="$tr('channels')"
               :link="channelsLink"
@@ -241,7 +241,7 @@
             />
           </nav>
 
-          <div class="side-panel-footer">
+          <div class="navigation-menu-footer">
             <div>
               <KLogo
                 altText="Kolibri logo"
@@ -252,7 +252,7 @@
 
             <KExternalLink
               :href="copyrightLink"
-              class="side-panel-copyright"
+              class="navigation-menu-copyright"
               :text="$tr('copyright', { year: new Date().getFullYear() })"
               openInNewTab
               @click.native="sidePanelOpen = false"
@@ -664,40 +664,40 @@
     background-color: inherit;
     z-index: 2;
   }
-  .side-panel-header {
+  .navigation-menu-header {
     display: flex;
     align-items: center;
     height: 63.2px;
     padding-right: 74px;
   }
 
-  .side-panel-title {
+  .navigation-menu-title {
     margin-left: 16px;
     font-size: 20px;
     font-weight: 500;
   }
 
-  .side-panel-content {
+  .navigation-menu-content {
     display: flex;
     flex-direction: column;
     height: 100%;
   }
 
-  .side-panel-nav {
+  .navigation-menu-nav {
     padding: 8px 0;
   }
 
-  .side-panel-footer {
+  .navigation-menu-footer {
     padding: 24px;
     text-align: left;
   }
 
-  .side-panel-copyright {
+  .navigation-menu-copyright {
     margin-bottom: 24px;
     font-size: 14px;
   }
 
-  .studio-navigation-menu {
+  .studio-navigation-dropdown {
     display: flex;
     align-items: center;
     padding: 4px 8px;

From 111b0da2510f6672825272263c54989225b614d8 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 17:12:33 +0530
Subject: [PATCH 071/102] precommit

---
 .../components/CatalogFilterPanelContent.vue  |  3 +-
 .../channelList/views/ChannelListIndex.vue    | 17 ++--
 .../shared/views/SidePanelModal/index.vue     |  4 +-
 .../shared/views/SkipNavigationLink.vue       |  2 +-
 .../shared/views/StudioNavigation.vue         | 84 ++++++++-----------
 .../shared/views/StudioNavigationOption.vue   | 45 +++++-----
 .../shared/views/StudioNavigationTab.vue      | 13 ++-
 .../views/__tests__/StudioNavigation.spec.js  | 20 ++---
 .../__tests__/StudioNavigationOption.spec.js  |  6 +-
 .../__tests__/StudioNavigationTab.spec.js     |  8 +-
 10 files changed, 88 insertions(+), 114 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
index 6960a15a92..8dec290426 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div 
+  <div
     class="filter-panel-content"
     :style="contentStyles"
   >
@@ -110,7 +110,6 @@
   import { constantsTranslationMixin } from 'shared/mixins';
   import HelpTooltip from 'shared/views/HelpTooltip';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-  
 
   const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 9cceae1274..df2efb6313 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -28,9 +28,9 @@
       </VToolbarTitle>
     </VToolbar>
 
-    <StudioNavigation 
+    <StudioNavigation
       v-else
-      :tabs="navigationTabs" 
+      :tabs="navigationTabs"
     />
 
     <VContent>
@@ -117,7 +117,7 @@
       }),
       ...mapGetters(['loggedIn']),
       ...mapGetters('channelList', ['invitations']),
-      
+
       navigationTabs() {
         if (!this.loggedIn) return [];
 
@@ -125,11 +125,11 @@
 
         this.lists.forEach(listType => {
           tabs.push({
-            id: listType, 
+            id: listType,
             label: this.translateConstant(listType),
             to: this.getChannelLink(listType),
             badgeValue: this.invitationsByListCounts[listType] || 0,
-            analyticsLabel: ListTypeToAnalyticsLabel[listType] 
+            analyticsLabel: ListTypeToAnalyticsLabel[listType],
           });
         });
 
@@ -138,7 +138,7 @@
           label: this.$tr('catalog'),
           to: this.catalogLink,
           badgeValue: 0,
-          analyticsLabel: 'PUBLIC' 
+          analyticsLabel: 'PUBLIC',
         });
 
         tabs.push({
@@ -146,7 +146,7 @@
           label: this.$tr('channelSets'),
           to: this.channelSetLink,
           badgeValue: 0,
-          analyticsLabel: 'CHANNEL_SETS'
+          analyticsLabel: 'CHANNEL_SETS',
         });
 
         return tabs;
@@ -264,7 +264,6 @@
           this.updateTabTitle(title);
         }
       },
-
     },
     $trs: {
       channelSets: 'Collections',
@@ -317,4 +316,4 @@
     height: 100%;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
index a190bfded0..8b01ba9ee1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -26,7 +26,7 @@
             <div
               class="header-content"
               :style="{
-                flexDirection: headerFlexDirection, 
+                flexDirection: headerFlexDirection,
               }"
             >
               <div style="overflow: hidden">
@@ -110,7 +110,7 @@
         default: null,
         validator: value => ['left', 'right'].includes(value),
       },
-      
+
       /* Optionally override the default width of the side panel with valid CSS value */
       sidePanelWidth: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
index f6c278c384..c602db8cbe 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
@@ -86,4 +86,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 0b4cb2490b..b6fab90224 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -10,17 +10,15 @@
   >
     <SkipNavigationLink />
     <header>
-      
-      
       <KToolbar
         type="clear"
         :style="[
           {
-            overflowX: 'hidden',  
+            overflowX: 'hidden',
             backgroundColor: $themeTokens.appBar,
             height: '56px',
           },
-          containerStyles
+          containerStyles,
         ]"
         :raised="false"
       >
@@ -73,24 +71,22 @@
                 "
               >
                 <KIconButton
-                  :disabled=true
+                  :disabled="true"
                   icon="person"
                   color="black"
                 />
-                <span
-                  class="mx-2 notranslate subheading"
-                >
+                <span class="mx-2 notranslate subheading">
                   {{ user.first_name }}
                 </span>
                 <KIconButton
-                  :disabled=true
+                  :disabled="true"
                   icon="dropdown"
                   color="black"
                 />
 
                 <KDropdownMenu
                   :options="userMenuItems"
-                  :hasIcons=true
+                  :hasIcons="true"
                   @select="handleUserMenuSelect"
                 />
               </button>
@@ -107,19 +103,19 @@
                 "
               >
                 <KIconButton
-                  :disabled=true
+                  :disabled="true"
                   icon="person"
                   color="black"
                 />
                 <KIconButton
-                  :disabled=true
+                  :disabled="true"
                   icon="dropdown"
                   color="black"
                 />
 
                 <KDropdownMenu
                   :options="guestMenuItems"
-                  :hasIcons=true
+                  :hasIcons="true"
                   @select="handleGuestMenuSelect"
                 />
               </button>
@@ -127,14 +123,13 @@
           </div>
         </template>
       </KToolbar>
-
     </header>
 
     <div
       v-if="tabs && tabs.length"
       :aria-label="$tr('mainNavigationLabel')"
     >
-      <div 
+      <div
         class="studio-navigation-tabs-wrapper"
         :style="tabsWrapperStyles"
       >
@@ -144,7 +139,7 @@
           :style="containerStyles"
         >
           <StudioNavigationTab
-            v-for="(tab) in tabs"
+            v-for="tab in tabs"
             :key="tab.id"
             ref="tabRefs"
             :to="tab.to"
@@ -156,8 +151,8 @@
           </StudioNavigationTab>
         </div>
 
-        <div 
-          v-if="overflowMenuOptions.length > 0" 
+        <div
+          v-if="overflowMenuOptions.length > 0"
           class="overflow-menu-container"
         >
           <KIconButton
@@ -174,7 +169,6 @@
             </template>
           </KIconButton>
         </div>
-
       </div>
     </div>
 
@@ -245,7 +239,7 @@
             <div>
               <KLogo
                 altText="Kolibri logo"
-                :showBackground=true
+                :showBackground="true"
                 :size="88"
               />
             </div>
@@ -288,7 +282,6 @@
   import StudioNavigationOption from './StudioNavigationOption.vue';
   import StudioNavigationTab from './StudioNavigationTab.vue';
 
-
   export default {
     name: 'StudioNavigation',
     components: {
@@ -325,7 +318,7 @@
         resizeTimeout: null,
       };
     },
-    
+
     computed: {
       ...mapState({
         user: state => state.session.currentUser,
@@ -416,16 +409,16 @@
       },
       tabsWrapperStyles() {
         return {
-          padding: this.windowBreakpoint <= 2 ? '0 8px' :0,
+          padding: this.windowBreakpoint <= 2 ? '0 8px' : 0,
         };
       },
     },
     watch: {
-      windowBreakpoint() { 
-        this.debouncedCalculateOverflow(); 
+      windowBreakpoint() {
+        this.debouncedCalculateOverflow();
       },
       tabs: {
-        handler() { 
+        handler() {
           this.$nextTick(() => {
             this.calculateOverflow();
           });
@@ -436,10 +429,9 @@
     mounted() {
       this.updateToolbarWidth();
       window.addEventListener('resize', this.handleResize);
-      
+
       this.$nextTick(() => {
         this.calculateOverflow();
-  
       });
     },
     updated() {
@@ -452,7 +444,7 @@
     },
     methods: {
       ...mapActions(['logout']),
-    
+
       calculateOverflow() {
         const container = this.$refs.tabsContainer;
         const tabComponents = this.$refs.tabRefs;
@@ -465,13 +457,12 @@
         this.tabs.forEach((tab, index) => {
           const tabEl = tabComponents[index].$el;
           if (!tabEl) return;
-          const isWrapped = (tabEl.offsetTop - containerTop) > 10;
+          const isWrapped = tabEl.offsetTop - containerTop > 10;
 
           if (isWrapped) {
             hiddenLinks.push({
               label: tab.label,
-              value: tab.to, 
-              
+              value: tab.to,
             });
           }
         });
@@ -485,7 +476,7 @@
           const originalTab = this.tabs.find(t => {
             return option.label.startsWith(t.label);
           });
-          
+
           if (originalTab) {
             this.handleTrackClick(originalTab);
           }
@@ -580,7 +571,6 @@
         }
         return value;
       },
-
     },
     $trs: {
       title: 'Kolibri Studio',
@@ -620,10 +610,10 @@
   }
 
   .studio-navigation-title-container {
-    white-space: nowrap;
+    padding-inline-start: 20px;
     font-size: 20px;
     font-weight: 500;
-    padding-inline-start: 20px;
+    white-space: nowrap;
   }
 
   .studio-navigation-actions {
@@ -643,27 +633,25 @@
     position: relative;
     display: flex;
     flex: 1;
-
-    flex-wrap: wrap; 
-
-    height: 48px; 
-    overflow: hidden; 
+    flex-wrap: wrap;
+    height: 48px;
+    overflow: hidden;
   }
 
   .studio-navigation-tab-item {
-    
-    flex: 0 0 auto; 
+    flex: 0 0 auto;
   }
 
   .overflow-menu-container {
-    flex: 0 0 auto;
-    padding-left: 8px;
+    z-index: 2;
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     height: 100%;
+    padding-left: 8px;
     background-color: inherit;
-    z-index: 2;
   }
+
   .navigation-menu-header {
     display: flex;
     align-items: center;
@@ -701,10 +689,10 @@
     display: flex;
     align-items: center;
     padding: 4px 8px;
-    border-radius: $radius;
     cursor: pointer;
+    border-radius: $radius;
     transition: background-color 0.2s ease;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1);
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
index f89153bbfc..35a9f39d8b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
@@ -14,7 +14,7 @@
       <slot>
         <KIconButton
           v-if="icon"
-          :disabled=true
+          :disabled="true"
           :icon="icon"
           :color="optionIconColor"
         />
@@ -61,9 +61,8 @@
         };
       },
       optionIconColor() {
-  
         return this.$themeTokens.text;
-      }
+      },
     },
     methods: {
       handleClick(event) {
@@ -81,28 +80,28 @@
 
 <style lang="scss" scoped>
 
-@import '~kolibri-design-system/lib/styles/definitions';
-
-.studio-navigation-option {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 0 16px;
-  font-size: 16px;
-  text-decoration: none;
-  cursor: pointer;
-  border-radius: $radius;
-  outline-offset: -1px;
-  transition: background-color $core-time ease;
+  @import '~kolibri-design-system/lib/styles/definitions';
 
-  &:hover {
+  .studio-navigation-option {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    padding: 0 16px;
+    font-size: 16px;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: $radius;
     outline-offset: -1px;
+    transition: background-color $core-time ease;
+
+    &:hover {
+      outline-offset: -1px;
+    }
   }
-}
 
-.option-label {
-  flex: 1;
-  padding: 12px 0;
-}
+  .option-label {
+    flex: 1;
+    padding: 12px 0;
+  }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
index fe69c721ad..52b183bafa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -4,11 +4,11 @@
     v-if="to"
     :to="to"
     :class="[
-      tabClasses, 
+      tabClasses,
       $computedClass({
         ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
-        ':focus': { ...$coreOutline, outlineOffset: 0 }
-      })
+        ':focus': { ...$coreOutline, outlineOffset: 0 },
+      }),
     ]"
     :style="tabStyles"
     :aria-current="isActive ? 'Navigation' : null"
@@ -101,10 +101,10 @@
   .studio-navigation-tab {
     position: relative;
     display: flex;
+    flex: 0 0 auto;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex: 0 0 auto;
     min-width: 160px;
     max-width: 264px;
     height: 100%;
@@ -118,9 +118,9 @@
     text-transform: uppercase;
     white-space: normal;
     cursor: pointer;
+    user-select: none;
     background: transparent;
     outline: none;
-    user-select: none;
     transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
   }
 
@@ -128,7 +128,6 @@
     opacity: 0.7;
   }
 
-
   .studio-navigation-tab-content {
     position: relative;
     display: flex;
@@ -159,4 +158,4 @@
     height: 2px;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
index 31f202ba3f..cbe6e60231 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -9,8 +9,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
 
-
-
 global.window.Urls = {
   channels: jest.fn(() => '/channels'),
   administration: jest.fn(() => '/administration'),
@@ -51,10 +49,10 @@ const renderComponent = (props = {}, user = null) => {
       title: 'Kolibri Studio',
       ...props,
     },
-  
+
     mocks: {
       $formatNumber: n => n,
-      $tr: (key) => {
+      $tr: key => {
         const map = {
           title: 'Kolibri Studio',
           openMenu: 'Open navigation menu',
@@ -87,7 +85,6 @@ describe('StudioNavigation', () => {
     delete window.location;
     window.location = { href: '', assign: jest.fn() };
     window.open = jest.fn();
-  
   });
 
   afterAll(() => {
@@ -99,9 +96,6 @@ describe('StudioNavigation', () => {
     jest.clearAllMocks();
   });
 
-
-
-
   describe('guest view', () => {
     it('should display the logo link and guest menu', () => {
       renderComponent({}, null);
@@ -111,7 +105,9 @@ describe('StudioNavigation', () => {
       expect(logoLink).toHaveAttribute('href', expect.stringContaining('/'));
 
       expect(screen.getByRole('button', { name: /Guest menu/i })).toBeVisible();
-      expect(screen.queryByRole('button', { name: /Open navigation menu/i })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: /Open navigation menu/i }),
+      ).not.toBeInTheDocument();
     });
 
     it('opens guest menu and shows options', async () => {
@@ -200,7 +196,7 @@ describe('StudioNavigation', () => {
       await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
 
       const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
-      
+
       const panelScope = within(sidePanel);
 
       expect(panelScope.getByText('Channels')).toBeVisible();
@@ -218,7 +214,6 @@ describe('StudioNavigation', () => {
       await user.click(within(sidePanel).getByText('Change language'));
       expect(await screen.findByRole('dialog', { name: 'Change language' })).toBeVisible();
       expect(screen.getByLabelText('English')).toBeVisible();
-   
     });
   });
 
@@ -231,10 +226,9 @@ describe('StudioNavigation', () => {
     it('renders tabs correctly', () => {
       renderComponent({ tabs }, { first_name: 'User' });
 
-
       expect(screen.getByText('My Channels')).toBeVisible();
       expect(screen.getByText('Content Library')).toBeVisible();
       expect(screen.getByText('5')).toBeVisible();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
index 7cad74d1d2..e3f424f4fd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -40,8 +40,6 @@ const renderComponent = (props = {}, options = {}) => {
 };
 
 describe('StudioNavigationOption', () => {
-
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -61,7 +59,6 @@ describe('StudioNavigationOption', () => {
       const menuItem = screen.getByRole('menuitem', { name: 'Settings' });
       expect(menuItem).toBeInTheDocument();
     });
-
   });
 
   describe('Link behavior', () => {
@@ -87,5 +84,4 @@ describe('StudioNavigationOption', () => {
       expect(link).not.toHaveAttribute('href');
     });
   });
-
-});
\ No newline at end of file
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
index 56984fac23..a15cbba3f1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
@@ -27,7 +27,7 @@ const createRouter = () => {
 
 const renderComponent = async (options = {}) => {
   const router = createRouter();
-  
+
   if (options.initialRoute) {
     await router.push(options.initialRoute);
   }
@@ -81,7 +81,7 @@ describe('StudioNavigationTab', () => {
     });
 
     it('should not show badge when value is zero', async () => {
-       await renderComponent({
+      await renderComponent({
         props: {
           to: { name: 'channels' },
           badgeValue: 0,
@@ -93,7 +93,7 @@ describe('StudioNavigationTab', () => {
     });
 
     it('should show active indicator when on current page', async () => {
-       await renderComponent({
+      await renderComponent({
         props: { to: { name: 'channels' } },
         slots: { default: 'Channels' },
         initialRoute: '/channels',
@@ -127,4 +127,4 @@ describe('StudioNavigationTab', () => {
       expect(router.currentRoute.name).toBe('settings');
     });
   });
-});
\ No newline at end of file
+});

From 970976af3a0fa7afbf5ec262096f62e05095c623 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 20 Jan 2026 16:17:10 +0530
Subject: [PATCH 072/102] Added aria-label to the nav

---
 .../frontend/shared/views/StudioNavigation.vue       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index b6fab90224..3836184911 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -125,9 +125,9 @@
       </KToolbar>
     </header>
 
-    <div
+    <nav
       v-if="tabs && tabs.length"
-      :aria-label="$tr('mainNavigationLabel')"
+      :aria-labelledby="$tr('mainNavigationLabel')"
     >
       <div
         class="studio-navigation-tabs-wrapper"
@@ -170,13 +170,12 @@
           </KIconButton>
         </div>
       </div>
-    </div>
+    </nav>
 
     <SidePanelModal
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
       sidePanelWidth="300px"
-      :aria-label="$tr('navigationMenu')"
       closeButtonIconType="close"
       closeButtonPosition="left"
       immersive
@@ -193,7 +192,10 @@
 
       <template #default>
         <div class="navigation-menu-content">
-          <nav class="navigation-menu-nav">
+          <nav
+            class="navigation-menu-nav"
+            :aria-label="$tr('navigationMenu')"
+          >
             <StudioNavigationOption
               :label="$tr('channels')"
               :link="channelsLink"

From cd4a4ed102ed177ba2fb5678519185bfc8f9124e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 23 Jan 2026 10:57:29 +0530
Subject: [PATCH 073/102] Updated

---
 .../contentcuration/frontend/shared/views/StudioNavigation.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 3836184911..ae86d4eed4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -127,7 +127,7 @@
 
     <nav
       v-if="tabs && tabs.length"
-      :aria-labelledby="$tr('mainNavigationLabel')"
+      :aria-label="$tr('mainNavigationLabel')"
     >
       <div
         class="studio-navigation-tabs-wrapper"

From 2191395b66a1c842ddb253dcecc570c8d6b12e7c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 23 Jan 2026 11:04:50 +0530
Subject: [PATCH 074/102] updated

---
 .../frontend/shared/views/StudioNavigation.vue              | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index ae86d4eed4..2115472789 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -176,6 +176,7 @@
       v-if="loggedIn && sidePanelOpen"
       alignment="left"
       sidePanelWidth="300px"
+      :aria-label="$tr('navigationMenu')"
       closeButtonIconType="close"
       closeButtonPosition="left"
       immersive
@@ -192,10 +193,7 @@
 
       <template #default>
         <div class="navigation-menu-content">
-          <nav
-            class="navigation-menu-nav"
-            :aria-label="$tr('navigationMenu')"
-          >
+          <nav class="navigation-menu-nav">
             <StudioNavigationOption
               :label="$tr('channels')"
               :link="channelsLink"

From f8e0dee408a378f7861af7ccd84200ab043bca17 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 2 Feb 2026 08:53:35 +0530
Subject: [PATCH 075/102] resolving review

---
 .../views/Channel/CatalogFilters.vue          |  2 +-
 .../components/CatalogFilterPanelContent.vue  | 20 +------------------
 .../channelList/views/ChannelListIndex.vue    |  6 +++---
 .../SkipNavigationLink.vue                    |  0
 .../StudioNavigation.vue                      |  4 ++--
 .../StudioNavigationOption.vue                |  0
 .../StudioNavigationTab.vue                   |  0
 .../__tests__/StudioNavigationOption.spec.js  |  2 +-
 .../__tests__/StudioNavigationTab.spec.js     |  2 +-
 9 files changed, 9 insertions(+), 27 deletions(-)
 rename contentcuration/contentcuration/frontend/shared/views/{ => StudioNavigation}/SkipNavigationLink.vue (100%)
 rename contentcuration/contentcuration/frontend/shared/views/{ => StudioNavigation}/StudioNavigation.vue (99%)
 rename contentcuration/contentcuration/frontend/shared/views/{ => StudioNavigation}/StudioNavigationOption.vue (100%)
 rename contentcuration/contentcuration/frontend/shared/views/{ => StudioNavigation}/StudioNavigationTab.vue (100%)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 7b6cb7d0e7..4107b00c4f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -21,7 +21,7 @@
       alignment="left"
       @closePanel="closeSidePanel"
     >
-      <CatalogFilterPanelContent />
+      <CatalogFilterPanelContent :style="{ padding: '24px 32px 16px' }" />
     </SidePanelModal>
   </div>
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
index 8dec290426..42aec33faa 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
@@ -1,9 +1,6 @@
 <template>
 
-  <div
-    class="filter-panel-content"
-    :style="contentStyles"
-  >
+  <div class="filter-panel-content">
     <div class="filters-container">
       <!-- Keyword search -->
       <KTextbox
@@ -102,7 +99,6 @@
 
   import { mapGetters } from 'vuex';
   import debounce from 'lodash/debounce';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../../constants';
   import { catalogFilterMixin } from '../mixins';
   import LanguageFilter from './LanguageFilter.vue';
@@ -121,12 +117,6 @@
       MultiSelect,
     },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
-    setup() {
-      const { windowIsSmall } = useKResponsiveWindow();
-      return {
-        windowIsSmall,
-      };
-    },
 
     data() {
       return {
@@ -164,14 +154,6 @@
       setKeywords() {
         return debounce(this.updateKeywords, 500);
       },
-      contentStyles() {
-        if (this.windowIsSmall) {
-          return {
-            padding: '24px 32px 16px',
-          };
-        }
-        return {};
-      },
     },
     watch: {
       keywords() {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index df2efb6313..6cb5ef640f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -74,7 +74,7 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import StudioNavigation from 'shared/views/StudioNavigation';
+  import StudioNavigation from 'shared/views/StudioNavigation/StudioNavigation.vue';
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
@@ -138,7 +138,7 @@
           label: this.$tr('catalog'),
           to: this.catalogLink,
           badgeValue: 0,
-          analyticsLabel: 'PUBLIC',
+          analyticsLabel: ChannelListTypes.PUBLIC,
         });
 
         tabs.push({
@@ -146,7 +146,7 @@
           label: this.$tr('channelSets'),
           to: this.channelSetLink,
           badgeValue: 0,
-          analyticsLabel: 'CHANNEL_SETS',
+          analyticsLabel: CHANNEL_SETS,
         });
 
         return tabs;
diff --git a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/SkipNavigationLink.vue
similarity index 100%
rename from contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
rename to contentcuration/contentcuration/frontend/shared/views/StudioNavigation/SkipNavigationLink.vue
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
similarity index 99%
rename from contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
rename to contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 2115472789..7184778c7f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -276,8 +276,8 @@
 
   import { mapActions, mapState, mapGetters } from 'vuex';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import LanguageSwitcherModal from '../languageSwitcher/LanguageSwitcherModal.vue';
-  import SidePanelModal from './SidePanelModal';
+  import LanguageSwitcherModal from '../../languageSwitcher/LanguageSwitcherModal.vue';
+  import SidePanelModal from '../SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
   import StudioNavigationOption from './StudioNavigationOption.vue';
   import StudioNavigationTab from './StudioNavigationTab.vue';
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationOption.vue
similarity index 100%
rename from contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
rename to contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationOption.vue
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
similarity index 100%
rename from contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
rename to contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
index e3f424f4fd..451e20c3c0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -1,7 +1,7 @@
 import { render, screen, cleanup } from '@testing-library/vue';
 import { createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
-import StudioNavigationOption from '../StudioNavigationOption.vue';
+import StudioNavigationOption from '../StudioNavigation/StudioNavigationOption.vue';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
index a15cbba3f1..9cc10e8771 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
-import StudioNavigationTab from '../StudioNavigationTab.vue';
+import StudioNavigationTab from '../StudioNavigation/StudioNavigationTab.vue';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);

From 7d96d2e7732ada8b1762c5ee945177f9d9ea55e6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 4 Feb 2026 09:04:51 +0530
Subject: [PATCH 076/102] used ktexttruncaotr

---
 .../StudioNavigation/StudioNavigation.vue     | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 7184778c7f..72c395094e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -43,14 +43,15 @@
           </KExternalLink>
         </template>
 
-        <template #brand>
+        <template #default>
           <div
             class="studio-navigation-title-container"
-            style="max-width: 160px"
+            style="flex: 1; min-width: 0"
           >
-            <span>
-              {{ truncatedTitle }}
-            </span>
+            <KTextTruncator
+              :text="title || $tr('title')"
+              :maxLines="1"
+            />
           </div>
         </template>
 
@@ -342,16 +343,6 @@
       copyrightLink() {
         return 'https://learningequality.org/';
       },
-      truncatedTitle() {
-        const displayTitle = this.title || this.$tr('title');
-        const actionsEl = this.$refs.studioNavigationActions;
-        const actionsWidth = actionsEl ? actionsEl.clientWidth : 0;
-        const offset = actionsWidth + 100;
-        const averageCharWidth = 10;
-        const availableWidth = this.toolbarWidth - offset;
-        const maxChars = availableWidth > 0 ? Math.floor(availableWidth / averageCharWidth) : 1;
-        return this.truncateText(displayTitle, maxChars);
-      },
       containerStyles() {
         return {
           padding: this.windowBreakpoint <= 3 ? '0 16px' : '0 24px',
@@ -565,12 +556,6 @@
           this.$analytics.trackClick('channel_list', tab.analyticsLabel);
         }
       },
-      truncateText(value, maxLength) {
-        if (value && value.length > maxLength) {
-          return value.substring(0, maxLength) + '...';
-        }
-        return value;
-      },
     },
     $trs: {
       title: 'Kolibri Studio',

From c0d98a640726724d22ea69339c1f3b81c9947000 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 4 Feb 2026 09:39:24 +0530
Subject: [PATCH 077/102] aligned the ktexttruncator with ktoolbar

---
 .../frontend/shared/views/StudioNavigation/StudioNavigation.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 72c395094e..d42c85fac6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -596,9 +596,11 @@
 
   .studio-navigation-title-container {
     padding-inline-start: 20px;
+    padding-top: 8px;
     font-size: 20px;
     font-weight: 500;
     white-space: nowrap;
+    //Given to remove the bottom spacing due to inline-block nature of KTextTruncator
   }
 
   .studio-navigation-actions {

From e9ada03192e29ff5fef518973e63a4ab0a3755b2 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 4 Feb 2026 09:40:42 +0530
Subject: [PATCH 078/102] removed aria-live

---
 .../frontend/shared/views/StudioNavigation/StudioNavigation.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index d42c85fac6..61c5414f1b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -58,7 +58,6 @@
         <template #actions>
           <div
             ref="studioNavigationActions"
-            aria-live="polite"
             class="studio-navigation-actions"
           >
             <template v-if="loggedIn">

From c0e49f455b15314e84bfc916a48bdbbf38460546 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 4 Feb 2026 12:51:11 +0530
Subject: [PATCH 079/102] updated

---
 .../shared/views/StudioNavigation/StudioNavigation.vue    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 61c5414f1b..30f089d805 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -596,10 +596,16 @@
   .studio-navigation-title-container {
     padding-inline-start: 20px;
     padding-top: 8px;
+    //Given to remove the bottom spacing due to inline-block nature of KTextTruncator
     font-size: 20px;
     font-weight: 500;
     white-space: nowrap;
-    //Given to remove the bottom spacing due to inline-block nature of KTextTruncator
+  }
+
+  ::v-deep .k-toolbar-left {
+    flex: 1;
+    min-width: 0;
+    //Added so that Ktexttruncator can properly truncate the title when necessary.
   }
 
   .studio-navigation-actions {

From 43f30a8e1e7a397234a7ce263e41212ddd57b3f5 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 12:08:59 +0530
Subject: [PATCH 080/102] don

---
 .../views/StudioNavigation/StudioNavigation.vue      | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 30f089d805..6ea436e7a0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -70,18 +70,16 @@
                   })
                 "
               >
-                <KIconButton
-                  :disabled="true"
+                <KIcon
                   icon="person"
-                  color="black"
+                  style="margin: 8px; font-size: 22px"
                 />
                 <span class="mx-2 notranslate subheading">
                   {{ user.first_name }}
                 </span>
-                <KIconButton
-                  :disabled="true"
+                <KIcon
                   icon="dropdown"
-                  color="black"
+                  style="margin: 8px; font-size: 22px"
                 />
 
                 <KDropdownMenu
@@ -680,7 +678,7 @@
   .studio-navigation-dropdown {
     display: flex;
     align-items: center;
-    padding: 4px 8px;
+    height: 40px;
     cursor: pointer;
     border-radius: $radius;
     transition: background-color 0.2s ease;

From 0388aeca2977638d08527af7cff1b5a907d6900b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 12:56:33 +0530
Subject: [PATCH 081/102] decresd offsst

---
 .../views/StudioNavigation/StudioNavigation.vue    | 14 ++++++--------
 .../views/StudioNavigation/StudioNavigationTab.vue |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 6ea436e7a0..dac2707888 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -72,14 +72,14 @@
               >
                 <KIcon
                   icon="person"
-                  style="margin: 8px; font-size: 22px"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
                 />
                 <span class="mx-2 notranslate subheading">
                   {{ user.first_name }}
                 </span>
                 <KIcon
                   icon="dropdown"
-                  style="margin: 8px; font-size: 22px"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
                 />
 
                 <KDropdownMenu
@@ -100,15 +100,13 @@
                   })
                 "
               >
-                <KIconButton
-                  :disabled="true"
+                <KIcon
                   icon="person"
-                  color="black"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
                 />
-                <KIconButton
-                  :disabled="true"
+                <KIcon
                   icon="dropdown"
-                  color="black"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
                 />
 
                 <KDropdownMenu
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
index 52b183bafa..d50542cd0d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
@@ -7,7 +7,7 @@
       tabClasses,
       $computedClass({
         ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
-        ':focus': { ...$coreOutline, outlineOffset: 0 },
+        ':focus': { ...$coreOutline, outlineOffset: '-2px' },
       }),
     ]"
     :style="tabStyles"

From c6e30badc92243c0b8468184aa56d70031f673a5 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 13:04:02 +0530
Subject: [PATCH 082/102] updated

---
 .../shared/views/StudioNavigation/StudioNavigation.vue       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index dac2707888..fe1ffb081d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -288,9 +288,10 @@
       StudioNavigationTab,
     },
     setup() {
-      const { windowBreakpoint } = useKResponsiveWindow();
+      const { windowBreakpoint, windowWidth } = useKResponsiveWindow();
       return {
         windowBreakpoint,
+        windowWidth,
       };
     },
     props: {
@@ -400,7 +401,7 @@
       },
     },
     watch: {
-      windowBreakpoint() {
+      windowWidth() {
         this.debouncedCalculateOverflow();
       },
       tabs: {

From 157207addeff0bf897040a90ea8d13d84e861ec2 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 13:11:41 +0530
Subject: [PATCH 083/102] vreated a diff file to sidepanel to manage codebas

---
 .../StudioNavigation/StudioNavigation.vue     | 162 +-------------
 .../StudioNavigationSidePanel.vue             | 207 ++++++++++++++++++
 2 files changed, 219 insertions(+), 150 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index fe1ffb081d..7478b7cc6b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -168,96 +168,13 @@
       </div>
     </nav>
 
-    <SidePanelModal
-      v-if="loggedIn && sidePanelOpen"
-      alignment="left"
-      sidePanelWidth="300px"
-      :aria-label="$tr('navigationMenu')"
-      closeButtonIconType="close"
-      closeButtonPosition="left"
-      immersive
-      fixedWidth
-      @closePanel="sidePanelOpen = false"
-    >
-      <template #header>
-        <div class="navigation-menu-header">
-          <span class="navigation-menu-title">
-            {{ $tr('title') }}
-          </span>
-        </div>
-      </template>
-
-      <template #default>
-        <div class="navigation-menu-content">
-          <nav class="navigation-menu-nav">
-            <StudioNavigationOption
-              :label="$tr('channels')"
-              :link="channelsLink"
-              icon="home"
-              @click="sidePanelOpen = false"
-            />
-
-            <StudioNavigationOption
-              v-if="user && user.is_admin"
-              :label="$tr('administration')"
-              :link="administrationLink"
-              icon="people"
-              @click="sidePanelOpen = false"
-            />
-
-            <StudioNavigationOption
-              :label="$tr('settings')"
-              :link="settingsLink"
-              icon="settings"
-              @click="sidePanelOpen = false"
-            />
-
-            <StudioNavigationOption
-              :label="$tr('changeLanguage')"
-              icon="language"
-              @select="openLanguageModal"
-            />
-
-            <StudioNavigationOption
-              :label="$tr('help')"
-              icon="openNewTab"
-              @select="navigateToHelp"
-            />
-
-            <StudioNavigationOption
-              :label="$tr('signOut')"
-              icon="logout"
-              @select="handleLogout"
-            />
-          </nav>
-
-          <div class="navigation-menu-footer">
-            <div>
-              <KLogo
-                altText="Kolibri logo"
-                :showBackground="true"
-                :size="88"
-              />
-            </div>
-
-            <KExternalLink
-              :href="copyrightLink"
-              class="navigation-menu-copyright"
-              :text="$tr('copyright', { year: new Date().getFullYear() })"
-              openInNewTab
-              @click.native="sidePanelOpen = false"
-            />
-
-            <KExternalLink
-              href="https://community.learningequality.org/c/support/studio"
-              openInNewTab
-              :text="$tr('giveFeedback')"
-              @click.native="sidePanelOpen = false"
-            />
-          </div>
-        </div>
-      </template>
-    </SidePanelModal>
+    <StudioNavigationSidePanel
+      v-if="loggedIn"
+      :isOpen="sidePanelOpen"
+      @close="sidePanelOpen = false"
+      @openLanguageModal="showLanguageModal = true"
+      @logout="logout"
+    />
     <LanguageSwitcherModal
       v-if="showLanguageModal"
       :style="{ color: $themeTokens.text }"
@@ -273,16 +190,15 @@
   import { mapActions, mapState, mapGetters } from 'vuex';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import LanguageSwitcherModal from '../../languageSwitcher/LanguageSwitcherModal.vue';
-  import SidePanelModal from '../SidePanelModal';
   import SkipNavigationLink from './SkipNavigationLink.vue';
-  import StudioNavigationOption from './StudioNavigationOption.vue';
+
   import StudioNavigationTab from './StudioNavigationTab.vue';
+  import StudioNavigationSidePanel from './StudioNavigationSidePanel.vue';
 
   export default {
     name: 'StudioNavigation',
     components: {
-      SidePanelModal,
-      StudioNavigationOption,
+      StudioNavigationSidePanel,
       SkipNavigationLink,
       LanguageSwitcherModal,
       StudioNavigationTab,
@@ -324,9 +240,6 @@
       homeLink() {
         return window.Urls?.channels() || '/';
       },
-      channelsLink() {
-        return window.Urls?.channels() || '/channels';
-      },
       administrationLink() {
         return window.Urls?.administration() || '/administration';
       },
@@ -336,9 +249,6 @@
       helpLink() {
         return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
       },
-      copyrightLink() {
-        return 'https://learningequality.org/';
-      },
       containerStyles() {
         return {
           padding: this.windowBreakpoint <= 3 ? '0 16px' : '0 24px',
@@ -484,15 +394,6 @@
         this.trackClick('Settings');
         this.closeSidePanelAndNavigate(this.settingsLink);
       },
-      navigateToHelp() {
-        this.sidePanelOpen = false;
-        this.trackClick('Help');
-        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
-      },
-      handleLogout() {
-        this.sidePanelOpen = false;
-        this.logout();
-      },
       handleUserMenuSelect(item) {
         switch (item.value) {
           case 'administration':
@@ -530,10 +431,6 @@
           this.$analytics.trackClick('general', `User dropdown - ${label}`);
         }
       },
-      openLanguageModal() {
-        this.sidePanelOpen = false;
-        this.showLanguageModal = true;
-      },
       handleResize() {
         this.updateToolbarWidth();
         this.debouncedCalculateOverflow();
@@ -556,20 +453,18 @@
     $trs: {
       title: 'Kolibri Studio',
       openMenu: 'Open navigation menu',
-      navigationMenu: 'Navigation menu',
+
       mainNavigationLabel: 'Main navigation',
       userMenuLabel: 'User menu',
       guestMenuLabel: 'Guest menu',
       moreOptions: 'More options',
-      channels: 'Channels',
+
       administration: 'Administration',
       settings: 'Settings',
       changeLanguage: 'Change language',
       help: 'Help and support',
       signIn: 'Sign in',
       signOut: 'Sign out',
-      copyright: '© {year} Learning Equality',
-      giveFeedback: 'Give feedback',
     },
   };
 
@@ -641,39 +536,6 @@
     background-color: inherit;
   }
 
-  .navigation-menu-header {
-    display: flex;
-    align-items: center;
-    height: 63.2px;
-    padding-right: 74px;
-  }
-
-  .navigation-menu-title {
-    margin-left: 16px;
-    font-size: 20px;
-    font-weight: 500;
-  }
-
-  .navigation-menu-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .navigation-menu-nav {
-    padding: 8px 0;
-  }
-
-  .navigation-menu-footer {
-    padding: 24px;
-    text-align: left;
-  }
-
-  .navigation-menu-copyright {
-    margin-bottom: 24px;
-    font-size: 14px;
-  }
-
   .studio-navigation-dropdown {
     display: flex;
     align-items: center;
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
new file mode 100644
index 0000000000..c7d7c51001
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -0,0 +1,207 @@
+<template>
+
+  <SidePanelModal
+    v-if="isOpen"
+    alignment="left"
+    sidePanelWidth="300px"
+    :aria-label="$tr('navigationMenu')"
+    closeButtonIconType="close"
+    closeButtonPosition="left"
+    immersive
+    fixedWidth
+    @closePanel="$emit('close')"
+  >
+    <template #header>
+      <div class="navigation-menu-header">
+        <span class="navigation-menu-title">
+          {{ $tr('title') }}
+        </span>
+      </div>
+    </template>
+
+    <template #default>
+      <div class="navigation-menu-content">
+        <nav class="navigation-menu-nav">
+          <StudioNavigationOption
+            :label="$tr('channels')"
+            :link="channelsLink"
+            icon="home"
+            @click="handleOptionClick"
+          />
+
+          <StudioNavigationOption
+            v-if="user && user.is_admin"
+            :label="$tr('administration')"
+            :link="administrationLink"
+            icon="people"
+            @click="handleOptionClick"
+          />
+
+          <StudioNavigationOption
+            :label="$tr('settings')"
+            :link="settingsLink"
+            icon="settings"
+            @click="handleOptionClick"
+          />
+
+          <StudioNavigationOption
+            :label="$tr('changeLanguage')"
+            icon="language"
+            @select="handleLanguageChange"
+          />
+
+          <StudioNavigationOption
+            :label="$tr('help')"
+            icon="openNewTab"
+            @select="handleHelp"
+          />
+
+          <StudioNavigationOption
+            :label="$tr('signOut')"
+            icon="logout"
+            @select="handleLogout"
+          />
+        </nav>
+
+        <div class="navigation-menu-footer">
+          <div>
+            <KLogo
+              altText="Kolibri logo"
+              :showBackground="true"
+              :size="88"
+            />
+          </div>
+
+          <KExternalLink
+            :href="copyrightLink"
+            class="navigation-menu-copyright"
+            :text="$tr('copyright', { year: new Date().getFullYear() })"
+            openInNewTab
+            @click.native="handleOptionClick"
+          />
+
+          <KExternalLink
+            href="https://community.learningequality.org/c/support/studio"
+            openInNewTab
+            :text="$tr('giveFeedback')"
+            @click.native="handleOptionClick"
+          />
+        </div>
+      </div>
+    </template>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+  import SidePanelModal from '../SidePanelModal';
+  import StudioNavigationOption from './StudioNavigationOption.vue';
+
+  export default {
+    name: 'StudioNavigationSidePanel',
+    components: {
+      SidePanelModal,
+      StudioNavigationOption,
+    },
+    props: {
+      isOpen: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState({
+        user: state => state.session.currentUser,
+      }),
+      channelsLink() {
+        return window.Urls?.channels() || '/channels';
+      },
+      administrationLink() {
+        return window.Urls?.administration() || '/administration';
+      },
+      settingsLink() {
+        return window.Urls?.settings() || '/settings';
+      },
+      helpLink() {
+        return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
+      },
+      copyrightLink() {
+        return 'https://learningequality.org/';
+      },
+    },
+    methods: {
+      handleOptionClick() {
+        this.$emit('close');
+      },
+      handleLanguageChange() {
+        this.$emit('close');
+        this.$emit('openLanguageModal');
+      },
+      handleHelp() {
+        this.$emit('close');
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', 'User dropdown - Help');
+        }
+        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
+      },
+      handleLogout() {
+        this.$emit('close');
+        this.$emit('logout');
+      },
+    },
+    $trs: {
+      title: 'Kolibri Studio',
+      navigationMenu: 'Navigation menu',
+      channels: 'Channels',
+      administration: 'Administration',
+      settings: 'Settings',
+      changeLanguage: 'Change language',
+      help: 'Help and support',
+      signOut: 'Sign out',
+      copyright: '© {year} Learning Equality',
+      giveFeedback: 'Give feedback',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .navigation-menu-header {
+    display: flex;
+    align-items: center;
+    height: 63.2px;
+    padding-right: 74px;
+  }
+
+  .navigation-menu-title {
+    margin-left: 16px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .navigation-menu-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .navigation-menu-nav {
+    padding: 8px 0;
+  }
+
+  .navigation-menu-footer {
+    padding: 24px;
+    text-align: left;
+  }
+
+  .navigation-menu-copyright {
+    margin-bottom: 24px;
+    font-size: 14px;
+  }
+
+</style>

From 07dadd1ac1c84580bd087c2f8f16c2ab18fcf8c8 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 19:05:10 +0530
Subject: [PATCH 084/102] UPdated with reviews

---
 .../StudioNavigation/StudioNavigation.vue     | 41 +++++++++----------
 .../StudioNavigationSidePanel.vue             |  6 +--
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 7478b7cc6b..3ca1913180 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -170,8 +170,8 @@
 
     <StudioNavigationSidePanel
       v-if="loggedIn"
-      :isOpen="sidePanelOpen"
-      @close="sidePanelOpen = false"
+      :isOpen="isSideNavOpen"
+      @close="isSideNavOpen = false"
       @openLanguageModal="showLanguageModal = true"
       @logout="logout"
     />
@@ -189,6 +189,7 @@
 
   import { mapActions, mapState, mapGetters } from 'vuex';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import debounce from 'lodash/debounce';
   import LanguageSwitcherModal from '../../languageSwitcher/LanguageSwitcherModal.vue';
   import SkipNavigationLink from './SkipNavigationLink.vue';
 
@@ -224,11 +225,10 @@
     },
     data() {
       return {
-        sidePanelOpen: false,
+        isSideNavOpen: false,
         showLanguageModal: false,
         toolbarWidth: 0,
         overflowMenuOptions: [],
-        resizeTimeout: null,
       };
     },
 
@@ -238,13 +238,13 @@
       }),
       ...mapGetters(['loggedIn']),
       homeLink() {
-        return window.Urls?.channels() || '/';
+        return window.Urls.channels();
       },
       administrationLink() {
-        return window.Urls?.administration() || '/administration';
+        return window.Urls.administration();
       },
       settingsLink() {
-        return window.Urls?.settings() || '/settings';
+        return window.Urls.settings();
       },
       helpLink() {
         return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
@@ -306,12 +306,16 @@
       },
       tabsWrapperStyles() {
         return {
+          // Adds horizontal padding on mobile devices to ensure the overflow menu button
+          // and its hover effect do not touch the screen edge.
           padding: this.windowBreakpoint <= 2 ? '0 8px' : 0,
         };
       },
     },
+
     watch: {
       windowWidth() {
+        this.updateToolbarWidth();
         this.debouncedCalculateOverflow();
       },
       tabs: {
@@ -323,9 +327,12 @@
         deep: true,
       },
     },
+    created() {
+      // Create debounced version of calculateOverflow
+      this.debouncedCalculateOverflow = debounce(this.calculateOverflow, 100);
+    },
     mounted() {
       this.updateToolbarWidth();
-      window.addEventListener('resize', this.handleResize);
 
       this.$nextTick(() => {
         this.calculateOverflow();
@@ -337,7 +344,9 @@
       });
     },
     beforeDestroy() {
-      window.removeEventListener('resize', this.handleResize);
+      if (this.debouncedCalculateOverflow) {
+        this.debouncedCalculateOverflow.cancel();
+      }
     },
     methods: {
       ...mapActions(['logout']),
@@ -380,11 +389,11 @@
         }
       },
       toggleSidePanel() {
-        this.sidePanelOpen = !this.sidePanelOpen;
+        this.isSideNavOpen = !this.isSideNavOpen;
       },
 
       closeSidePanelAndNavigate(url) {
-        this.sidePanelOpen = false;
+        this.isSideNavOpen = false;
         window.location.href = url;
       },
       navigateToAdministration() {
@@ -431,16 +440,6 @@
           this.$analytics.trackClick('general', `User dropdown - ${label}`);
         }
       },
-      handleResize() {
-        this.updateToolbarWidth();
-        this.debouncedCalculateOverflow();
-      },
-      debouncedCalculateOverflow() {
-        if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = setTimeout(() => {
-          this.calculateOverflow();
-        }, 100);
-      },
       updateToolbarWidth() {
         this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index c7d7c51001..8b6dbdd6b1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -117,13 +117,13 @@
         user: state => state.session.currentUser,
       }),
       channelsLink() {
-        return window.Urls?.channels() || '/channels';
+        return window.Urls.channels();
       },
       administrationLink() {
-        return window.Urls?.administration() || '/administration';
+        return window.Urls.administration();
       },
       settingsLink() {
-        return window.Urls?.settings() || '/settings';
+        return window.Urls.settings();
       },
       helpLink() {
         return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';

From a0f7b74b767e8430ab92a9010471ebab4aa3e12d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 19:23:42 +0530
Subject: [PATCH 085/102] Removed magic stirngs

---
 .../StudioNavigation/StudioNavigation.vue     | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 3ca1913180..2013586dea 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -196,6 +196,15 @@
   import StudioNavigationTab from './StudioNavigationTab.vue';
   import StudioNavigationSidePanel from './StudioNavigationSidePanel.vue';
 
+  const MenuOptions = {
+    ADMINISTRATION: 'administration',
+    SETTINGS: 'settings',
+    CHANGE_LANGUAGE: 'change-language',
+    HELP: 'help',
+    LOGOUT: 'logout',
+    LOGIN: 'login',
+  };
+
   export default {
     name: 'StudioNavigation',
     components: {
@@ -260,7 +269,7 @@
         if (this.user?.is_admin) {
           items.push({
             label: this.$tr('administration'),
-            value: 'administration',
+            value: MenuOptions.ADMINISTRATION,
             icon: 'people',
           });
         }
@@ -268,22 +277,22 @@
         items.push(
           {
             label: this.$tr('settings'),
-            value: 'settings',
+            value: MenuOptions.SETTINGS,
             icon: 'settings',
           },
           {
             label: this.$tr('changeLanguage'),
-            value: 'change-language',
+            value: MenuOptions.CHANGE_LANGUAGE,
             icon: 'language',
           },
           {
             label: this.$tr('help'),
-            value: 'help',
+            value: MenuOptions.HELP,
             icon: 'openNewTab',
           },
           {
             label: this.$tr('signOut'),
-            value: 'logout',
+            value: MenuOptions.LOGOUT,
             icon: 'logout',
           },
         );
@@ -294,12 +303,12 @@
         return [
           {
             label: this.$tr('signIn'),
-            value: 'login',
+            value: MenuOptions.LOGIN,
             icon: 'login',
           },
           {
             label: this.$tr('changeLanguage'),
-            value: 'change-language',
+            value: MenuOptions.CHANGE_LANGUAGE,
             icon: 'language',
           },
         ];
@@ -328,7 +337,6 @@
       },
     },
     created() {
-      // Create debounced version of calculateOverflow
       this.debouncedCalculateOverflow = debounce(this.calculateOverflow, 100);
     },
     mounted() {
@@ -405,32 +413,32 @@
       },
       handleUserMenuSelect(item) {
         switch (item.value) {
-          case 'administration':
+          case MenuOptions.ADMINISTRATION:
             if (this.user && this.user.is_admin) {
               this.navigateToAdministration();
             }
             break;
-          case 'settings':
+          case MenuOptions.SETTINGS:
             this.navigateToSettings();
             break;
-          case 'change-language':
+          case MenuOptions.CHANGE_LANGUAGE:
             this.showLanguageModal = true;
             break;
-          case 'help':
+          case MenuOptions.HELP:
             this.trackClick('Help');
             window.open(this.helpLink, '_blank');
             break;
-          case 'logout':
+          case MenuOptions.LOGOUT:
             this.logout();
             break;
         }
       },
       handleGuestMenuSelect(item) {
         switch (item.value) {
-          case 'login':
+          case MenuOptions.LOGIN:
             window.location.href = '/accounts/';
             break;
-          case 'change-language':
+          case MenuOptions.CHANGE_LANGUAGE:
             this.showLanguageModal = true;
             break;
         }

From 1e51d5827303bc14894607949b31cb033a7a9efa Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 9 Feb 2026 19:30:07 +0530
Subject: [PATCH 086/102] done

---
 .../views/StudioNavigation/StudioNavigation.vue  | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 2013586dea..82e75d3f76 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -377,6 +377,8 @@
             hiddenLinks.push({
               label: tab.label,
               value: tab.to,
+              // Update: Pass the analytics label here to avoid lookup later
+              analyticsLabel: tab.analyticsLabel,
             });
           }
         });
@@ -387,13 +389,7 @@
       handleOverflowSelect(option) {
         if (option && option.value) {
           this.$router.push(option.value);
-          const originalTab = this.tabs.find(t => {
-            return option.label.startsWith(t.label);
-          });
-
-          if (originalTab) {
-            this.handleTrackClick(originalTab);
-          }
+          this.handleTrackClick(option);
         }
       },
       toggleSidePanel() {
@@ -451,9 +447,9 @@
       updateToolbarWidth() {
         this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
       },
-      handleTrackClick(tab) {
-        if (this.$analytics && tab.analyticsLabel) {
-          this.$analytics.trackClick('channel_list', tab.analyticsLabel);
+      handleTrackClick(item) {
+        if (this.$analytics && item.analyticsLabel) {
+          this.$analytics.trackClick('channel_list', item.analyticsLabel);
         }
       },
     },

From 97912548c8aabd65bfc37f6e76847baad1889c55 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 10 Feb 2026 00:19:41 +0530
Subject: [PATCH 087/102] Made updates

---
 .../StudioNavigation/StudioNavigation.vue     | 12 +++++------
 .../StudioNavigationSidePanel.vue             | 20 +++++++++----------
 ...tionOption.vue => StudioSideNavOption.vue} | 15 ++++++++------
 ...on.spec.js => StudioSideNavOption.spec.js} |  6 +++---
 4 files changed, 28 insertions(+), 25 deletions(-)
 rename contentcuration/contentcuration/frontend/shared/views/StudioNavigation/{StudioNavigationOption.vue => StudioSideNavOption.vue} (90%)
 rename contentcuration/contentcuration/frontend/shared/views/__tests__/{StudioNavigationOption.spec.js => StudioSideNavOption.spec.js} (92%)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 82e75d3f76..64887441fd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -62,7 +62,7 @@
           >
             <template v-if="loggedIn">
               <button
-                class="studio-navigation-dropdown"
+                class="studio-navigation-dropdown-button"
                 :aria-label="$tr('userMenuLabel')"
                 :class="
                   $computedClass({
@@ -92,7 +92,7 @@
 
             <template v-else>
               <button
-                class="studio-navigation-dropdown"
+                class="studio-navigation-dropdown-button"
                 :aria-label="$tr('guestMenuLabel')"
                 :class="
                   $computedClass({
@@ -289,6 +289,8 @@
             label: this.$tr('help'),
             value: MenuOptions.HELP,
             icon: 'openNewTab',
+            href: this.helpLink,
+            target: '_blank',
           },
           {
             label: this.$tr('signOut'),
@@ -377,7 +379,6 @@
             hiddenLinks.push({
               label: tab.label,
               value: tab.to,
-              // Update: Pass the analytics label here to avoid lookup later
               analyticsLabel: tab.analyticsLabel,
             });
           }
@@ -422,7 +423,6 @@
             break;
           case MenuOptions.HELP:
             this.trackClick('Help');
-            window.open(this.helpLink, '_blank');
             break;
           case MenuOptions.LOGOUT:
             this.logout();
@@ -481,7 +481,7 @@
   .studio-navigation {
     top: 0;
     z-index: 5;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
+    @extend %dropshadow-2dp;
   }
 
   .studio-navigation-logo-link {
@@ -539,7 +539,7 @@
     background-color: inherit;
   }
 
-  .studio-navigation-dropdown {
+  .studio-navigation-dropdown-button {
     display: flex;
     align-items: center;
     height: 40px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index 8b6dbdd6b1..0a2ec56270 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -22,14 +22,14 @@
     <template #default>
       <div class="navigation-menu-content">
         <nav class="navigation-menu-nav">
-          <StudioNavigationOption
+          <StudioSideNavOption
             :label="$tr('channels')"
             :link="channelsLink"
             icon="home"
             @click="handleOptionClick"
           />
 
-          <StudioNavigationOption
+          <StudioSideNavOption
             v-if="user && user.is_admin"
             :label="$tr('administration')"
             :link="administrationLink"
@@ -37,26 +37,26 @@
             @click="handleOptionClick"
           />
 
-          <StudioNavigationOption
+          <StudioSideNavOption
             :label="$tr('settings')"
             :link="settingsLink"
             icon="settings"
             @click="handleOptionClick"
           />
 
-          <StudioNavigationOption
+          <StudioSideNavOption
             :label="$tr('changeLanguage')"
             icon="language"
             @select="handleLanguageChange"
           />
 
-          <StudioNavigationOption
+          <StudioSideNavOption
             :label="$tr('help')"
             icon="openNewTab"
             @select="handleHelp"
           />
 
-          <StudioNavigationOption
+          <StudioSideNavOption
             :label="$tr('signOut')"
             icon="logout"
             @select="handleLogout"
@@ -98,13 +98,13 @@
 
   import { mapState } from 'vuex';
   import SidePanelModal from '../SidePanelModal';
-  import StudioNavigationOption from './StudioNavigationOption.vue';
+  import StudioSideNavOption from './StudioSideNavOption.vue';
 
   export default {
     name: 'StudioNavigationSidePanel',
     components: {
       SidePanelModal,
-      StudioNavigationOption,
+      StudioSideNavOption,
     },
     props: {
       isOpen: {
@@ -174,7 +174,7 @@
   .navigation-menu-header {
     display: flex;
     align-items: center;
-    height: 63.2px;
+    height: 56px;
     padding-right: 74px;
   }
 
@@ -191,7 +191,7 @@
   }
 
   .navigation-menu-nav {
-    padding: 8px 0;
+    padding: 8px 12px;
   }
 
   .navigation-menu-footer {
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
similarity index 90%
rename from contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationOption.vue
rename to contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
index 35a9f39d8b..381820101c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
@@ -12,11 +12,11 @@
       @keydown.enter="handleClick"
     >
       <slot>
-        <KIconButton
+        <KIcon
           v-if="icon"
-          :disabled="true"
           :icon="icon"
           :color="optionIconColor"
+          class="menu-icon"
         />
         <span
           v-if="label"
@@ -55,7 +55,7 @@
         return {
           color: this.$themeTokens.text,
           ':hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.048)',
+            backgroundColor: this.$themePalette.grey.v_200,
           },
           ':focus': this.$coreOutline,
         };
@@ -84,9 +84,9 @@
 
   .studio-navigation-option {
     display: flex;
-    gap: 16px;
     align-items: center;
-    padding: 0 16px;
+    padding: 8px;
+    margin: 4px 8px;
     font-size: 16px;
     text-decoration: none;
     cursor: pointer;
@@ -99,9 +99,12 @@
     }
   }
 
+  .menu-icon {
+    margin-right: 16px;
+  }
+
   .option-label {
     flex: 1;
-    padding: 12px 0;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioSideNavOption.spec.js
similarity index 92%
rename from contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
rename to contentcuration/contentcuration/frontend/shared/views/__tests__/StudioSideNavOption.spec.js
index 451e20c3c0..a5443e7df8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioSideNavOption.spec.js
@@ -1,7 +1,7 @@
 import { render, screen, cleanup } from '@testing-library/vue';
 import { createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
-import StudioNavigationOption from '../StudioNavigation/StudioNavigationOption.vue';
+import StudioSideNavOption from '../StudioNavigation/StudioSideNavOption.vue';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -31,7 +31,7 @@ const renderComponent = (props = {}, options = {}) => {
     ],
   });
 
-  return render(StudioNavigationOption, {
+  return render(StudioSideNavOption, {
     localVue,
     router,
     props,
@@ -39,7 +39,7 @@ const renderComponent = (props = {}, options = {}) => {
   });
 };
 
-describe('StudioNavigationOption', () => {
+describe('StudioSideNavOption', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });

From 42cdf3c6d679ff92714462162ce769d874a47a14 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 10 Feb 2026 00:28:53 +0530
Subject: [PATCH 088/102] Made updates

---
 .../StudioNavigationSidePanel.vue             | 74 ++++++++++---------
 .../StudioNavigation/StudioSideNavOption.vue  | 10 +--
 2 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index 0a2ec56270..111ac932f9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -21,46 +21,48 @@
 
     <template #default>
       <div class="navigation-menu-content">
-        <nav class="navigation-menu-nav">
-          <StudioSideNavOption
-            :label="$tr('channels')"
-            :link="channelsLink"
-            icon="home"
-            @click="handleOptionClick"
-          />
+        <nav>
+          <ul class="navigation-menu-nav">
+            <StudioSideNavOption
+              :label="$tr('channels')"
+              :link="channelsLink"
+              icon="home"
+              @click="handleOptionClick"
+            />
 
-          <StudioSideNavOption
-            v-if="user && user.is_admin"
-            :label="$tr('administration')"
-            :link="administrationLink"
-            icon="people"
-            @click="handleOptionClick"
-          />
+            <StudioSideNavOption
+              v-if="user && user.is_admin"
+              :label="$tr('administration')"
+              :link="administrationLink"
+              icon="people"
+              @click="handleOptionClick"
+            />
 
-          <StudioSideNavOption
-            :label="$tr('settings')"
-            :link="settingsLink"
-            icon="settings"
-            @click="handleOptionClick"
-          />
+            <StudioSideNavOption
+              :label="$tr('settings')"
+              :link="settingsLink"
+              icon="settings"
+              @click="handleOptionClick"
+            />
 
-          <StudioSideNavOption
-            :label="$tr('changeLanguage')"
-            icon="language"
-            @select="handleLanguageChange"
-          />
+            <StudioSideNavOption
+              :label="$tr('changeLanguage')"
+              icon="language"
+              @select="handleLanguageChange"
+            />
 
-          <StudioSideNavOption
-            :label="$tr('help')"
-            icon="openNewTab"
-            @select="handleHelp"
-          />
+            <StudioSideNavOption
+              :label="$tr('help')"
+              icon="openNewTab"
+              @select="handleHelp"
+            />
 
-          <StudioSideNavOption
-            :label="$tr('signOut')"
-            icon="logout"
-            @select="handleLogout"
-          />
+            <StudioSideNavOption
+              :label="$tr('signOut')"
+              icon="logout"
+              @select="handleLogout"
+            />
+          </ul>
         </nav>
 
         <div class="navigation-menu-footer">
@@ -192,6 +194,8 @@
 
   .navigation-menu-nav {
     padding: 8px 12px;
+    margin: 0;
+    list-style: none;
   }
 
   .navigation-menu-footer {
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
index 381820101c..beedf946f4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
@@ -1,10 +1,10 @@
 <template>
 
-  <div>
+  <li>
     <a
       ref="menuItem"
       :href="link"
-      class="studio-navigation-option"
+      class="studio-sidenav-option"
       role="menuitem"
       :class="$computedClass(optionStyle)"
       tabindex="0"
@@ -26,7 +26,7 @@
         </span>
       </slot>
     </a>
-  </div>
+  </li>
 
 </template>
 
@@ -34,7 +34,7 @@
 <script>
 
   export default {
-    name: 'StudioNavigationOption',
+    name: 'StudioSideNavOption',
     props: {
       label: {
         type: String,
@@ -82,7 +82,7 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  .studio-navigation-option {
+  .studio-sidenav-option {
     display: flex;
     align-items: center;
     padding: 8px;

From be62a2fe1d27b6d48d2942b0cb6e5a9878ba53c2 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 10 Feb 2026 00:38:58 +0530
Subject: [PATCH 089/102] Made updates

---
 .../StudioNavigation/StudioNavigation.vue     |  6 +-
 .../StudioNavigation/StudioNavigationTab.vue  | 62 ++++++++++---------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 64887441fd..46db304218 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -129,7 +129,7 @@
         class="studio-navigation-tabs-wrapper"
         :style="tabsWrapperStyles"
       >
-        <div
+        <ul
           ref="tabsContainer"
           class="studio-navigation-tabs-container"
           :style="containerStyles"
@@ -145,7 +145,7 @@
           >
             {{ tab.label }}
           </StudioNavigationTab>
-        </div>
+        </ul>
 
         <div
           v-if="overflowMenuOptions.length > 0"
@@ -522,7 +522,9 @@
     flex: 1;
     flex-wrap: wrap;
     height: 48px;
+    margin: 0;
     overflow: hidden;
+    list-style: none;
   }
 
   .studio-navigation-tab-item {
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
index d50542cd0d..d4fd048c29 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
@@ -1,36 +1,37 @@
 <template>
 
-  <RouterLink
-    v-if="to"
-    :to="to"
-    :class="[
-      tabClasses,
-      $computedClass({
-        ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
-        ':focus': { ...$coreOutline, outlineOffset: '-2px' },
-      }),
-    ]"
-    :style="tabStyles"
-    :aria-current="isActive ? 'Navigation' : null"
-    :tabindex="tabindex"
-  >
-    <span class="studio-navigation-tab-content">
-      <slot></slot>
-      <span
-        v-if="showBadge"
-        class="studio-navigation-tab-badge"
-        :style="badgeStyles"
-      >
-        {{ $formatNumber(badgeValue) }}
+  <li v-if="to">
+    <RouterLink
+      :to="to"
+      :class="[
+        tabClasses,
+        $computedClass({
+          ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
+          ':focus': { ...$coreOutline, outlineOffset: '-2px' },
+        }),
+      ]"
+      :style="tabStyles"
+      :aria-current="isActive ? 'page' : null"
+      :tabindex="tabindex"
+    >
+      <span class="studio-navigation-tab-content">
+        <slot></slot>
+        <span
+          v-if="showBadge"
+          class="studio-navigation-tab-badge"
+          :style="badgeStyles"
+        >
+          {{ $formatNumber(badgeValue) }}
+        </span>
       </span>
-    </span>
-    <span
-      v-if="isActive"
-      class="studio-navigation-tab-indicator"
-      :style="indicatorStyles"
-      aria-hidden="true"
-    ></span>
-  </RouterLink>
+      <span
+        v-if="isActive"
+        class="studio-navigation-tab-indicator"
+        :style="indicatorStyles"
+        aria-hidden="true"
+      ></span>
+    </RouterLink>
+  </li>
 
 </template>
 
@@ -105,6 +106,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
     min-width: 160px;
     max-width: 264px;
     height: 100%;

From d5efc6842cbc0884f00fdc1af40c477c8a8fe483 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 10 Feb 2026 00:52:19 +0530
Subject: [PATCH 090/102] Made updates

---
 .../StudioNavigationSidePanel.vue                 |  6 ++++++
 .../StudioNavigation/StudioSideNavOption.vue      | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index 111ac932f9..c58bdfec1d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -27,6 +27,7 @@
               :label="$tr('channels')"
               :link="channelsLink"
               icon="home"
+              :active="isActive(channelsLink)"
               @click="handleOptionClick"
             />
 
@@ -35,6 +36,7 @@
               :label="$tr('administration')"
               :link="administrationLink"
               icon="people"
+              :active="isActive(administrationLink)"
               @click="handleOptionClick"
             />
 
@@ -42,6 +44,7 @@
               :label="$tr('settings')"
               :link="settingsLink"
               icon="settings"
+              :active="isActive(settingsLink)"
               @click="handleOptionClick"
             />
 
@@ -135,6 +138,9 @@
       },
     },
     methods: {
+      isActive(link) {
+        return window.location.pathname === link;
+      },
       handleOptionClick() {
         this.$emit('close');
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
index beedf946f4..3528b22902 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
@@ -49,9 +49,24 @@
         type: String,
         required: true,
       },
+      active: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       optionStyle() {
+        if (this.active) {
+          return {
+            color: this.$themeTokens.primaryDark,
+            fontWeight: 'bold',
+            backgroundColor: this.$themePalette.grey.v_200,
+            ':hover': {
+              backgroundColor: this.$themePalette.grey.v_300,
+            },
+            ':focus': this.$coreOutline,
+          };
+        }
         return {
           color: this.$themeTokens.text,
           ':hover': {

From 8032325878b8b1550c280e675fc28cee7cd50cba Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 10 Feb 2026 01:50:35 +0530
Subject: [PATCH 091/102] Made updates

---
 .../frontend/shared/views/StudioNavigation/StudioNavigation.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 46db304218..9364264892 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -177,7 +177,6 @@
     />
     <LanguageSwitcherModal
       v-if="showLanguageModal"
-      :style="{ color: $themeTokens.text }"
       @cancel="showLanguageModal = false"
     />
   </div>

From 51dbfd80c8daa9d7454cfee83f03496da603311e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 10 Feb 2026 02:09:14 +0530
Subject: [PATCH 092/102] corrected test suits

---
 .../frontend/shared/views/__tests__/StudioNavigation.spec.js    | 2 +-
 .../frontend/shared/views/__tests__/StudioNavigationTab.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
index cbe6e60231..736b7b14f5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueRouter from 'vue-router';
-import StudioNavigation from '../StudioNavigation';
+import StudioNavigation from '../StudioNavigation/StudioNavigation.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
index 9cc10e8771..7737f5dea7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
@@ -100,7 +100,7 @@ describe('StudioNavigationTab', () => {
       });
 
       const link = screen.getByRole('link', { name: 'Channels' });
-      expect(link).toHaveAttribute('aria-current', 'Navigation');
+      expect(link).toHaveAttribute('aria-current', 'page');
     });
 
     it('should not show active indicator when not on current page', async () => {

From b524296bb574b1b28fdb6f8e79a9f4626fab9c76 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Mon, 9 Feb 2026 20:41:57 +0000
Subject: [PATCH 093/102] [pre-commit.ci lite] apply automatic fixes

---
 .../sidePanels/SubmitToCommunityLibrarySidePanel/index.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index 76f79117b0..fe643a2184 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -631,8 +631,8 @@
   .content {
     display: flex;
     flex-direction: column;
-    padding: 24px 32px 16px;
     gap: 16px;
+    padding: 24px 32px 16px;
     margin-top: -24px;
     line-height: 140%;
   }

From 921d6215a5aeb959f64d079a7b7d5ee59bb3bb47 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 12:59:39 +0530
Subject: [PATCH 094/102] FIX: Resolve merge conflicts and lint errors in
 ChannelListIndex.vue

---
 .../channelList/views/ChannelListIndex.vue     | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 6cb5ef640f..83e7976db6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -98,7 +98,6 @@
     name: 'ChannelListIndex',
     components: {
       StudioNavigation,
-      ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
       PolicyModals,
@@ -141,6 +140,14 @@
           analyticsLabel: ChannelListTypes.PUBLIC,
         });
 
+        tabs.push({
+          id: 'communityLibrary',
+          label: this.communityLibraryLabel$(),
+          to: this.communityLibraryLink,
+          badgeValue: 0,
+          analyticsLabel: 'COMMUNITY_LIBRARY',
+        });
+
         tabs.push({
           id: CHANNEL_SETS,
           label: this.$tr('channelSets'),
@@ -197,15 +204,6 @@
       homeLink() {
         return this.libraryMode ? window.Urls.base() : window.Urls.channels();
       },
-      publicTabClick() {
-        return this.trackTabClick.bind(this, ChannelListTypes.PUBLIC);
-      },
-      communityLibraryTabClick() {
-        return this.trackTabClick.bind(this, 'COMMUNITY_LIBRARY');
-      },
-      channelSetsTabClick() {
-        return this.trackTabClick.bind(this, CHANNEL_SETS);
-      },
     },
     watch: {
       $route(route) {

From e5442ace1f60eeb383ac1e63473423d20fd085ed Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 13:17:13 +0530
Subject: [PATCH 095/102] FEAT: Add notification indicators to StudioNavigation
 and SidePanel

---
 .../StudioNavigation/StudioNavigation.vue     | 61 +++++++++++++++++--
 .../StudioNavigationSidePanel.vue             | 45 ++++++++++++++
 2 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 9364264892..80be0a6fcf 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -70,10 +70,12 @@
                   })
                 "
               >
-                <KIcon
-                  icon="person"
-                  style="margin: 8px; margin-top: 0; font-size: 22px"
-                />
+                <WithNotificationIndicator>
+                  <KIcon
+                    icon="person"
+                    style="margin: 8px; margin-top: 0; font-size: 22px"
+                  />
+                </WithNotificationIndicator>
                 <span class="mx-2 notranslate subheading">
                   {{ user.first_name }}
                 </span>
@@ -86,7 +88,31 @@
                   :options="userMenuItems"
                   :hasIcons="true"
                   @select="handleUserMenuSelect"
-                />
+                >
+                  <template #option="{ option }">
+                    <template v-if="option.value === 'notifications'">
+                      <div style="display: flex; align-items: center; width: 100%">
+                        <WithNotificationIndicator style="margin-right: 16px">
+                          <KIcon
+                            :icon="option.icon"
+                            :color="$themeTokens.text"
+                          />
+                        </WithNotificationIndicator>
+                        <span>{{ option.label }}</span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div style="display: flex; align-items: center; width: 100%">
+                        <KIcon
+                          :icon="option.icon"
+                          style="margin-right: 16px"
+                          :color="$themeTokens.text"
+                        />
+                        <span>{{ option.label }}</span>
+                      </div>
+                    </template>
+                  </template>
+                </KDropdownMenu>
               </button>
             </template>
 
@@ -189,14 +215,18 @@
   import { mapActions, mapState, mapGetters } from 'vuex';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import debounce from 'lodash/debounce';
+  import WithNotificationIndicator from '../WithNotificationIndicator.vue';
   import LanguageSwitcherModal from '../../languageSwitcher/LanguageSwitcherModal.vue';
   import SkipNavigationLink from './SkipNavigationLink.vue';
 
   import StudioNavigationTab from './StudioNavigationTab.vue';
   import StudioNavigationSidePanel from './StudioNavigationSidePanel.vue';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { Modals } from 'shared/constants';
 
   const MenuOptions = {
     ADMINISTRATION: 'administration',
+    NOTIFICATIONS: 'notifications',
     SETTINGS: 'settings',
     CHANGE_LANGUAGE: 'change-language',
     HELP: 'help',
@@ -211,12 +241,15 @@
       SkipNavigationLink,
       LanguageSwitcherModal,
       StudioNavigationTab,
+      WithNotificationIndicator,
     },
     setup() {
       const { windowBreakpoint, windowWidth } = useKResponsiveWindow();
+      const { notificationsLabel$ } = communityChannelsStrings;
       return {
         windowBreakpoint,
         windowWidth,
+        notificationsLabel$,
       };
     },
     props: {
@@ -273,6 +306,12 @@
           });
         }
 
+        items.push({
+          label: this.notificationsLabel$(),
+          value: MenuOptions.NOTIFICATIONS,
+          icon: 'bell',
+        });
+
         items.push(
           {
             label: this.$tr('settings'),
@@ -414,6 +453,9 @@
               this.navigateToAdministration();
             }
             break;
+          case MenuOptions.NOTIFICATIONS:
+            this.showNotificationsModal();
+            break;
           case MenuOptions.SETTINGS:
             this.navigateToSettings();
             break;
@@ -438,6 +480,15 @@
             break;
         }
       },
+      showNotificationsModal() {
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            modal: Modals.NOTIFICATIONS,
+          },
+        });
+        this.trackClick('Notifications');
+      },
       trackClick(label) {
         if (this.$analytics) {
           this.$analytics.trackClick('general', `User dropdown - ${label}`);
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index c58bdfec1d..ce67cf310a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -40,6 +40,26 @@
               @click="handleOptionClick"
             />
 
+            <StudioSideNavOption
+              :label="notificationsLabel$()"
+              icon="bell"
+              @click="showNotificationsModal"
+              @keydown.native.enter="showNotificationsModal"
+            >
+              <template #default>
+                <WithNotificationIndicator>
+                  <KIcon
+                    icon="bell"
+                    class="menu-icon"
+                    :color="$themeTokens.text"
+                  />
+                </WithNotificationIndicator>
+                <span class="option-label">
+                  {{ notificationsLabel$() }}
+                </span>
+              </template>
+            </StudioSideNavOption>
+
             <StudioSideNavOption
               :label="$tr('settings')"
               :link="settingsLink"
@@ -94,6 +114,7 @@
         </div>
       </div>
     </template>
+    <NotificationsModal />
   </SidePanelModal>
 
 </template>
@@ -103,13 +124,25 @@
 
   import { mapState } from 'vuex';
   import SidePanelModal from '../SidePanelModal';
+  import WithNotificationIndicator from '../WithNotificationIndicator.vue';
   import StudioSideNavOption from './StudioSideNavOption.vue';
+  import { Modals } from 'shared/constants';
+  import NotificationsModal from 'shared/views/NotificationsModal/index.vue';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
 
   export default {
     name: 'StudioNavigationSidePanel',
     components: {
+      NotificationsModal,
       SidePanelModal,
       StudioSideNavOption,
+      WithNotificationIndicator,
+    },
+    setup() {
+      const { notificationsLabel$ } = communityChannelsStrings;
+      return {
+        notificationsLabel$,
+      };
     },
     props: {
       isOpen: {
@@ -159,6 +192,18 @@
         this.$emit('close');
         this.$emit('logout');
       },
+      showNotificationsModal() {
+        this.$emit('close');
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            modal: Modals.NOTIFICATIONS,
+          },
+        });
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', 'User dropdown - Notifications');
+        }
+      },
     },
     $trs: {
       title: 'Kolibri Studio',

From a94f78c64ae7ca0a16f207e36ab3a21ce70dd5e6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 14:14:23 +0530
Subject: [PATCH 096/102] FIX: Move NotificationsModal into explicit default
 slot

---
 .../shared/views/StudioNavigation/StudioNavigationSidePanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index ce67cf310a..178b70aad0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -113,8 +113,8 @@
           />
         </div>
       </div>
+      <NotificationsModal />
     </template>
-    <NotificationsModal />
   </SidePanelModal>
 
 </template>

From 1172afb8e995f7496c2497bb8a12c10803a11912 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 15:01:52 +0530
Subject: [PATCH 097/102] Resolved merge issues

---
 .../StudioNavigation/StudioNavigation.vue     | 19 ++++++++++++++-----
 .../StudioNavigationSidePanel.vue             |  8 ++------
 .../StudioNavigation/StudioSideNavOption.vue  |  1 +
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 80be0a6fcf..7d45240b63 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -73,7 +73,7 @@
                 <WithNotificationIndicator>
                   <KIcon
                     icon="person"
-                    style="margin: 8px; margin-top: 0; font-size: 22px"
+                    style="margin: 8px; font-size: 22px"
                   />
                 </WithNotificationIndicator>
                 <span class="mx-2 notranslate subheading">
@@ -87,7 +87,7 @@
                 <KDropdownMenu
                   :options="userMenuItems"
                   :hasIcons="true"
-                  @select="handleUserMenuSelect"
+                  @select="(item, event) => handleUserMenuSelect(item, event)"
                 >
                   <template #option="{ option }">
                     <template v-if="option.value === 'notifications'">
@@ -138,7 +138,7 @@
                 <KDropdownMenu
                   :options="guestMenuItems"
                   :hasIcons="true"
-                  @select="handleGuestMenuSelect"
+                  @select="(item, event) => handleGuestMenuSelect(item, event)"
                 />
               </button>
             </template>
@@ -205,6 +205,7 @@
       v-if="showLanguageModal"
       @cancel="showLanguageModal = false"
     />
+    <NotificationsModal />
   </div>
 
 </template>
@@ -221,6 +222,7 @@
 
   import StudioNavigationTab from './StudioNavigationTab.vue';
   import StudioNavigationSidePanel from './StudioNavigationSidePanel.vue';
+  import NotificationsModal from 'shared/views/NotificationsModal/index.vue';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import { Modals } from 'shared/constants';
 
@@ -242,6 +244,7 @@
       LanguageSwitcherModal,
       StudioNavigationTab,
       WithNotificationIndicator,
+      NotificationsModal,
     },
     setup() {
       const { windowBreakpoint, windowWidth } = useKResponsiveWindow();
@@ -446,7 +449,10 @@
         this.trackClick('Settings');
         this.closeSidePanelAndNavigate(this.settingsLink);
       },
-      handleUserMenuSelect(item) {
+      handleUserMenuSelect(item, event) {
+        if (event) {
+          event.preventDefault();
+        }
         switch (item.value) {
           case MenuOptions.ADMINISTRATION:
             if (this.user && this.user.is_admin) {
@@ -470,7 +476,10 @@
             break;
         }
       },
-      handleGuestMenuSelect(item) {
+      handleGuestMenuSelect(item, event) {
+        if (event) {
+          event.preventDefault();
+        }
         switch (item.value) {
           case MenuOptions.LOGIN:
             window.location.href = '/accounts/';
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index 178b70aad0..4d2a7c9006 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -47,14 +47,13 @@
               @keydown.native.enter="showNotificationsModal"
             >
               <template #default>
-                <WithNotificationIndicator>
+                <WithNotificationIndicator style="margin-right: 16px">
                   <KIcon
                     icon="bell"
-                    class="menu-icon"
                     :color="$themeTokens.text"
                   />
                 </WithNotificationIndicator>
-                <span class="option-label">
+                <span style="flex: 1">
                   {{ notificationsLabel$() }}
                 </span>
               </template>
@@ -113,7 +112,6 @@
           />
         </div>
       </div>
-      <NotificationsModal />
     </template>
   </SidePanelModal>
 
@@ -127,13 +125,11 @@
   import WithNotificationIndicator from '../WithNotificationIndicator.vue';
   import StudioSideNavOption from './StudioSideNavOption.vue';
   import { Modals } from 'shared/constants';
-  import NotificationsModal from 'shared/views/NotificationsModal/index.vue';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
 
   export default {
     name: 'StudioNavigationSidePanel',
     components: {
-      NotificationsModal,
       SidePanelModal,
       StudioSideNavOption,
       WithNotificationIndicator,
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
index 3528b22902..074e751747 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
@@ -115,6 +115,7 @@
   }
 
   .menu-icon {
+    top: 0;
     margin-right: 16px;
   }
 

From 288bac06d9c88507fd9ca3ce7dd22f29af5564bb Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 21:34:29 +0530
Subject: [PATCH 098/102] Fix: Fixed kdropdown size

---
 .../StudioNavigation/StudioNavigation.vue     | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 7d45240b63..095fa8e8ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -90,27 +90,25 @@
                   @select="(item, event) => handleUserMenuSelect(item, event)"
                 >
                   <template #option="{ option }">
-                    <template v-if="option.value === 'notifications'">
-                      <div style="display: flex; align-items: center; width: 100%">
-                        <WithNotificationIndicator style="margin-right: 16px">
-                          <KIcon
-                            :icon="option.icon"
-                            :color="$themeTokens.text"
-                          />
-                        </WithNotificationIndicator>
-                        <span>{{ option.label }}</span>
-                      </div>
-                    </template>
-                    <template v-else>
-                      <div style="display: flex; align-items: center; width: 100%">
+                    <div style="display: flex; align-items: center; padding: 0 16px">
+                      <WithNotificationIndicator
+                        v-if="option.value === 'notifications'"
+                        style="margin-right: 16px"
+                      >
                         <KIcon
                           :icon="option.icon"
-                          style="margin-right: 16px"
                           :color="$themeTokens.text"
+                          style="font-size: 20px"
                         />
-                        <span>{{ option.label }}</span>
-                      </div>
-                    </template>
+                      </WithNotificationIndicator>
+                      <KIcon
+                        v-else
+                        :icon="option.icon"
+                        :color="$themeTokens.text"
+                        style="margin-right: 16px; font-size: 18px"
+                      />
+                      <span style="font-size: 16px">{{ option.label }}</span>
+                    </div>
                   </template>
                 </KDropdownMenu>
               </button>

From aa6d820355c6a28b3991619f2f8ae2a8ab7aefae Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 22:15:11 +0530
Subject: [PATCH 099/102] Fixing Kdropdown sizes

---
 .../views/StudioNavigation/StudioNavigation.vue     | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 095fa8e8ac..5dcd176603 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -90,22 +90,17 @@
                   @select="(item, event) => handleUserMenuSelect(item, event)"
                 >
                   <template #option="{ option }">
-                    <div style="display: flex; align-items: center; padding: 0 16px">
-                      <WithNotificationIndicator
-                        v-if="option.value === 'notifications'"
-                        style="margin-right: 16px"
-                      >
+                    <div style="display: flex; align-items: center; height: 48px; padding: 0 16px">
+                      <WithNotificationIndicator v-if="option.value === 'notifications'">
                         <KIcon
                           :icon="option.icon"
-                          :color="$themeTokens.text"
-                          style="font-size: 20px"
+                          style="min-width: 56px; font-size: 20px"
                         />
                       </WithNotificationIndicator>
                       <KIcon
                         v-else
                         :icon="option.icon"
-                        :color="$themeTokens.text"
-                        style="margin-right: 16px; font-size: 18px"
+                        style="min-width: 56px; font-size: 20px"
                       />
                       <span style="font-size: 16px">{{ option.label }}</span>
                     </div>

From 97d94abf3cceb31a77de0939da57319d575b87b4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 22:57:08 +0530
Subject: [PATCH 100/102] Fixing Kdropdown sizes

---
 .../StudioNavigation/StudioNavigation.vue     | 24 +++++++++++--------
 .../views/WithNotificationIndicator.vue       |  4 ++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
index 5dcd176603..6e6245af4a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -70,10 +70,10 @@
                   })
                 "
               >
-                <WithNotificationIndicator>
+                <WithNotificationIndicator style="margin: 8px">
                   <KIcon
                     icon="person"
-                    style="margin: 8px; font-size: 22px"
+                    style="font-size: 22px"
                   />
                 </WithNotificationIndicator>
                 <span class="mx-2 notranslate subheading">
@@ -91,17 +91,21 @@
                 >
                   <template #option="{ option }">
                     <div style="display: flex; align-items: center; height: 48px; padding: 0 16px">
-                      <WithNotificationIndicator v-if="option.value === 'notifications'">
+                      <div style="display: flex; align-items: center; min-width: 56px">
+                        <WithNotificationIndicator v-if="option.value === 'notifications'">
+                          <KIcon
+                            :icon="option.icon"
+                            style="font-size: 20px"
+                          />
+                        </WithNotificationIndicator>
+
                         <KIcon
+                          v-else
                           :icon="option.icon"
-                          style="min-width: 56px; font-size: 20px"
+                          style="font-size: 20px"
                         />
-                      </WithNotificationIndicator>
-                      <KIcon
-                        v-else
-                        :icon="option.icon"
-                        style="min-width: 56px; font-size: 20px"
-                      />
+                      </div>
+
                       <span style="font-size: 16px">{{ option.label }}</span>
                     </div>
                   </template>
diff --git a/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue b/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue
index 802ff16ab7..ddc41b4f56 100644
--- a/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue
@@ -37,8 +37,8 @@
 
   .notification-indicator {
     position: absolute;
-    top: 8px;
-    right: 9px;
+    top: 0;
+    right: 0;
     width: 11px;
     height: 11px;
     background-color: v-bind('$themePalette.red.v_500');

From e83f0615552d2b7cd62b1c3bc0d9c776ae299c6d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 23:15:54 +0530
Subject: [PATCH 101/102] Fix: Resolved rtl issues in the red dot usage for
 notification

---
 .../StudioNavigationSidePanel.vue              | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
index 4d2a7c9006..f5fe26bcdf 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -47,15 +47,15 @@
               @keydown.native.enter="showNotificationsModal"
             >
               <template #default>
-                <WithNotificationIndicator style="margin-right: 16px">
-                  <KIcon
-                    icon="bell"
-                    :color="$themeTokens.text"
-                  />
-                </WithNotificationIndicator>
-                <span style="flex: 1">
-                  {{ notificationsLabel$() }}
-                </span>
+                <div style="display: flex; gap: 16px">
+                  <WithNotificationIndicator>
+                    <KIcon icon="bell" />
+                  </WithNotificationIndicator>
+
+                  <span>
+                    {{ notificationsLabel$() }}
+                  </span>
+                </div>
               </template>
             </StudioSideNavOption>
 

From b70676f1de6f408d61b2c94c333f29e25de09326 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 13 Apr 2026 23:19:31 +0530
Subject: [PATCH 102/102] Resolved some indentaion

---
 .../channelEdit/components/sidePanels/PublishSidePanel.vue  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index 9372bb374c..9a19b23dc9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -12,10 +12,8 @@
       </template>
 
       <template #default>
-        <div
-          style="padding: 24px 32px 16px;"
-        >
-        <component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
+        <div style="padding: 24px 32px 16px">
+          <component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
             <KRadioButton
               v-if="showDraftMode"
               :label="modeLive$()"