From a41ee026f8676965294f718cf9d514817f58d1f7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 14:20:45 +0530
Subject: [PATCH 01/72] 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 582ade46252601728db53fac7ad0886976a652da Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 14:28:54 +0530
Subject: [PATCH 02/72] 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 43e21f42c9410d3309c2ed767370cc66f4fd824c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 14:39:00 +0530
Subject: [PATCH 03/72] Updated

---
 .../channelList/views/ChannelListIndex.vue    |  33 +-
 .../shared/views/StudioNavigation.vue         | 288 +++++++-----------
 2 files changed, 122 insertions(+), 199 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index c45f88b571..7d20293961 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -27,41 +27,36 @@
         {{ isFAQPage ? $tr('frequentlyAskedQuestions') : $tr('libraryTitle') }}
       </VToolbarTitle>
     </VToolbar>
-    <AppBar v-else>
-      <template
-        v-if="loggedIn"
+    <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="channelSetLink"
           @click="channelSetsTabClick"
         >
           {{ $tr('channelSets') }}
-        </VTab>
+        </StudioNavigationTab>
       </template>
-    </AppBar>
+    </StudioNavigation>
     <VContent>
       <StudioOfflineAlert
         v-if="!isCatalogPage"
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index f2bb9797f6..8f1a02869e 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 {
@@ -695,34 +644,21 @@
   .side-panel-nav {
     flex: 1;
     padding: 16px 0;
+    width: 100%;
   }
 
   .side-panel-nav-item {
     display: flex;
-    gap: 16px;
     align-items: center;
+    gap: 12px;
     width: 100%;
-    padding: 12px 24px;
-    font-size: 16px;
+    margin: 0;
+    padding: 8px 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;
-    }
+    justify-content: flex-start;
   }
 
   .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

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

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 7d20293961..a4d82b4fc7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -28,27 +28,25 @@
       </VToolbarTitle>
     </VToolbar>
     <StudioNavigation v-else>
-      <template 
-        v-if="loggedIn" 
+      <template
+        v-if="loggedIn"
         #tabs
       >
         <StudioNavigationTab
           v-for="listType in lists"
           :key="listType.id"
           :to="getChannelLink(listType)"
-          :badge-value="invitationsByListCounts[listType]"
+          :badgeValue="invitationsByListCounts[listType]"
           @click="trackTabClick(listType)"
         >
           {{ translateConstant(listType) }}
         </StudioNavigationTab>
-        
         <StudioNavigationTab
           :to="catalogLink"
           @click="publicTabClick"
         >
           {{ $tr('catalog') }}
         </StudioNavigationTab>
-        
         <StudioNavigationTab
           :to="channelSetLink"
           @click="channelSetsTabClick"
@@ -132,7 +130,8 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import AppBar from 'shared/views/AppBar';
+  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';
 
