WIP collapsed view.

web-illinois · Sep 1, 2024 · eddc68d · eddc68d
1 parent da953ee
commit eddc68d
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -16,8 +16,9 @@ smaller screens, it collapsed to an expanding widget labeled "In This Section".
 
 The following attributes can be used:
 
-- `collapse` - make the menu always collapse regardless of viewport size.
-- `open="true"` and `open="false"` are bound to the open/collapsed state of the menu. 
+- `collapsed="true"` - make the menu always collapse regardless of viewport size.
+- `collapsed="false"` - prevent the menu from collapsing.
+- `open="true"` and `open="false"` are bound to the open/collapsed state of the menu.
 - `label` - the text shown when the menu is collapsed. The default value is
   "Pages In This Section". This is also used as the accessible label of the navigation.
 

diff --git a/samples/index.html b/samples/index.html
@@ -57,7 +57,7 @@
 
     <ilw-columns mode="1x3" gap="40px">
         <aside>
-            <ilw-section-nav>
+            <ilw-section-nav open="true">
                 <a href="#" class="ilw-section-nav--root" aria-current="page">Programs of Study</a>
                 <a href="#">Undergraduate Degrees</a>
                 <ilw-section-nav>
@@ -81,7 +81,15 @@
                 </ilw-section-nav>
                 <a href="#">Undergraduate Degrees</a>
             </ilw-section-nav>
-            <ilw-section-nav collapse>
+            <ilw-section-nav collapse="false">
+                <div><a href="#" class="ilw-section-nav--root">Programs of Study</a></div>
+                <div><a href="#" aria-current="page">Undergraduate Degrees</a></div>
+                <div><ilw-section-nav>
+                    <div><a href="#">Animal Sciences Major</a></div>
+                    <div><a href="#">Computer & Animal Science</a></div>
+                </ilw-section-nav></div>
+            </ilw-section-nav>
+            <ilw-section-nav collapse="true">
                 <div><a href="#" class="ilw-section-nav--root">Programs of Study</a></div>
                 <div><a href="#" aria-current="page">Undergraduate Degrees</a></div>
                 <div><ilw-section-nav>

diff --git a/src/ilw-section-nav.css b/src/ilw-section-nav.css
@@ -18,16 +18,18 @@
         --ilw-section-nav--item-padding-bottom: 0;
         --ilw-section-nav--item-padding-left: 1.25rem;
 
-
         --ilw-section-nav--level1-border: 1px solid var(--il-storm-lighter-3);
 
         --ilw-section-nav--root-font-size: 1.25rem;
         --ilw-section-nav--root-background: var(--il-storm-lighter-4);
         --ilw-section-nav--root-font-weight: 700;
