👋 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! 😊

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:

Screenshot From 2026年01月14日 21-39-49

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.

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)

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.

@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 :)

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.

@Prashant-thakur77 Good thanks for your patience :)

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.😁

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

Sure

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.

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

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

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"

Screenshot From 2026年01月17日 00-24-32

but there are some prop errors such as
Screenshot From 2026年01月17日 00-25-23

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

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.

• 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 :)

I have done the updates @MisRob and will raise the pr soon.
Screencast From 2026年01月18日 01-51-57.webm

The recording looks fantastic @Prashant-thakur77, for both LTR and RTL! Thanks a lot.

• I gave the code a very quick high-level skim. Just two notes. We will assign a reviewer next week for full review.
• I noticed that Add Notifications page #5610 adds a notification badge + notifications page link to the top-right user menu, and also a new item + notification badge in the side panel.
  • After that PR merged, we will need to update this PR accordingly. It will be easiest to attend to it later, likely after your PR is reviewed. I will follow-up when the time comes, and will be ready to support this part.
  • But you may already have a look at related places in the notifications PR and consider whether the new architecture will allow those updates be easily added here later.

@AlexVelezLl i have done the requested changes and provided comments where needed for explanation.sorry for the delay,going through exams.do tell is any more changes are needed.
Please review when you have time.

Thanks a lot @Prashant-thakur77! Will try to take a look by the end of this week. But I'll most likely see it next week 🤗.

Sure..