@@ -154,7 +153,8 @@
   export default {
     name: 'ChannelListIndex',
     components: {
-      AppBar,
+      StudioNavigation,
+      StudioNavigationTab,
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
@@ -344,4 +344,4 @@
     height: 100%;
   }
 
-</style>
+</style>
\ No newline at end of file

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

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

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 8f1a02869e..692252d9a6 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,17 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 300px;
+    max-width: 300px;
+    min-width: 300px;
   }
 
   .side-panel-nav {
     flex: 1;
     padding: 16px 0;
-    width: 100%;
+    width: 300px;
+    max-width: 300px;
+    min-width: 300px;
   }
 
   .side-panel-nav-item {
@@ -693,33 +698,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 15924b3aabf9bb679f0531a68c4fb6821153fac0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 21 Dec 2025 15:57:39 +0530
Subject: [PATCH 06/72] 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 692252d9a6..a750f6244b 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,17 +630,12 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: 300px;
-    max-width: 300px;
-    min-width: 300px;
   }
 
   .side-panel-nav {
     flex: 1;
     padding: 16px 0;
-    width: 300px;
-    max-width: 300px;
-    min-width: 300px;
+    width: 100%;
   }
 
   .side-panel-nav-item {
@@ -698,6 +684,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 2d7e03b75a3a939f03956fa1042c447e7af3caa0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 23 Dec 2025 13:07:32 +0530
Subject: [PATCH 07/72] Update

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

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

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

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

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
index 7aef1bcdae..99b49c0a64 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%;
@@ -646,6 +646,7 @@
   }
   .side-panel-nav-item.button {
     text-align: start;
+    padding: 0px;
   }
 
   .side-panel-nav-text {

From fc45630ae4b2da642308ba081089f6ba350086df Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 23 Dec 2025 13:21:23 +0530
Subject: [PATCH 09/72] 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 99b49c0a64..df96ac0a49 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 1604dec9d6ae59c8a1703d48e14d4df92c9d3d70 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:05:29 +0530
Subject: [PATCH 10/72] 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 df96ac0a49..af43db34a8 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 b0e49506639a35dfa6343bd4f29c78cf311312d9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:12:51 +0530
Subject: [PATCH 11/72] 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 af43db34a8..55dfae2cd1 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 2c7bc322229e1ee337c2e2f1569d37d247d824d4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:26:02 +0530
Subject: [PATCH 12/72] 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 55dfae2cd1..2e4b940fdf 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 4a0f18a76cc62869338a966bfb5c739d265239dc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:29:53 +0530
Subject: [PATCH 13/72] 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 2e4b940fdf..cba2d763fd 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 84fe621bf0360e7b6a103048dd432f8490a0113d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:40:49 +0530
Subject: [PATCH 14/72] 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 cba2d763fd..3d005259fc 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 1d43a46e27816900e573e4479f1bb8522cebc66e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 18:56:30 +0530
Subject: [PATCH 15/72] 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 3d005259fc..d69fc790c8 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 e6fd12e426f2d4b6e2766679a16361de59fb5351 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 25 Dec 2025 19:00:53 +0530
Subject: [PATCH 16/72] 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 d69fc790c8..8f3de37bd7 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 3664d2204399d7681325beeea402b40c71b4fa51 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 27 Dec 2025 00:00:59 +0530
Subject: [PATCH 17/72] 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 8f3de37bd7..d424ac4100 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 072e2ebfd3004033e56b5a332c6cfe039a75ed3b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 27 Dec 2025 23:32:05 +0530
Subject: [PATCH 18/72] 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 d424ac4100..3360399a79 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 a91f07db4289d1237b0192f1c7823ffd61888b7b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 13 Jan 2026 22:57:21 +0530
Subject: [PATCH 19/72] 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 3360399a79..5bb8cb80af 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 e2c59103ab6f9673bd6ec5aedf11c55ccdc0a6cf Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 13 Jan 2026 23:14:12 +0530
Subject: [PATCH 20/72] 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 bc2474497145b31501e8973c1bc9f772f70b4d4c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 13 Jan 2026 23:27:17 +0530
Subject: [PATCH 21/72] 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 a4d82b4fc7..96ccb4b50d 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 5a2f933820ac832cf1441d2097a0751930370bbc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 00:33:41 +0530
Subject: [PATCH 22/72] 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 96ccb4b50d..a4d82b4fc7 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 6e1cd39227caf2f4e3e706513ce8ba19eff49cd0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 01:20:10 +0530
Subject: [PATCH 23/72] 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 5bb8cb80af..f660f768c0 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>
\ No newline at end of file

From 23375f30f3b497ae585c1b9a3d49f9204d6a0e11 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 01:46:54 +0530
Subject: [PATCH 24/72] 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 f660f768c0..7224d9ca86 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 4702138ce0ce1fb29a9ea45e26aeb1d457aee34c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 10:10:46 +0530
Subject: [PATCH 25/72] 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 7224d9ca86..301915ac2c 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 09466e084de5e3292b051afed2abaf2e54c5f935 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 10:45:41 +0530
Subject: [PATCH 26/72] 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 301915ac2c..706fccca79 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;
-    gap: 12px;
-    width: 100%;
-    margin: 0;
-    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 57982b304c63eb51d2c72817cb4dd9944c8c26c1 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 13:19:26 +0530
Subject: [PATCH 27/72] 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 706fccca79..1ee7962889 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 b2815efae5dcc0687881d869a7e1e70c46155d6a Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 19:36:02 +0530
Subject: [PATCH 28/72] 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 30b695e5d0..4cd9091567 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 1ee7962889..92e5620405 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 5461324e3a01e249f6f630169b862b05de013e1b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 20:36:21 +0530
Subject: [PATCH 29/72] 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 92e5620405..3870e7634c 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 a02f5d3235a11c2227fc202290eab16ccb7c086d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 21:45:46 +0530
Subject: [PATCH 30/72] 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 3870e7634c..c71ce53f95 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>
\ No newline at end of file

From 45e9f8a09161839d55df932f54a6ce5682c69966 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 21:49:45 +0530
Subject: [PATCH 31/72] 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 c71ce53f95..001523485b 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 3dbc4a49caab349bfb3be2568b00956e396a2eed Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 23:18:44 +0530
Subject: [PATCH 32/72] 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 001523485b..713ff4c566 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 e75fa20ec33c110b60b4bdc1780c1c69869099fc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 23:38:46 +0530
Subject: [PATCH 33/72] 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 713ff4c566..eed6f501c5 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 86d41fe80ce4c6c1a0bee2bcc4147fede57ed55b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 14 Jan 2026 23:48:27 +0530
Subject: [PATCH 34/72] 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 eed6f501c5..eb80fae60e 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 a3cbc5882d49270879c0d3e34581310a8b0cf053 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 00:20:29 +0530
Subject: [PATCH 35/72] 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 eb80fae60e..c31ecfda1d 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 7d7f7234569899e15abd6cae65d1d7bd47e8fd62 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 00:25:00 +0530
Subject: [PATCH 36/72] 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 c31ecfda1d..033be72fe9 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 81f5e8c164faf7481f6e181ea207a75bba4d8b77 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 00:39:52 +0530
Subject: [PATCH 37/72] 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 033be72fe9..091c45d42d 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 befbeca1042d1d23585aff647d1841bf162f2e9a Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 01:06:55 +0530
Subject: [PATCH 38/72] 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 091c45d42d..0b8b2dfae5 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 24107b57d151a6e279e46350557ef7740d1fce57 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 01:42:31 +0530
Subject: [PATCH 39/72] 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 0b8b2dfae5..b8902efc79 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 3825ba97730729c21eba2265d4149ef2be04506e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 02:39:33 +0530
Subject: [PATCH 40/72] 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 b8902efc79..938b0ee25d 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 d5a228eb91db3f6436a4d5c391a6468fae5e0ec9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 12:27:27 +0530
Subject: [PATCH 41/72] 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 938b0ee25d..89fd7fe524 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 126043288e10c2125cb2f5cdc9319c15f4e2461c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 19:35:30 +0530
Subject: [PATCH 42/72] 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 89fd7fe524..7b38c8d6c5 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 bddf7c9a9c1a835a3f0fdc75a46a58e1513eba77 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 15 Jan 2026 22:38:37 +0530
Subject: [PATCH 43/72] 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 7b38c8d6c5..306b2f9f10 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 7a227e9f8d3beaf3b48410be5e5c4f79ae08fdfc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 00:38:04 +0530
Subject: [PATCH 44/72] 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 306b2f9f10..5bf041f045 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 13b0e463ff7bf1ba0d8e0af4af5e1bef40dc7dde Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 03:31:57 +0530
Subject: [PATCH 45/72] 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 5bf041f045..80ab54e4b5 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>
\ No newline at end of file
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 2a51498671b6fece3e40d4bf2eafbb6a1fe40fa9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 14:43:54 +0530
Subject: [PATCH 46/72] 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 80ab54e4b5..6e790b4970 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 3560e7baefa2595bfebbcfec9c758e70fb0cc3e4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 15:49:46 +0530
Subject: [PATCH 47/72] 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 6e790b4970..ac20a98948 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 ca79121b1772c36b74cb05645206dddc137f689d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 16:39:47 +0530
Subject: [PATCH 48/72] 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 ac20a98948..fd0e4d8ccf 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 c0267b74ff4638b61a7bd6a38765832878749457 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 17:20:26 +0530
Subject: [PATCH 49/72] Added StudioPanelOption.vue

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index a4d82b4fc7..d02be39e4a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -27,34 +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="channelSetLink"
-          @click="channelSetsTabClick"
-        >
-          {{ $tr('channelSets') }}
-        </StudioNavigationTab>
-      </template>
-    </StudioNavigation>
+
+    <StudioNavigation 
+      v-else
+      :tabs="navigationTabs" 
+    />
+
     <VContent>
       <StudioOfflineAlert
         v-if="!isCatalogPage"
@@ -131,7 +109,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';
 
@@ -154,7 +131,6 @@
     name: 'ChannelListIndex',
     components: {
       StudioNavigation,
-      StudioNavigationTab,
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
@@ -169,6 +145,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;
       },
@@ -222,12 +237,6 @@
       homeLink() {
         return this.libraryMode ? window.Urls.base() : window.Urls.channels();
       },
-      publicTabClick() {
-        return this.trackTabClick.bind(this, ChannelListTypes.PUBLIC);
-      },
-      channelSetsTabClick() {
-        return this.trackTabClick.bind(this, CHANNEL_SETS);
-      },
     },
     watch: {
       $route(route) {
@@ -284,9 +293,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 fd0e4d8ccf..84ec8e6641 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>
\ No newline at end of file

From 746ea164662b0d897a3d431082581745c63b85c1 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 17:21:37 +0530
Subject: [PATCH 50/72] 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 84ec8e6641..39b3f140de 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>
\ No newline at end of file

From 5a167251ea4afb6142e51f0f32c73a903ff9daab Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 17:29:53 +0530
Subject: [PATCH 51/72] 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 39b3f140de..cc80491f94 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 ba2a51cf35d5a0e4bf6571108ab92fc83874294d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 19:46:14 +0530
Subject: [PATCH 52/72] 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 cc80491f94..4d24db0876 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 00cfe574d3f40eaf39568267a74b63608c7ec83d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 19:54:33 +0530
Subject: [PATCH 53/72] 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 d02be39e4a..44cc5d1397 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 4d24db0876..064f7de926 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 f2b6a171e2bbe0dbea87e33aab82123b813d9d84 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 20:06:25 +0530
Subject: [PATCH 54/72] Removed the padding added to the sie panle modal and
 rather added that where modal is used

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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index f16745cd5e..cfa91a7ec4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -12,7 +12,9 @@
       </template>
 
       <template #default>
-        <div>
+        <div
+          style="padding: 24px 32px 16px;"
+        >
           <KRadioButtonGroup>
             <KRadioButton
               :label="modeLive$()"
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
index 4cd9091567..1190893d85 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -261,7 +261,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 064f7de926..f60d914f4d 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 bf4ed5bdce84276e3dd06fd088d1e3a540313aeb Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 21:56:16 +0530
Subject: [PATCH 55/72] 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 6f21f15bcb..69a3e37739 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -653,6 +653,7 @@
   .content {
     display: flex;
     flex-direction: column;
+    padding: 24px 32px 16px;
     gap: 16px;
     margin-top: -24px;
     line-height: 140%;

From 8efbeab64a082a32c87ce768b21b349d3580e71d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 22:24:12 +0530
Subject: [PATCH 56/72] 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 115b785b5a19a9ab8fc88076d90bdd6264043fbf Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 22:51:50 +0530
Subject: [PATCH 57/72] 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 f636d3e275..0a8ecd0b02 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';
@@ -107,6 +111,7 @@
   import Checkbox from 'shared/views/form/Checkbox';
   import HelpTooltip from 'shared/views/HelpTooltip';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+  
 
   const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
 
@@ -119,6 +124,12 @@
       MultiSelect,
     },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
 
     data() {
       return {
@@ -156,6 +167,14 @@
       setKeywords() {
         return debounce(this.updateKeywords, 500);
       },
+      contentStyles() {
+        if (this.windowIsSmall) {
+          return {
+            padding: '24px 32px 16px',
+          };
+        }
+        return {};
+      },
     },
     watch: {
       keywords() {

From fdd4a1694099ab6a2c78791642bea7ad772057a6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 23:01:34 +0530
Subject: [PATCH 58/72] 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 f60d914f4d..48cf49b3de 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 be589106ee075ddfb313742bb5c4ced5310bf973 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 23:27:48 +0530
Subject: [PATCH 59/72] 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 44cc5d1397..33338e74b1 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -149,16 +149,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,
@@ -166,16 +164,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'),
@@ -296,10 +292,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 48cf49b3de..e660bd1530 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 330e867f4fbb2c277def1223ce0f34c1f40cd2e6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 16 Jan 2026 23:30:02 +0530
Subject: [PATCH 60/72] 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 33338e74b1..d29190a63b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -160,7 +160,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 1faa8620f1199b3dedfee2999559c2b750f0b8d0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 01:02:58 +0530
Subject: [PATCH 61/72] 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 1190893d85..009b368215 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 e660bd1530..05fb7d4e15 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 5ffc7d0c527f2558bc217efb22826cab70017c16 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 02:41:41 +0530
Subject: [PATCH 62/72] 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 05fb7d4e15..9058853e66 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 6a0c587ea9c11cda7539fb8d4729bbae38fc8e12 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 12:42:53 +0530
Subject: [PATCH 63/72] 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 9058853e66..d86ddd2dad 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 4f2bc4a78f60f237641da204658ed771faa9208a Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 13:10:50 +0530
Subject: [PATCH 64/72] 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 a4bac5386c53566db7720e6155f162a22c594ce4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 17 Jan 2026 21:48:25 +0530
Subject: [PATCH 65/72] 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 d86ddd2dad..1cd0f6d455 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 bb8a602142b30aac6d43110c8c70efc28141c219 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 01:07:49 +0530
Subject: [PATCH 66/72] 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 1cd0f6d455..490ae35544 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 75ba5b86e1dd871f190551f190d82e1c915fc81d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 01:58:39 +0530
Subject: [PATCH 67/72] 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 9c5e30628f2043356d7198a58df3fca42d596cb6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 02:02:21 +0530
Subject: [PATCH 68/72] 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 5ffa338afdd3449e17b7ac24c6ba2caf5a3fb0b3 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 02:07:22 +0530
Subject: [PATCH 69/72] 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 00e258adee8ed0881d612c4595360f019d764fbd Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 16:53:50 +0530
Subject: [PATCH 70/72] 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 490ae35544..c85a77a3b8 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 fa320791a03d64e4dc2ad78be9eb185aeb3ce28f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 18 Jan 2026 17:12:33 +0530
Subject: [PATCH 71/72] 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         | 86 ++++++++-----------
 .../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, 89 insertions(+), 115 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
index 0a8ecd0b02..460eb998d4 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"
   >
@@ -111,7 +111,6 @@
   import Checkbox from 'shared/views/form/Checkbox';
   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 d29190a63b..9a15554d28 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>
@@ -148,7 +148,7 @@
       }),
       ...mapGetters(['loggedIn']),
       ...mapGetters('channelList', ['invitations']),
-      
+
       navigationTabs() {
         if (!this.loggedIn) return [];
 
@@ -156,11 +156,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],
           });
         });
 