+
+        --ilw-section-nav--toggle-font-size: 1rem;
     }
 }
 
 ilw-section-nav {
+    container-type: inline-size;
     a {
         color: var(--ilw-section-nav--color);
         text-decoration: var(--ilw-link--focused-background-color);
@@ -120,10 +122,16 @@ ilw-section-nav {
         border-top: var(--ilw-section-nav--level1-border);
     }
 
-    a.ilw-section-nav--root {
-        font-size: var(--ilw-section-nav--root-font-size);
-        background: var(--ilw-section-nav--root-background);
-        font-weight: var(--ilw-section-nav--root-font-weight);
-        border-top: none;
+    &[is-root] {
+        a.ilw-section-nav--root {
+            font-size: var(--ilw-section-nav--root-font-size);
+            background: var(--ilw-section-nav--root-background);
+            font-weight: var(--ilw-section-nav--root-font-weight);
+            border-top: none;
+        }
+        /* This removes the border if the root `a` tag isn't a direct child */
+        & > *:has(a.ilw-section-nav--root) {
+            border-top: none;
+        }
     }
 }
diff --git a/src/ilw-section-nav.js b/src/ilw-section-nav.js
@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import styles from "./ilw-section-nav.styles";
+import styles, { chevron } from "./ilw-section-nav.styles";
 import "./ilw-section-nav.css";
 import { ManualSlotController } from "./ManualSlotController.js";
 import { map } from "lit/directives/map.js";
@@ -14,7 +14,7 @@ class SectionNav extends LitElement {
     static get properties() {
         return {
             theme: {},
-            collapse: { type: Boolean },
+            collapse: { },
             open: { reflect: true },
             label: {},
             noRoot: { type: Boolean, attribute: "no-root" },
@@ -32,7 +32,7 @@ class SectionNav extends LitElement {
     constructor() {
         super();
         this.theme = "";
-        this.collapse = false;
+        this.collapse = null;
         this.open = "false";
         this.label = "Pages In This Section";
         this.noRoot = false;
@@ -53,16 +53,9 @@ class SectionNav extends LitElement {
 
     /**
      * Toggle between open and closed states when collapsed.
-     *
-     * @arg {"true" | "false" | undefined} open Provide the argument to force a specific state.
      */
-    toggle(open = this.open) {
-        if (open) {
-            if (this.open === open) {
-                return;
-            }
-            this.open = open;
-        } else if (this.open === "true") {
+    toggle() {
+        if (this.open === "true") {
             this.open = "false";
         } else {
             this.open = "true";
@@ -86,14 +79,18 @@ class SectionNav extends LitElement {
         if (this.isRoot) {
             const classes = {
                 "section-nav-top": true,
-                "force-collapse": this.collapse,
+                "auto-collapse": !this.collapse,
+                "force-collapse": this.collapse === "true",
+                "prevent-collapse": this.collapse === "false",
                 "style-root": !this.noRoot,
+                "section-nav-full-width": !this.collapse,
                 open: this.open === "true",
             };
             return html` <div class=${classMap(classes)}>
                 <nav aria-labelledby="section-nav-toggle">
-                    <button id="section-nav-toggle" @click="${this.toggle}">
+                    <button id="section-nav-toggle" type="button" @click="${this.toggle}">
                         ${this.label}
+                        ${chevron}
                     </button>
                     ${ul}
                 </nav>

diff --git a/src/ilw-section-nav.styles.js b/src/ilw-section-nav.styles.js
@@ -1,4 +1,8 @@
-import { css } from 'lit';
+import { css, html } from "lit";
+
+export const chevron = html`<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.4 23.82">
+      <path fill="currentColor" d="m39.34,1.06c-1.41-1.41-3.7-1.41-5.12,0l-14.02,14.02L6.18,1.06C4.76-.35,2.47-.35,1.06,1.06s-1.41,3.7,0,5.12l16.58,16.58c1.41,1.41,3.7,1.41,5.12,0L39.34,6.18c1.41-1.41,1.41-3.7,0-5.12Z"></path>
+    </svg>`
 
 export default css`
     :host {
@@ -21,7 +25,6 @@ export default css`
         padding-left: 0;
         font-size: var(--ilw-section-nav--level0-font-size);
     }
-    
 
     .section-nav-list--level-1 {
         font-size: var(--ilw-section-nav--level1-font-size);
@@ -31,6 +34,62 @@ export default css`
     }
 
     #section-nav-toggle {
+        border-top: none;
+        border-bottom: 1px solid var(--il-storm-lighter-3);
+        border-left: none;
+        border-right: none;
+        box-sizing: border-box;
+        width: 100%;
+        
+        line-height: var(--ilw-section-nav--line-height);
+        font-weight: var(--ilw-section-nav--root-font-weight);
+        font-size: var(--ilw-section-nav--toggle-font-size);
+        text-align: left;
+        padding-left: var(--ilw-section-nav--item-padding-left);
+        padding-right: var(--ilw-margin--side);
+        
+        background: var(--il-storm-lighter-4);
+        
         display: none;
+        position: relative;
+    }
+    
+    #section-nav-toggle:active {
+        background: var(--il-storm-lighter-3);
+    }
+    
+    #section-nav-toggle .chevron {
+        height: 0.5rem;
+        position: absolute;
+        right: var(--ilw-margin--side);
+        top: calc(50% - 0.25rem);
+    }
+    
+    .open #section-nav-toggle .chevron {
+        transform: scale(-1);
+    }
+    
+    @media screen and (max-width: 700px) {
+        :is(.auto-collapse, .force-collapse) #section-nav-toggle {
+            display: block;
+        }
+        
+        :is(.auto-collapse, .force-collapse) .section-nav-list--level-0 {
+            display: none;
+        }
+
+        :is(.auto-collapse, .force-collapse).open .section-nav-list--level-0 {
+            display: block;
+        }
+
+        .section-nav-full-width {
+            left:50%;
+            margin-left:-50vw;
+            margin-right:-50vw;
+            position:relative;
+            right:50%;
+            width: 100vw;
+            box-sizing: border-box;
+        }
     }
 `;