NavBar is an object that can be used to navigate. less/components/NavBar.less provides a predefined style, which is documented below, for most use cases.The NavBar is used both within the app and externally as our primary form of navigation that sits at the top of the viewport. It has three children; NavBar__title, NavBar__left-menu, and NavBar__right-menu.
To use it, give a parent div node a class of NavBar and its three children nodes NavBar__title, NavBar__left-menu, and NavBar__right-menu respectively.
NavBar__left-menu is aligned to the left of the NavBar and has a flex-grow property value of 1. This means it will always remain wider than NavBar__title and NavBar__right-menu.
NavBar__menu__item objects are children objects of NavBar__left-menu and NavBar__right-menu.
NavBar__menu__item__link objects are children objects of NavBar__menu__item.
NavBar__right-menu is aligned to the right of the NavBar and has a flex-grow property value of 0. This means its width will be 100% of the total width of its children.
This element displays a title and is aligned to the left of the NavBar and has a flex-grow property value of 0. This means its width will be 100% of the total width of its children.
This modifier changes the property values of children nodes with a class of NavBar__menu__item__link. The font-weight property value is changed to 600 and the color property value is changed to $outer-space.
This modifier changes the margin-right property value to 0.