[Remove Vuetify from Studio] Main navigation in Channels

[Prashant-thakur77]

Fixes #5369

Summary

This Pull Request replaces the Vuetify-based AppBar and navigation components in the Channels view with new, custom-built components using the Kolibri Design System (KDS). This is a sub-issue of the larger project to remove Vuetify dependencies (#5060).
Components such as StudioNavigation, StudioNavigationTab, SkipNavigationLink;
Screencast From 2026-01-15 01-54-52.webm

References

Sub-issue of #5060.

Reviewer guidance

Login as a@a.com with password a
Go to Channels

This is currently a draft and progress is on going on it.

[learning-equality-bot]

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

• You ran pre-commit locally
• All issue requirements are satisfied
• The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

[Prashant-thakur77]

Hlo @MisRob I have raised the draft pr ,so I think i should start with asking some clearification:

1. In SidepanelModel's index.vue file padding is given already due to which alignment problems are occuring.In my view ,I think we should remove the padding on the sidepanelmodal content (IN Index file )itself and add the padding where the component is used as per our desire to maintain flexibility rather than giving a specific padding ,in this case currently i have removed the padding with the help of vdeep ,Do tell what are your thoughts about it.
   Here below is the padding in index.vue file
   

   studio/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue

   Lines 254 to 258 in c553c57

   	.side-panel-content {
   	flex-grow: 1;
   	padding: 24px 32px 16px;
   	overflow-x: hidden;
   	overflow-y: auto;

   
   But if we remove the padding in index file then we have to add padding in other places where the side panel modal was used.
   Why in my case padding is not needed:

2. I have updated a prop in side panel model becaue it had a ismobile() method due to which below a certain window breakpoint the the sidepanelmodel covers the whole screen so i have solved it by using a fixedwidth prop
   

   studio/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue

   Lines 154 to 156 in c553c57

   	responsiveWidth() {
   	return this.isMobile ? '100vw' : this.sidePanelWidth;
   	},

   
   I have checked and it is not causing any problem in older use cases.
   Is this way suitable?

3. I was having a bit trouble creating the ripple type background-color styling created on clicking the tabs.I would like your insights on it
   Screencast From 2026-01-15 02-16-58.webm

These above are the issue i wanted to clear and also just giving you a check on the work yet left :

1. Making test file for StudioNavigation and StudioNavigationTab,SkipNavigationLink.
2. Refinement on the sliding and scrolling of the tabs when screen size is reduced.
3. Other minor improvements.

[Prashant-thakur77]

@MisRob This prop is added here to deal with the full width functionality of sidepanelmodel

[Prashant-thakur77]

Hi @MisRob, I’m making good progress on the sliding animation and scroll logic for the tabs. However, with the added implementation for the indicator and chevron behavior, StudioNavigation.vue is approaching 800 lines.

To keep the components modular and maintainable, would you be open to me splitting the tab-wrapper logic into a third component, StudioNavigationTabs.vue? This would house the scrollable container and sliding indicator, leaving StudioNavigation.vue to focus purely on the KToolbar ,SidePanelModal and top-level layout. Or should I stick strictly to the two components mentioned in the issue description?

(There can be some redudant logic which i am currenlty removing ,i just wanted to check if it is a problem if Studionavigation is of this size? or should i do something about it)