reorganize CustomNavigation styles

src/client/js/components/CustomNavigation.jsx

@@ -64,9 +64,9 @@ export const CustomNav = (props) => {
   }, [activeTab, navTabRefs, navTabMapping]);
 
   return (
-    <>
+    <div className="grw-custom-nav">
       <div ref={navContainer}>
-        <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
+        <Nav className="nav-title">
           {Object.entries(navTabMapping).map(([key, value]) => {
 
             const isActive = activeTab === key;
@@ -87,7 +87,7 @@ export const CustomNav = (props) => {
         </Nav>
       </div>
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
-    </>
+    </div>
   );
 
 };

src/client/js/components/NotFoundPage.jsx

@@ -26,7 +26,7 @@ const NotFoundPage = (props) => {
   };
 
   return (
-    <div className="grw-custom-navigation mt-5 on-edit">
+    <div className="mt-5 d-edit-none">
       <CustomNavigation navTabMapping={navTabMapping} />
     </div>
   );

src/client/js/components/TrashPageList.jsx

@@ -19,7 +19,7 @@ const TrashPageList = (props) => {
   };
 
   return (
-    <div className="grw-custom-navigation mt-5">
+    <div className="mt-5 d-edit-none">
       <CustomNavigation navTabMapping={navTabMapping} />
     </div>
   );

src/client/styles/scss/_navbar.scss

@@ -76,14 +76,25 @@
   }
 }
 
-.grw-custom-navigation {
+.grw-custom-nav {
+  .nav-title {
+    flex-wrap: nowrap;
+  }
+
+  .nav-link {
+    padding: 1rem 1.5rem;
+
+    svg {
+      width: 17px;
+      height: 17px;
+      margin-right: 5px;
+      vertical-align: text-bottom;
+    }
+  }
+
   .grw-nav-slide-hr {
-    border-bottom: 2px solid;
+    border-top: 0rem;
+    border-bottom: 3px solid;
     transition: 0.3s ease-in-out;
   }
-  .nav-link svg {
-    width: 17px;
-    height: 17px;
-    margin-right: 5px;
-  }
 }

src/client/styles/scss/_on-edit.scss

@@ -56,11 +56,6 @@ body.on-edit {
     }
   }
 
-  // hide when Editor
-  .grw-custom-navigation {
-    display: none;
-  }
-
   // hide unnecessary elements
   .d-edit-none {
     display: none !important;

src/client/styles/scss/_page_accessaries_modal.scss

@@ -1,30 +1,10 @@
 .grw-page-accessories-modal {
-  .nav-title {
-    flex-wrap: nowrap;
-
-    li {
-      a.nav-link {
-        padding: 1rem 1.5rem;
-      }
-    }
-  }
   .modal-header {
     button.close {
       margin: auto 0rem auto auto;
     }
   }
 
-  .grw-nav-slide-hr {
-    border-top: 0rem;
-    border-bottom: 3px solid;
-    transition: 0.3s ease-in-out;
-  }
-  .nav-link svg {
-    width: 17px;
-    height: 17px;
-    margin-right: 5px;
-  }
-
   .grw-modal-body-style {
     max-height: calc(100vh - 100px);
   }

src/client/styles/scss/theme/_apply-colors.scss

@@ -327,47 +327,31 @@ ul.pagination {
   border-color: $bordercolor-toc;
 }
 
-.grw-custom-navigation {
-  .nav-title {
-    color: $color-link;
-  }
-  .nav-link svg {
-    fill: $color-link;
-  }
-  .grw-nav-slide-hr {
-    border-color: $color-link;
-  }
-}
+.grw-custom-nav {
+  .nav-item {
+    .nav-link {
+      color: $color-link;
+      svg {
+        fill: $color-link;
+      }
 
-.grw-page-accessories-modal {
-  .nav-title {
-    color: $color-link;
+      // Disabled state lightens text
+      &.disabled {
+        color: $nav-link-disabled-color;
+        svg {
+          fill: $nav-link-disabled-color;
+        }
+      }
+    }
   }
+
   .modal-header {
     button.close {
       color: $secondary;
     }
   }
 
-  .modal-title {
-    position: relative;
-  }
-
-  .nav-link {
-    &:hover {
-      background-color: rgba($link-color, 0.08);
-    }
-  }
-  .nav-link svg {
-    fill: $color-link;
-  }
-  .modal-split-hr {
-    background-color: $bordercolor-nav-tabs;
-  }
-
   .grw-nav-slide-hr {
-    position: absolute;
-    bottom: 0px;
     border-color: $color-link;
   }
 }