Add subnav behavior to SidenavItem module

atst/ui_modules.py

@@ -16,10 +16,11 @@ class Icon(UIModule):
               "components/icon.html.to", svg=svg.read(), name=name, classes=classes)
 
 class SidenavItem(UIModule):
-    def render(self, label, href, active=False, icon=None):
+    def render(self, label, href, active=False, icon=None, subnav=None):
         return self.render_string(
           "navigation/_sidenav_item.html.to",
           label=label,
           href=href,
           active=active,
-          icon=icon)
+          icon=icon,
+          subnav=subnav)

scss/elements/_sidenav.scss

@@ -44,6 +44,7 @@
           &--active {
             @include h5;
             color: $color-primary;
+            box-shadow: none;
           }
         }
       }
@@ -55,9 +56,21 @@
       li {
         .sidenav__link {
           @include h5;
-          padding: ($gap * .75) ($gap * 3);
+          padding: $gap * .75;
+          padding-left: 4.5rem;
           border: 0;
           font-weight: normal;
+
+          .sidenav__link-icon {
+            @include icon-size(12);
+            flex-shrink: 0;
+            margin-right: 1.5rem;
+            margin-left: -3rem
+          }
+
+          .sidenav__link-label {
+            padding-left: 0;
+          }
         }
       }
     }

static/icons/plus.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M6.966 6.992V1.009C6.988.417 7.322-.052 8.091.005c.505.074.884.488.903 1.004v5.966c2.049-.012 4.096-.002 6.143.073 1.031.113 1.292 1.968-.074 2.017H8.994v6.037c-.039 1.076-1.98 1.313-2.028 0V9.065H.898c-1.076-.039-1.313-1.972 0-2.02 2.022 0 4.045-.031 6.068-.053z" fill-rule="nonzero"/></svg>

templates/navigation/_sidenav_item.html.to

@@ -6,4 +6,19 @@
 
     <span class="sidenav__link-label">{{label}}</span>
   </a>
+
+  {% if subnav and active %}
+    <ul>
+    {% for item in subnav %}
+      <li>
+        <a class="sidenav__link {% if item["active"] %}sidenav__link--active{% end %}" href="{{item["href"]}}" title="{{item["label"]}}">
+          {% if "icon" in item %}
+            {% module Icon(item["icon"], classes="sidenav__link-icon") %}
+          {% end %}
+          <span class="sidenav__link-label">{{item["label"]}}</span>
+        </a>
+      </li>
+    {% end %}
+    </ul>
+  {% end %}
 </li>

templates/navigation/global_navigation.html.to

@@ -1,11 +1,24 @@
 <div class="global-navigation sidenav global-navigation__context--{{context}}">
   <ul>
     {% if dev() %}
-      {% module SidenavItem("Styleguide", href="/styleguide", icon="visible", active=matchesPath('/styleguide')) %}
+      {% module SidenavItem("Styleguide",
+        href="/styleguide",
+        icon="visible",
+        active=matchesPath('/styleguide'),
+        subnav=[
+          {"label":"Subnav 1", "href":"/styleguide?subnav1", "icon": "plus", "active": matchesPath('/styleguide?subnav1')},
+          {"label":"Subnav 2", "href":"/styleguide?subnav2", "active": matchesPath('/styleguide?subnav2')},
+        ]) %}
     {% end %}
 
-    {% module SidenavItem("Requests", href="/requests", icon="document", active=matchesPath('/requests')) %}
+    {% module SidenavItem("Requests",
-    {% module SidenavItem("+ New Request", href="/requests/new", icon="", active=matchesPath('/requests/new')) %}
+      href="/requests",
+      icon="document",
+      active=matchesPath('/requests'),
+      subnav=[
+        {"label":"New Request", "href":"/requests/new", "icon": "plus", "active": matchesPath('/requests/new')},
+      ]
+      ) %}
     {% module SidenavItem("Workspaces", href="/workspaces", icon="cloud", active=matchesPath('/workspaces')) %}
   </ul>
 </div>