Update navigation links to show multiple classrooms

[AFZL210]

Instead of showing the top 2 classrooms, we plan to show all classrooms in the navigation bar. We can implement this as soon as the final design is ready.

Mocks

[AFZL210]

This issue is a part of #19849.

[Anubhavsingh9905]

hello @AFZL210 , i am anubhav . I'm new to open source , can i assign this project to me .

[flame-2005]

hey @AFZL210 i want to work on this issue

[mon4our]

@flame-2005 Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

[flame-2005]

currently i am setting up the project buat facing some issure i have followed all the steps but still getting this can you help me here

[mosin74]

@seanlip, is this still open? Should I look into it ?

[seanlip]

Any unassigned non-backlog issue is open, following our contribution instructions. Please follow those if you'd like to claim an issue.

[mosin74]

Hey @seanlip, I’ve completed the design part, which is crucial for this PR. The only remaining task is sorting the lessons and sending them to the UI, which I’ll wrap up soon. In the meantime, please review the design and let me know if it looks good if so, assign me the PR please.

https://github.com/user-attachments/assets/4b5344e3-f1ea-46c7-bbd6-c48112c8d991

Additionally, in top-navigation-bar.component.ts, there is a line:

donateMenuOffset = this.getDropdownOffset('.donate-tab', 286);

I couldn’t find any corresponding HTML element where donateMenuOffset is being used, unlike getInvolvedMenuOffset and learnDropdownOffset, which are referenced in the UI. It appears that donateMenuOffset is only present in the component file and its test but is not actually utilized anywhere else. I believe it might be unnecessary and could be removed. Let me know your thoughts!

[seanlip]

@mosin74 Could you explain your code approach a bit? Would like to understand how this works in the (current) 1-classroom case and the 2 classroom case. In the 1-classroom case what does your UI look like -- does it differ from the current UI on the website?

For the donateMenuOffset I suggest you use the "blame" functionality to figure out which PR originally introduced it -- see https://github.com/oppia/oppia/wiki/How-to-find-the-commit-which-introduced-a-bug for the steps to follow. That will provide helpful information for the conversation.

[mosin74]

@seanlip In 3-classroom case( where thre coloum is present ) I will changing below css part

.oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left{
  width: 861px;
}
.oppia-top-navigation-bar .classroom-enabled {
  min-width: 1200px;
}

For 2-Classroom case(where there is 2 columns is present) I will changing media query CSS like below

@media screen and (max-width: 1212px){
  .oppia-top-navigation-bar .classroom-enabled {
    min-width: 939px;
  } 
  .oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left {
    width: 600px;
  }
}

For 1-Classroom changing it to current UI on website

@media screen and (max-width : 925px) {
  .oppia-top-navigation-bar .classroom-enabled {
    min-width: 688px;
  } 
  .oppia-top-navigation-bar .learn-dropdown-menu .nav-item-left {
    width: 388px;
  }
}

and learnDropdownOffset calculating with help of changed width for classroom-enabled by calling getDropdownOffset() with dynamic value changed instead of fixed

`this.learnDropdownOffset = this.getDropdownOffset('.learn-tab', '.classroom-enabled');`

modified getDropdownOffset() function for this

[seanlip]

@mosin74 I don't understand, sorry. 3 classrooms is different from 3 columns.

In your plan, how does the number of classrooms relate to the number of columns? It would also be helpful to see the UI for the three cases.

[mosin74]

Got it! Sorry for the confusion earlier. I initially explained about the column, but I now understand for 1,2 classroom display not working as expected. I'll fix it and provide the correct implementation.

Just to clarify, for two classrooms, should we display them in one column or two? Also, what’s the maximum number of classrooms we should allow in one column before increasing the number of columns? Let me know your expected behavior, and I'll make the necessary adjustments.

[mosin74]

@seanlip For 1 Classroom :

https://github.com/user-attachments/assets/46b25fea-f35d-4285-83b0-64eddcaf20b9

For 2 Classroom :

https://github.com/user-attachments/assets/5e481e8d-7d17-4182-b8e4-5fc20c8c5a4f

For Multiple Classroom :

https://github.com/user-attachments/assets/2287ebf4-a029-40a7-b35c-fdce78c3be08

let me know if there are any issues , we will discuss them thank you !

[mosin74]

@seanlip I hope you're doing well. I haven’t received a response yet regarding the above. Is everything okay? Please let me know if I’m missing something or need to make any changes. Thank you!

[seanlip]

@mosin74 Sorry for the late reply. I think what you have looks good, thanks. I'll assign you!

[HardikGoyal2003]

@mosin74 Are you still working on this?

[mosin74]

Hey @HardikGoyal2003 I am still working on this issue, I'll make the PR today. Apologies for the delay. Thanks !

[HardikGoyal2003]

@mosin74 Any updates on this?

[mosin74]

@HardikGoyal2003, there was an issue with the design due to a misunderstanding. I’m currently making the necessary changes and writing the tests. Apologies for the delay; I’ll submit the PR as soon as possible.

[mosin74]

@HardikGoyal2003 @seanlip Apologies for the delay I was dealing with some health issues. In the future, I'll make sure to inform the team and unassign myself from any tasks if I'm going to be inactive for more than 6–7 days. Thank you for your understanding and support.