active tab color (#62)

config.toml

@@ -116,7 +116,7 @@ disableKinds = ["taxonomy", "term"]
  weight = 2
 
 [[menu.main]]
- name = 'Quick Demo'
+ name = 'Demo'
  url = '/overview/demo'
  parent = 'overview'
  weight = 3

themes/haystack/assets/sass/components/_navigation.scss

@@ -14,8 +14,8 @@
  }
 
  // Current page link
- li.active > a {
- color: var(--color-yellow);
+ li.active > a, a.active {
+ color: var(--color-yellow) !important;
  }
 
  ul {
@@ -98,7 +98,7 @@
  display: flex;
 
  &:hover {
- > a {
+ > a:not(.active) {
  color: var(--color-dark-blue);
  }
  }
@@ -172,15 +172,15 @@
 // Dark
 .header-dark .desktop-nav {
 
- li > a {
+ li > a:not(.active) {
  color: var(--color-light-grey);
 
  &:hover {
  color: var(--color-white);
  }
  }
 
- li.active > a {
+ li.active > a, a.active {
  color: var(--color-yellow);
  }
 
@@ -195,7 +195,7 @@
 
  li.dropdown-menu {
  &:hover {
- > a {
+ > a:not(.active) {
  color: var(--color-white);
  }
  }

themes/haystack/layouts/partials/footer.html

@@ -47,7 +47,7 @@
  >
  </li>
  <li>
- <a aria-label="Hugging Face" href="/">Open NLP Meetup</a>
+ <a aria-label="Join the Open NLP Meetup" href="https://www.meetup.com/open-nlp-meetup/">Open NLP Meetup</a>
  </li>
  </ul>
 

themes/haystack/layouts/partials/navigation-mobile.html

@@ -28,7 +28,7 @@
  <ul class="sub-menu" role="list">
  {{ range .Children }}
  <li
- class="{{ if (eq $currentPage.RelPermalink .URL) }}
+ class="{{ if (in $currentPage.RelPermalink .URL) }}
  active
  {{ end }}"
  >
@@ -40,7 +40,7 @@
  {{ else }}
  {{/* If no children, add a link */}}
  <li>
- <a href="{{ .URL }}" {{ if strings.HasPrefix .URL "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Name }}</a>
+ <a href="{{ .URL }}" class="{{ if (in $currentPage.RelPermalink .URL) }}active{{ end }}" {{ if strings.HasPrefix .URL "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Name }}</a>
  </li>
  {{ end }}
  {{ end }}

themes/haystack/layouts/partials/navigation.html

@@ -6,17 +6,34 @@
  {{/* If nav item has children, add a dropdown menu */}}
  {{ if .HasChildren }}
  <li class="dropdown-menu">
- <a href="#" class="dropdown-button">
+ {{ $childSlice := slice }}
+ {{ range .Children }}
+ {{ $childSlice = $childSlice | append .Name }}
+ {{ end }}
+
+ <a
+ href="#"
+ class="dropdown-button {{ if in $childSlice $currentPage.Name }}
+ active
+ {{ end }}"
+ >
  {{ .Name }}
  </a>
+
  <ul class="sub-menu" role="list">
  {{ range .Children }}
  <li
  class="{{ if (in $currentPage.RelPermalink .URL) }}
  active
  {{ end }}"
  >
- <a class="btn arrow-link" href="{{ .URL }}" {{ if strings.HasPrefix .URL "http" }} target="_blank" rel="noopener"{{ end }}>
+ <a
+ class="btn arrow-link"
+ href="{{ .URL }}"
+ {{ if strings.HasPrefix .URL "http" }}
+ target="_blank" rel="noopener"
+ {{ end }}
+ >
  <div class="button-wrapper">
  <svg
  xmlns="http:https://www.w3.org/2000/svg"
@@ -46,7 +63,14 @@
  {{ else }}
  {{/* If no children, add a link */}}
  <li>
- <a href="{{ .URL }}" {{ if strings.HasPrefix .URL "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Name }}</a>
+ <a
+ href="{{ .URL }}"
+ class="{{ if (in $currentPage.RelPermalink .URL) }}active{{ end }}"
+ {{ if strings.HasPrefix .URL "http" }}
+ target="_blank" rel="noopener"
+ {{ end }}
+ >{{ .Name }}</a
+ >
  </li>
  {{ end }}
  {{ end }}