(improvements) Navigation menu

src/ui/NavMenu/NavMenu.helpers.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import classNames from 'classnames'
 
 import Icons from 'icons'
 import config from 'config'
@@ -93,3 +94,5 @@ export const getSections = (menuType, isTurkishSite) => {
       return []
   }
 }
+
+export const getSectionClasses = (active) => classNames('section_title', { active })

src/ui/NavMenu/NavMenu.js

@@ -21,7 +21,7 @@ import { getPath, getTarget } from 'state/query/utils'
 import { toggleNavigationDrawer } from 'state/ui/actions'
 import { getIsNavigationDrawerOpen } from 'state/ui/selectors'
 import menuTypes from './NavMenu.constants'
-import { getSections, getMenuItemChevron } from './NavMenu.helpers'
+import { getSections, getMenuItemChevron, getSectionClasses } from './NavMenu.helpers'
 
 const {
   MENU_MY_ACCOUNT,
@@ -107,6 +107,7 @@ const NavMenu = ({
       <MenuItem
         icon={<Icons.ADDRESS_BOOK />}
         text={t('navItems.myAccount.title')}
+        className={getSectionClasses(isMyAccountOpen)}
         labelElement={getMenuItemChevron(isMyAccountOpen)}
         onClick={() => handleMenuClick(MENU_MY_ACCOUNT)}
       />
@@ -120,6 +121,7 @@ const NavMenu = ({
       <MenuItem
         icon={<Icons.BOOK />}
         text={t('navItems.myHistory.title')}
+        className={getSectionClasses(isMyHistoryOpen)}
         labelElement={getMenuItemChevron(isMyHistoryOpen)}
         onClick={() => handleMenuClick(MENU_MY_HISTORY)}
       />
@@ -135,6 +137,7 @@ const NavMenu = ({
           <MenuItem
             icon={<Icons.CART />}
             text={t('navItems.merchantHistory.title')}
+            className={getSectionClasses(isMerchantHistoryOpen)}
             labelElement={getMenuItemChevron(isMerchantHistoryOpen)}
             onClick={() => handleMenuClick(MENU_MERCHANT_HISTORY)}
           />
@@ -150,6 +153,7 @@ const NavMenu = ({
       <MenuItem
         icon={<Icons.CHART />}
         text={t('navItems.marketHistory.title')}
+        className={getSectionClasses(isMarketHistoryOpen)}
         labelElement={getMenuItemChevron(isMarketHistoryOpen)}
         onClick={() => handleMenuClick(MENU_MARKET_HISTORY)}
       />

src/ui/NavMenu/_NavMenu.scss

@@ -6,19 +6,6 @@
   clip-path: inset(0 -1px 0 0);
   border-bottom: 1px solid var(--bgColor2);
 
-  .reports_title {
-    pointer-events: none;
-
-    svg {
-      margin-left: 1px;
-      margin-right: 9px;
-    }
-
-    .bp3-fill {
-      width: 200px;
-    }
-  }
-
   &--popover {
     box-shadow: 0 0 1px var(--menuPopoverShadow);
 
@@ -50,11 +37,26 @@
   .bp3-menu-item {
     display: flex;
     width: 100%;
-    height: 44px;
-    line-height: 44px;
-    padding: 0 0 0 20px;
+    height: 34px;
+    line-height: 34px;
+    padding: 0 0 0 51px;
     font-size: 1rem;
     border-radius: 0;
+    color: var(--color2);
+
+    &.active,
+    &.reports_title {
+      height: 44px;
+      line-height: 44px;
+      padding: 0 0 0 20px;
+      color: var(--color1);
+    }
+
+    &.section_title {
+      height: 44px;
+      line-height: 44px;
+      padding: 0 0 0 20px;
+    }
 
     svg {
       height: 44px;
@@ -91,11 +93,17 @@
     border-top: 1px solid var(--borderColor);
   }
 
-  .sub_items_menu {
-    .bp3-collapse-body {
-      li {
-        padding-left: 40px;
-      }
+  .reports_title {
+    padding: 0 0 0 20px;
+    pointer-events: none;
+
+    svg {
+      margin-left: 1px;
+      margin-right: 9px;
+    }
+
+    .bp3-fill {
+      width: 200px;
     }
   }