@@ -169,7 +169,7 @@
           label: this.$tr('catalog'),
           to: this.catalogLink,
           badgeValue: 0,
-          analyticsLabel: 'PUBLIC' 
+          analyticsLabel: 'PUBLIC',
         });
 
         tabs.push({
@@ -177,7 +177,7 @@
           label: this.$tr('channelSets'),
           to: this.channelSetLink,
           badgeValue: 0,
-          analyticsLabel: 'CHANNEL_SETS'
+          analyticsLabel: 'CHANNEL_SETS',
         });
 
         return tabs;
@@ -292,7 +292,6 @@
           this.updateTabTitle(title);
         }
       },
-
     },
     $trs: {
       channelSets: 'Collections',
@@ -350,4 +349,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 009b368215..06c1fa373f 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 c85a77a3b8..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,13 +689,13 @@
     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);
     }
   }
 
-</style>
\ No newline at end of file
+</style>
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 049a47995193d64300eb4721ae2069de0bd85d86 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Sun, 18 Jan 2026 11:45:14 +0000
Subject: [PATCH 72/72] [pre-commit.ci lite] apply automatic fixes

---
 .../channelEdit/components/sidePanels/PublishSidePanel.vue    | 4 +---
 .../sidePanels/SubmitToCommunityLibrarySidePanel/index.vue    | 2 +-
 2 files 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 cfa91a7ec4..d13ebc17a2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -12,9 +12,7 @@
       </template>
 
       <template #default>
-        <div
-          style="padding: 24px 32px 16px;"
-        >
+        <div style="padding: 24px 32px 16px">
           <KRadioButtonGroup>
             <KRadioButton
               :label="modeLive$()"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index 69a3e37739..93981f4f21 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -653,8 +653,8 @@
   .content {
     display: flex;
     flex-direction: column;
-    padding: 24px 32px 16px;
     gap: 16px;
+    padding: 24px 32px 16px;
     margin-top: -24px;
     line-height: 140%;
   }