@triptease/tt-navbar 0.0.7 → 0.0.8

package/dist/web/tt-navbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.7
+* @triptease/tt-navbar v0.0.8
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -593,15 +593,29 @@ function n4(t3) {
 // src/styles.ts
 var styles = i`
   :host {
+    --nav-bar-width: 260px;
+
     display: block;
     height: 100vh;
-    max-width: 260px;
+  }
+
+  * {
+    box-sizing: border-box;
   }
 
   nav {
+    min-width: var(--nav-bar-width);
+    width: var(--nav-bar-width);
+    min-height: 100vh;
+    height: max-content;
     display: flex;
+    align-items: start;
+    gap: var(--space-scale-3-5);
     flex-direction: column;
-    height: 100%;
+    background-color: var(--color-surface-inverted-100);
+    color: var(--color-text-inverted-400);
+    padding-top: var(--space-scale-2);
+    padding-bottom: var(--space-scale-2);
   }
 
   nav details div {
@@ -610,11 +624,129 @@ var styles = i`
   }
 
   hr {
-    background: black;
     width: 100%;
     height: 1px;
+    background-color: var(--color-surface-inverted-200);
     border: none;
   }
+
+  #tertiary-nav {
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+    gap: var(--space-scale-2);
+    width: 100%;
+
+    .external-link {
+      font-size: var(--font-size-100);
+      line-height: var(--font-line-height-100);
+
+      .icon {
+        width: var(--space-scale-2);
+        height: var(--space-scale-2);
+      }
+    }
+  }
+
+  .icon {
+    width: var(--space-scale-3);
+    height: var(--space-scale-3);
+    display: inline;
+    color: var(--nav-item-color);
+  }
+
+  a {
+    font-size: var(--font-size-100);
+    line-height: var(--font-line-height-100);
+    gap: var(--space-scale-1-5);
+    border-radius: var(--border-radius-100);
+    color: var(--nav-item-color);
+    text-decoration: none;
+    padding: var(--space-scale-1);
+    width: 100%;
+  }
+
+  details {
+    width: 100%;
+    border-radius: var(--border-radius-100);
+
+    summary {
+      font-size: var(--font-size-100);
+      line-height: var(--font-line-height-100);
+      position: relative;
+      display: flex;
+      align-items: baseline;
+
+      &::marker {
+        content: '';
+      }
+    }
+
+    svg.chevron {
+      margin-left: auto;
+      margin-right: var(--space-scale-1);
+      width: var(--space-scale-2);
+    }
+
+    &[open] svg.chevron {
+      transform: rotate(180deg);
+    }
+
+    .dropdown-items {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  details > summary {
+    display: flex;
+    gap: var(--space-scale-1-5);
+    padding: var(--space-scale-1);
+    border-radius: var(--border-radius-100);
+    color: var(--nav-item-color);
+    align-items: center;
+
+    a {
+      color: var(--nav-item-color);
+    }
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-surface-inverted-200);
+      border-radius: var(--border-radius-100);
+      text-decoration: none;
+    }
+  }
+
+  .sub-nav-item {
+    padding-left: 44px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: var(--color-text-inverted-400);
+    font-size: var(--font-size-100);
+    line-height: var(--font-line-height-100);
+
+    button {
+      color: var(--color-text-inverted-400);
+      padding: 0;
+    }
+  }
+
+  .sub-nav-item:hover,
+  .sub-nav-item:focus-visible,
+  a:hover,
+  a:focus-visible {
+    background-color: var(--color-surface-inverted-200);
+    border-radius: var(--border-radius-100);
+    text-decoration: none;
+    color: var(--color-text-inverted-400);
+
+    .icon {
+      color: var(--color-text-inverted-400);
+    }
+  }
+
+
 `;
 
 // src/TtNavbar.ts