Restructure the "resourcenavbar"

[tinniaru3005]

Description

The resourcenavbar currently has a very basic look. Upgrade the look & feel of it.

Reproduction

This can be done in either of 2 ways:

• 1st way:
  • Redisgn it in the form of a drop-down menu
  • We can have a horizontal menubar with 3 options: Topic, medium and Print
  • When we click on each of them we get the list items below
• 2nd way:
  • Add a background behind the headings: Topic, Medium and Print
  • Have a separate div with a proper border for each of them
  • Inside each div, we will have the list items .

Expectation

This will improve the look and feel of the website

Screenshots

Environment

Additional context

Resolution

• I would be interested in resolving this bug.

[tinniaru3005]

Hey, @kirtanchandak welcome to the community thanks for your interest in contributing to the project. But the issue is not yet approved.
The issue will automatically have the status: awaiting triage label applied. Wait for a project maintainer to evaluate the issue and decide whether it's something that they will accept a pull request for.
Once the project maintainer has approved the issue and removed the status: awaiting triage label then a PR can be raised

You can go through the Contribution Guideline to know more
Also as I have mentioned in the issue I would like to work on it. So you may look at the other issues.

[consolexyz]

Hello @possumbilities
I am interested in working on this issue. From the description and comments, I believe I have the necessary skills and experience to solve this problem.

[possumbilities]

I think this would make a good conversation for the community on different approaches we could try to improve this.

[tinniaru3005]

That's would be great @possumbilities. 🤩

[consolexyz]

okay sounds good

[KrownWealth]

I think first way would be a simplify way forward, because it will make the nav-bar more readable, it will reduce junkness, and also give spaces to add a button beside the nav-bar.

I would like to implement this feature

[Xaid-vfx]

I think a better approach would be implementing this feature as a sidebar.
The main reasons behind using a sidebar would be:

1. Could be implemented as a separate file in _layouts folder
2. Could be used in the resources page as well for navigating back to specific resources.
3. UI can be implemented from Vocabulary , as this is one of expected deliverables of the project.
4. Space occupied by resource navbar can be used for displaying featured cards.
5. While viewing a resource, the respective categories can be highlighted depicting the selected resource.

[consolexyz]

well I think a better way to add a hoverable navigation bar , something like the image below

[Shivangi-ch]

I think a good idea will be to add dropdown inputs for each of the three categories(i.e., topic, medium and language). All the current items in the unordered list will be the options for each of the dropdown fields.
When on the home page the dropdowns will have a placeholder value as the category name, and when the user selects a value for any of the three dropdowns they will be redirected to that path.
Basically the same functionality but with dropdowns instead of the unordered lists.

@possumbilities I would like to work on this issue... also do you have any suggestion on this approach.

[possumbilities]

I think there's some merit in exploring a sidebar perhaps. But I don't think hiding the options necessarily makes them more usable. That increases the steps of action from: landing on page, choose filters as desired, to: landing on page, open specific filters area, find filters you want, apply filters, wait for results.

A sidebar of filters would push the options off to the side, and rearrange the page. A similar UX experience is found here: https://creativecommons.org/blog/archive/ but that works because the filtering isn't a long list.

There is also another issue with an alternative approach, which is here, I would suggest we move the conversation there:

• [Feature] Explore accessibility for category filters #192 (comment)

[Cappybara12]

I agree with the proposal to upgrade the look and feel of the resourcenavbar. Adding a dropdown menu structure or enhancing the styling with backgrounds and divs can significantly improve the visual appeal. Additionally, integrating a search functionality within the navbar could enhance user experience by making resource discovery more accessible.

I've already started implementing some of these changes and have a prototype available for review @possumbilities .