Updated divider

Author: djthorpe

src/app/CanvasNavbarElement.js

@@ -38,7 +38,7 @@ export class CanvasNavbarElement extends CanvasSectionElement {
     div {
       display: flex;
       align-items: start;
-      flex: 999 0;
+      flex: 1 0;
     }
     `;
   }

src/app/NavDividerElement.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 
 /**
  * @class NavDividerElement
@@ -19,7 +19,7 @@ export class NavDividerElement extends LitElement {
 
   render() {
     return html`
-      <hr>
+      <li class=${this.classes.join(' ') || nothing}></li>
     `;
   }
 

src/app/NavGroupElement.js

@@ -37,7 +37,7 @@ export class NavGroupElement extends LitElement {
   static get styles() {
     return css`
       :host {
-        flex: 999 0;
+        flex: 1 0;
         height: 100%;
       }
       ul {
@@ -60,10 +60,13 @@ export class NavGroupElement extends LitElement {
         padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
       }
       ::slotted(wc-nav-spacer) {
-        flex: 999;
+        flex: 1;
       }
-      ::slotted(wc-nav-item:not([disabled]):hover) {
-        font-weight: var(--nav-item-hover-font-weight);
+      ul:not([vertical]) ::slotted(wc-nav-divider) {
+        border-left: 1px solid var(--nav-item-divider-color);
+      }
+      ul.vertical ::slotted(wc-nav-divider) {
+          border-top: 1px solid var(--nav-item-divider-color);
       }
       ::slotted(wc-nav-item[selected]) {
         color: var(--nav-item-selected-color);

src/app/NavSpacerElement.js

@@ -20,7 +20,7 @@ export class NavSpacerElement extends LitElement {
   static get styles() {
     return css`
       :host {
-          flex: 999 0;
+          flex: 1 0;
       }
     `;
   }

src/app/app.css

@@ -5,6 +5,7 @@
     --nav-item-hover-font-weight: var(--font-weight-semibold);
     --nav-item-selected-color: var(--light-color);
     --nav-item-disabled-color: var(--grey-40-color);
+    --nav-item-divider-color: var(--grey-20-color);
     --nav-item-selected-background-color: var(--primary-color);
 
     /* icon */

src/index.html

@@ -31,7 +31,6 @@
                 <wc-nav-item name="help" disabled>
                     <nobr><wc-icon name="question-circle" size="medium"></wc-icon> Help</nobr>
                 </wc-nav-item>
-                <wc-nav-divider></wc-nav-divider>
                 <wc-nav-spacer></wc-nav-spacer>
                 <wc-nav-divider></wc-nav-divider>
                 <wc-nav-item>