Navigation is a simple way to get to the important/needed pages via a single click. It is found on all pages’ headers and footers.
This element is visible on every page
The navigation layout should be represented for desktop and mobile.
It should have all necessary elements with hover states and expanded states if such is necessary. If the element has inputs and some specific states are necessary excluding default ones, it should be represented as well.
<aside> ℹ️ Usually, styling this element takes from-to: 8h
</aside>
Theme the Header component. On mobile, there also is a NavigationTabs component.
<aside> ➡️ Additionally, adjustments for smaller elements may be needed.
</aside>
It’s important to pay attention to the variables inside Header.style.scss. They control not only the header size but the pages spacing. Make sure nothing is being covered by the header across the pages.
On the Header.component.js, the object renderMap is responsible for mapping the functions that will render each component inside the header, such as the logo, the search bar, the cart icon, etc. Each key is the element name and the value is the function that will render it.
There can be found which function is to be changed in case the rendering logic needs to be overridden for a specific element.
If you want to remove a component that will never be rendered, override the renderMap object and remove the element from there. In the example below, only the compare button was removed from the header, leaving the renderMap like this:
renderMap = {
cancel: this.renderCancelButton.bind(this),
back: this.renderBackButton.bind(this),
close: this.renderCloseButton.bind(this),
title: this.renderTitle.bind(this),
logo: this.renderLogo.bind(this),
search: this.renderSearchField.bind(this),
currency: this.renderCurrencySwitcher.bind(this),
account: this.renderAccount.bind(this),
minicart: this.renderMinicart.bind(this),
share: this.renderShareWishListButton.bind(this),
ok: this.renderOkButton.bind(this)
};
<aside> ➡️
Note that some elements are by default exclusive for mobile, so they will not be displayed on desktop even if present in renderMap. Override the render function in case you want to change this behavior for a specific element.
</aside>
The stateMap object is responsible for mapping custom rendering rules based on the navigation state. Each key represents a navigation state and the value is an object with boolean attributes, which keys are the element's name.
stateMap = {
[<NAVIGATION-STATE>]: {
<ELEMENT-NAME>: <BOOLEAN-VALUE>
},
}
In case you want to change the rendering for a specific navigation state:
stateMap object....this.stateMap if you’re not going to override everything.A real implementation will look something like this:
stateMap = {
...this.stateMap,
[CART]: {
title: true,
back: true
}
};
Here, were customized how the header should be rendered in the cart. By default, only the title is rendered in the cart. Here the back button was added.