[Remove Vuetify from Studio] Side panel (container only) in Content Library

[Prashant-thakur77]

FIxes #5528
This PR replaces the Vuetify VNavigationDrawer component in the Content Library side panel with a custom implementation using the Kolibri Design System. The changes include:

For small screens: Using the existing SidePanelModal component to display panel content in a full-screen modal (improving on the previous partial-width behavior)

For medium/large screens: Displaying the panel content as a non-modal page section without using SidePanelModal

Created a reusable inner panel component that works for both modal and non-modal layouts
(Specific tests are yet written for this component,needs clearification)

Preserved all existing filtering functionality and accessibility features

Ensured RTL/LTR compliance and proper mobile responsiveness
Screencast From 2025-11-17 01-41-20.webm

References

Sub-issue of #5060.

Reviewer guidance

How to get there
Login as [email protected] with password a
Go to Channels > Content Library

Guidance
How to run Kolibri
Find detailed guidance with many code examples in KDS documentation
Read #5060 for more useful references

[Prashant-thakur77]

Also, regarding the wrapped string translation issue: since the strings have been moved from the old CatalogFilters component to the new component, they are not updating with the selected language. I wanted to confirm whether I should update the translation entries in the language JSON files by replacing the old component keys with the new component keys.

Just let me know what you prefer, and I’ll go ahead with it! :)