🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI . Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: High

Summary

Remove Vuetify from the main navigation (top bar + user menu + side panel) in Channels:

Currently, AppBar that is built with several Vuetify components is used:

To remove these Vuetify dependencies:

• Build new components frontend/shared/views/StudioNavigation.vue and frontend/shared/views/StudioNavigationTab.vue without Vuetify.
• For side panel, utilize existing SidePanelModal
• Remove VBadge in favor of a custom implementation.

(削除) There should be no changes in before / after user experience - examine AppBar and its sub-components for details of what features need to be re-implemented. (削除ここまで) (update Jan 15 by MisRob: there will be some changes - see Expected UI/UX changes)

Don't refactor AppBar, MainNavigationDrawer, other sub-components of AppBar, or any other areas of the codebase (StudioNavigation will be introduced to other plugins in the scope of upcoming issues).

How to get there

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

Guidance

• Read the project this issue is part of
• KDS components that will be handy: KToolbar, KDropdownMenu, KButton, KRouterLink, KExternalLink, and possibly others
• Note that KDS KTabs... components are not suitable for use as it's a different a11y pattern than the main navigation, e.g. keyboard navigation differs
• Use shared/views/SidePanelModal for the side navigation - it contains backdrop as well as all important a11y patterns
• Kolibri has a very similar main navigation - there will likely be plenty of useful code, or can serve as reference
  • /kolibri/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
  • Also would be nice to have skip navigation-like functionality (kolibri/packages/kolibri/components/SkipNavigationLink.vue)

Out of Scope

• Do not refactor AppBar, MainNavigationDrawer, and other sub-components of AppBar
• Do not use the new StudioNavigation in other plugins, such as Settings or Admin.
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS
• Update Jan 15 by MisRob: we won't reproduce everything (e.g. animations, ripple effect, and more..) from the current implementation in favor of using the same experience as in Kolibri - consistency is preferred by designers, and also Kolibri's navigation pattern is agreed and robustly tested for ux, a11y, ...)
• Update Jan 15 by MisRob: Also experience on smaller screens will be different - we'll use dropdown as in Kolibri (where we intentionally moved away from scrolling):

Acceptance criteria

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).