[BUG]: Conflicting Navigation Options on Screens Between 600px and 1000px

[hrshkshri]

Describe the bug

Users experience redundant navigation elements on screens between 600px and 1000px width. Both the mobile navigation and the top navbar are displayed simultaneously, creating a confusing and cluttered user experience.

URL of the page where the issue is observed.

https://www.oppiatestserver.org/topic_editor/

Steps To Reproduce

• Go to topic_editor or create exploration
• Resize a browser window to a width between 600px and 1000px.
• Observe the presence of both the mobile navigation and the top navbar on the page.

Expected Behavior

Only one navigation should be visible based on the screen size:

Screens < 600px: Mobile navigation only. Screens 600px - 1000px: Top navbar only/Mobile navigation only Screens > 1000px: Top navbar only.

Screenshots/Videos

What device are you using?

Desktop

Operating System

MacOS

What browsers are you seeing the problem on?

Chrome

Browser version

No response

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Then, please leave a comment with details of the approach that you plan to take to fix the issue (see example).

Note: If this is your first Oppia issue, please make sure to follow our guidelines for choosing an issue and setting things up. You will also need to show a demo of the fix working correctly on your local machine. Thanks!

[ahmed-o-324]

Hey @hrshkshri , I'm working on this and tried to recreate this on localhost and the issue did not arise, also wasn't able to access these pages on an oppiatestserver. How can I access the admin pages on testserver?

[hrshkshri]

Hey @hrshkshri , I'm working on this and tried to recreate this on localhost and the issue did not arise, also wasn't able to access these pages on an oppiatestserver. How can I access the admin pages on testserver?

Hey @ahmed-o-324 Create an exploration to see the respective bug. (visit /creator-dashboard) Otherwise, you can go to the admin page (on your local server) -- give the role of the curriculum admin and visit /topics-and-skills-dashboard, create a new topic and see the bug again.

[ahmed-o-324]

So I tried reproducing the issue in local and didn't see the simultaneous display of the navbar:

Perhaps this is just an issue in oppiatestserver and not local? If so, I don't see an option for admin page on oppiatestserver:

Let me know if I may have missed anything.

Also just out of curiosity/further understanding, (Newbie question incoming) what is the purpose of having an oppiatestserver?

Thanks!

[hrshkshri]

Hey @ahmed-o-324

Look at the red circle I have marked below.