Improve Navbar Link Highlighting for Better User Experience

[ItsNehaOjha]

Problem

The current navbar links do not visually indicate which page the user is on, which can lead to a confusing user experience.

Description

To enhance the user experience, I propose adding an active state style to the navbar links. This will visually indicate the current page the user is on. For example, adding a dark black color and bold text or underline for the active link can make it stand out:

Proposed Solution

To improve the user experience, I suggest adding an active state style to the navbar links. This will help users easily identify the current page they are on.

Request for Guidance

I am keen to implement this feature and would appreciate guidance on validating these changes and the steps required to implement them. If this proposal is approved, I am ready to start working on it immediately.

Implementation

The proposed changes include:

Vue Component Changes:

Modify the Navbar component to include a reactive activeLink property.
Add a setActive method to update the activeLink property and navigate to the clicked link.

Styling Changes:

Update the styles in the Navbar component to highlight the active link. The active link will be indicated with a black color and bold text or an underline.

Example Code

Here is an example of how the changes can be implemented:

<template>
  <nav class="primary-menu">
    <ul>
      <li>
        <a 
          :class="{ active: activeLink === 'https://creativecommons.org/about/mission' }"
          href="https://creativecommons.org/about/mission"
          @click.prevent="setActive('https://creativecommons.org/about/mission')"
        >
          Who We Are
        </a>
      </li>
      <li>
        <a 
          :class="{ active: activeLink === 'https://creativecommons.org/about' }"
          href="https://creativecommons.org/about"
          @click.prevent="setActive('https://creativecommons.org/about')"
        >
          What We Do
        </a>
      </li>
      <li>
        <a 
          :class="{ active: activeLink === 'https://creativecommons.org/share-your-work' }"
          href="https://creativecommons.org/share-your-work"
          @click.prevent="setActive('https://creativecommons.org/share-your-work')"
        >
          Licenses and Tools
        </a>
      </li>
      <li>
        <a 
          :class="{ active: activeLink === 'https://creativecommons.org/blog' }"
          href="https://creativecommons.org/blog"
          @click.prevent="setActive('https://creativecommons.org/blog')"
        >
          Blog
        </a>
      </li>
      <li>
        <a 
          :class="{ active: activeLink === 'https://creativecommons.org/about/support-cc/' }"
          href="https://creativecommons.org/about/support-cc/"
          @click.prevent="setActive('https://creativecommons.org/about/support-cc/')"
        >
          Support Us
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      activeLink: window.location.href
    };
  },
  methods: {
    setActive(link) {
      this.activeLink = link;
      window.location.href = link;
    }
  },
  mounted() {
    this.activeLink = window.location.href;
  }
};
</script>

<style>
.primary-menu ul {
  list-style: none;
  padding: 0;
}

.primary-menu li {
  display: inline-block;
  margin-right: 15px;
}

.primary-menu li a {
  text-decoration: none;
  color: black;
}

.primary-menu li a.active {
  color: red; /* Highlight color for active link */
  font-weight: bold;
}
</style>

[possumbilities]

Thank you for the detailed issue! ❤️

However, solutions likely lie further up the chain of changes in Vocabulary itself.

I'm setting this as blocked, until such time as an appropriate direction is found upstream within Vocabulary.

• [Functionality] explore viability and possibilities of visual active states for primary menu nav vocabulary#45