[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)

[MisRob]

Hi @Prashant-thakur77, nice work here, and I appreciate you're reaching out to clarify. Basically below you will find just confirmation for your ideas though :) and a clarification about scope.

(1)

I think we should remove the padding on the sidepanelmodal content (IN Index file )itself and add the padding where the component is used...

Yes that makes much sense and yes it's better than trying to override from outside.

(2)

I have updated a prop in side panel model...

Again yes. As soon as work is finished, I will let a reviewer to check on details, but high-level configuring this behavior via a prop makes sense to me.

(3)

I was having a bit trouble creating the ripple type background-color

I appreciate that you try to stay close to the original, but you don't need to replicate this part exactly - just use Kolibri navigation as reference.

(4)

Making test file for StudioNavigation and StudioNavigationTab,SkipNavigationLink

👍

(5)

Refinement on the sliding and scrolling of the tabs when screen size is reduced.
I’m making good progress on the sliding animation and scroll logic for the tabs

Oh you're very diligent :)! Same answer as for (3). I'm sorry I think I should have emphasize this in the issue better. To begin with, you can just make it behave as in Kolibri. If there's any Studio-specific fine-tuning needed, we can open a follow-up issue, but right now I don't expect it will be needed (but if you already have some code, it'd be pity to lose it - so maybe keep it as backup, just in case?)

(6)

To keep the components modular and maintainable, would you be open

I don't know if it's still relevant after my answer for (5), but in general, absolutely - any optimizations are welcome. Code snippets in issues only show direction that I consider important, and doesn't mean that it cannot be further improved - quite the opposite, I really welcome that you think about maintainability.

[Prashant-thakur77]

@MisRob Thanks for the clarification.Now if we are not going very deep in the specific sliding and ripple animations ,then it does make the task easier,i was trying to replicate the sliding, scrolling of the tabs currently and yes i will keep it with me if needed later :)

[MisRob]

Re: (3) and (5) now I see that I wrote in the issue

There should be no changes in before / after user experience

in bold - so again apologies for that. I think I didn't realize that some details like animations etc. are a bit different from Kolibri's. Glad that we had a chance to talk through a draft and hopefully you didn't spend much time on those parts.

[MisRob]

@Prashant-thakur77 Good thanks for your patience :)

[Prashant-thakur77]

Re: (3) and (5) now I see that I wrote in the issue

There should be no changes in before / after user experience

in bold - so again apologies for that. I think I didn't realize that some details like animations etc. are a bit different from Kolibri's. Glad that we had a chance to talk through a draft and hopefully you didn't spend much time on those parts.

No prob,to be frank i did learnt a lot while working on it.😁

[MisRob]

Also I'm going to update the issue now @Prashant-thakur77 to reflect above - just to make it clear to reviewers too.

[Prashant-thakur77]

Sure

[MisRob]

Issue update done @Prashant-thakur77, just search the body for "Update Jan 15 by MisRob" text and you will see three updated places. Please let me know if it's all clear or if you noticed any other areas like this.

[Prashant-thakur77]

@MisRob Regarding the use of Side Panel Modal,I need to ask about a prop problem

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

Lines 99 to 105 in ad4d81e

	closeButtonIconType: {
	type: String,
	required: false,
	default: 'close',
	validator: value => {
	return ['close', 'back'].includes(value);
	},

Currenlty 2 types of icon can be passed to sidepanelmodal and when we pass the close icon it gets to the righmost side and when we pass any other icon it moves to the left side

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

Lines 26 to 30 in ad4d81e

	<div
	class="header-content"
	:style="{
	flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
	}"

Due to the above logic , and in current usecase of sidepanel for navigation
I have passed the clear as the prop,hence it appears to the left side

closeButtonIconType="clear"

but there are some prop errors such as

What are your thoughts regarding this matter?
Should i update StudioPanelModal or let it be

[MisRob]

Hi @Prashant-thakur77, do I understand right that the problem is: You need to use close icon, but the current implementation aligns it to the right side, whereas in this use case it needs to be on the left side?

If so, then I would encourage you to update SidePanelModal to fit this new use-case. One idea to explore would be to:

• closeButtonIconType to only affect icon type, and not its position
• closeButtonPosition new prop to configure right/left placement

or similar. Feel free to play and try to find a meaningful and clear API for all our use-cases :) Thanks for checking first.

[Prashant-thakur77]

• closeButtonPosition new prop to configure right/left placement

yes ,i also think this is the best way going forward for future implications too.

closeButtonPosition: {
type: String,
required: false,
default: null,
validator: value => ['left', 'right'].includes(value),
},

And it's working as required :)