Frontend: Courses page component and navigation

[rtibbles]

Overview

Create the basic Courses page component in the Coach plugin with navigation, following the same structure as Lessons and Quizzes.

Design Reference

See parent product issue for screenshots and Figma designs:

• Figma designs
• Screenshot showing courses navigation at same level as lessons/quizzes

Implementation

1. Add Courses Navigation Item

Add "Courses" to the Coach plugin navigation at the same level as "Lessons" and "Quizzes".

Conditional display: Use the courses_exist plugin data to show/hide the courses navigation item. Only display when course content is available on the device.

const { courses_exist } = usePluginData();
if (!courses_exist) return null;

2. Create Top-Level Route

Add top-level /courses route in the Coach plugin routes configuration.

Follow the routing patterns from Lessons and Quizzes, including:

• Route definition with proper parameters (classId, etc.)
• Route guards/permissions
• Child routes for side panels (implemented in separate issue)

3. Create Page Component

Create the main Courses page Vue component:

• Page shell/layout
• Page header with title
• "Add course" button (launches side panel)
• Placeholder for course list (implemented in separate issue)

References

• Lessons page structure: kolibri/plugins/coach/assets/src/views/lessons/
• Coach routes: kolibri/plugins/coach/assets/src/routes/
• Coach navigation: Coach app navigation components
• Coach plugin data: kolibri/plugins/coach/kolibri_plugin.py

[mariam-29]

I want to work on this issue can you assign it to me?

[learning-equality-bot[bot]]

Season’s greetings! 👋

We’d like to thank everyone for another year of fruitful collaborations, engaging discussions, and for the continued support of our work. Learning Equality will be on holidays from December 22 to January 5. We look forward to much more in the new year and wish you a very happy holiday season!

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[learning-equality-bot[bot]]

Hi! 👋

Thanks so much for your interest! This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues. If there are no unassigned 'help wanted' issues available, please wait until new ones are added.

We really appreciate your willingness to help. 😊

Are you preparing for Google Summer of Code? See our GSoC guidelines.