Updated drawer-navigation

docs/index.html

@@ -6,8 +6,8 @@
 
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
-    <!-- <link rel="stylesheet" href="../dist/index.css"/> -->
+    <link rel="stylesheet" href="../dist/index.css"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/> -->
 
     <style>
       body {
@@ -108,7 +108,10 @@
 
       <drawer-navigation>
         <drawer-section>
-          <drawer-title>Link I</drawer-title>
+          <drawer-title>
+            Link I
+            <drawer-navigation-helper/>
+          </drawer-title>
 
           <drawer-wrap>
             <drawer-children>
@@ -171,7 +174,10 @@
         </drawer-section>
 
         <drawer-section>
-          <drawer-title>Link II</drawer-title>
+          <drawer-title>
+            Link II
+            <drawer-navigation-helper/>
+          </drawer-title>
 
           <drawer-wrap>
             <drawer-children>
@@ -207,7 +213,10 @@
         </drawer-section>
 
         <drawer-section>
-          <drawer-title>Link III</drawer-title>
+          <drawer-title>
+            Link III
+            <drawer-navigation-helper/>
+          </drawer-title>
 
           <drawer-wrap>
             <drawer-children>
@@ -243,7 +252,10 @@
         </drawer-section>
 
         <drawer-section>
-          <drawer-title>Link IV</drawer-title>
+          <drawer-title>
+            Link IV
+            <drawer-navigation-helper/>
+          </drawer-title>
 
           <drawer-wrap>
             <drawer-children>

package.json

@@ -22,7 +22,7 @@
   "homepage": "https://github.com/lbryio/components#readme",
   "husky": {
     "hooks": {
-      "pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
+      "pre-commit": "npm run test:sass; npm run sass:prod"
     }
   },
   "license": "BSD-3-Clause",

sass/button/_index.scss

@@ -1,6 +1,7 @@
 .button {
   fill: currentColor;
   position: relative;
+  white-space: nowrap;
 }
 
 .button--alt {

sass/navigation/_index.scss

@@ -1,29 +1,42 @@
 drawer-navigation {
-  // @include navigation(800);
   width: 100%; height: 5rem;
 
   display: inline-flex;
   flex: 1;
+  font-size: inherit;
+  justify-content: center;
   position: relative;
   z-index: 10;
 }
 
+drawer-navigation-helper { // This is to make mouse movement forgiving
+  width: 0; height: 0;
+  top: 3rem; left: -5rem;
+
+  border-left: 8rem solid transparent;
+  border-right: 8rem solid transparent;
+  border-bottom: 5rem solid transparent;
+  position: absolute;
+}
+
 drawer-section {
-  &:not(:last-of-type) {
+  padding-right: 1rem;
-    padding-right: 1rem;
+  padding-left: 1rem;
-  }
 
   &:not(:hover) {
     drawer-title::after {
       background-color: transparent;
     }
 
+    drawer-navigation-helper,
     drawer-wrap {
       display: none;
     }
   }
 
   &:hover {
+    z-index: 3;
+
     drawer-title::after {
       background-color: $lbry-teal-4;
     }
@@ -37,6 +50,7 @@ drawer-title {
   display: flex;
   line-height: 3;
   position: relative;
+  z-index: 1;
 
   &::after {
     width: 100%; height: 1px;