EJS selecting only a sepcific category

Question

I have this piece of code.

HTML:

<header<% if (  current.source === 'features' ||  current.path[0] === 'index' ||  current.source !== 'customers' ) { %> class="header-white"<% } %>>
<div class="row">
    <div class="small-3 columns">
        <div class="logo">
            <a href="/">
                <svg class="handsontable-logo">
                    <use xlink:href="#handsontable-logo"></use>
                </svg>
            </a>
            <a href="//github.com/handsontable/handsontable" id="github-star" class="star-counter" target="_blank">
                <svg>
                    <use xlink:href="#github-squid"></use>
                </svg>
                <div class="github-star">
                    <div class="triangle"></div>
                    <div data-bind="starsCount">-</div>
                </div>
            </a>
        </div>
    </div>

    <div class="small-9 columns text-right">
        <nav class="mobile-inactive">
            <a href="#" id="mobile-nav-menu">
                <svg>
                    <use xlink:href="#open-mobile-nav"></use>
                </svg>
            </a>
            <ul>
                <li class="mobile-only"><a href="/">Home</a></li>
                <li><a href="/features.html">Features</a></li>
                <li><a
                       href="/examples.html?manual-resize&manual-move&conditional-formatting&context-menu&filters&dropdown-menu&headers">
                        Examples
                    </a></li>
                <li><a href="/download.html">Download</a></li>
                <li><a href="/pricing.html">Pricing</a></li>
                <li><a href="/customers">Case studies</a></li>
                <li><a href="/developers.html">Developers</a></li>
                <li class="mobile-only"><a href="/resellers.html">Resellers</a></li>
                <li class="mobile-only"><a href="/blog/">Blog</a></li>
                <li class="mobile-only"><a href="/contact.html">Contact</a></li>
                <li class="news">
                    <svg>
                        <use xlink:href="#bell"></use>
                    </svg>
                </li>
                <li><a href="//my.handsontable.com/sign-in.html"
                       class="btn size-small bg-green-light bg-lighten text-white">
                        Sign in
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

SCSS:

header {
@include absolute-top-left (0, 0);
width: 100%;
padding: 34px 0 0;
z-index: 1;

.logo {
@include relative-top-left (-3px, 0);

@media only screen and (min-width: $largeWidth) {
  @include relative-top-left (10px, 0);
 }

svg {

  &.handsontable-logo {
    @include rectangle (130px, 25px);
    fill: $baseGray;
  }
}
}

 /* Begin: This allows to stretch the mobile menu to 100% of width of the viewport */
 & > .row > .columns:last-child {
position: static;
 }
  /* End */

nav {

& > a {
  @include absolute-top-right (4px, 5px);
  padding: 20px;
  display: block;
  z-index: 11;

  @media only screen and (min-width: $largeWidth) {
    display: none;
  }

  svg {
    @include square (28px);
    fill: $baseGray;
  }
}

ul {
  display: none;

  @media only screen and (min-width: $largeWidth) {
    display: block;
  }

  li {
    padding: 0 19px;
    display: inline-block;

    &:last-child {
      padding-right: 0;
    }

    &.mobile-only {
      display: none;
    }

    &.news {
      padding-right: 32px;
      position: relative;

      svg {
        @include square (18px);
        @include relative-top-left (4px, 0);
        fill: $baseGray;
      }

      #HW_badge_cont {
        @include absolute-top-left (0, 13px);

        #HW_badge {
          @include square (12px);
          @include relative-top-left (0, 0);
          line-height: 13px;
          background-color: $brandRedActive;

          &.HW_softHidden {
            opacity: .4;
            background-color: $brandVibrantGreenActive;
          }
        }
      }
    }

    a, a:hover, a:active, a:visited {
      font-size: 13px;
      color: $baseGray;
    }

    a:hover {
      color: $darkGray;
    }

  }
}
}

  /* Menu visible only on mobile devices */
 nav.mobile-active {

@media only screen and (min-width: $largeWidth) {
  display: none;
  }

& > a {

  svg {
    fill: $darkGray;
  }
}

ul {
  @include absolute-top-left (12px, 2%);
  width: 96%;
  padding: 66px 0 8px;
  display: block;
  text-align: center;
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 18px rgba(0, 0, 0, 0.15);
  background: #fff;

  li {
    width: 49%;
    padding: 10px 0;

    &.mobile-only {
      display: inline-block;
    }

    a, a:hover, a:active, a:visited {
      font-size: 18px;
      color: $brandBlue;

      &.btn {
        width: 100%;
        color: #fff;
        font-size: 18px;
      }
    }

    &:last-child {
      width: 90%;
      padding-top: 40px;
    }

    &.news {
      display: none;
    }
  }
}
 }

 &.header-white {

.logo {

  .github-star {
    border: 1px solid $darkWhite;
    color: $darkWhite;
    font-weight: 600;

    .triangle {
      border-right-color: $darkWhite;
    }
  }

  svg {
    fill: $darkWhite;
  }
}

a, a:hover, a:active, a:visited {
  color: #fff;
}

a:hover:not(.btn) {
  color: $brandFeatherBlue;
}

svg, .news svg {
  fill: #fff;
   }
 }
}

My problem is that I want to change navigation color to customers page only.

The problem is that all subpages within the customer's category are also having recolored navigation style.

So:

customers === white
| subfolder === white
| subfolder === white
| subfolder === white

And I want to keep the subfolders in the customer's directory with the original color of navigation.

Any help please, I'm not a JS dev at the moment I'm trying to understand how does it work?

Answer 1

Ok problem solved:

I was approaching it in a wrog way, instead trying to link the exact path like here:

 <header<% if (  current.source === 'features' ||  current.path[0] === 'index' ||  current.source !== 'customers' ) { %> class="header-white"<% } %>>

All I had to do was identify the exact length of the link like here:

 <header<% if (  current.source === 'features' ||  current.path[0] === 'index' || current.path[1] === 'index' ) { %> class="header-white"<% } %>>

It worked for me the only problem here was identifying subpages name and link length.

Answer 2

Cutting it down to the relevant bits you've got this is your SCSS:

header {
  &.header-white {
    a, a:hover, a:active, a:visited {
      color: #fff;
    }
  }
}

That's going to set all your links to white.

Assuming this is your 'customers' section:

<li><a href="/customers">Case studies</a></li>

you can add a class to single it out:

<li><a class="customers" href="/customers">Case studies</a></li>

and then update the CSS accordingly:

header {
  &.header-white {
    a.customers {
      &, &:hover, &:active, &:visited {
        color: #fff;
      }
    }
  }
}