Menus

4 files changed, 71 insertions, 35 deletions

diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
deleted file mode 100644
index be9d86d..0000000
--- a/tpl/objects/action-menu.pug
+++ /dev/null
@@ -1,35 +0,0 @@
-include icon.pug
-include status-indicator.pug
-
-mixin action-menu
-    .o-action-menu.u-p-static.t-up
-        block
-
-mixin action-menu-item
-    button.o-action-menu__item(disabled=attributes.disabled)
-        .l-media.l-media--flush
-            .l-media__block.o-action-menu__icon-slot
-                if attributes.icon
-                    if attributes.iconIsStatus
-                        +status-indicator(attributes.icon)(class='o-action-menu__icon')
-                    else
-                        +icon(attributes.icon)(class='o-action-menu__icon')
-            .l-media__block.l-media__block--main
-                block
-            .l-media__block.o-action-menu__icon-slot
-                if attributes.postIcon
-                    +icon(attributes.postIcon)(class='o-action-menu__icon')
-
-mixin action-menu-separator
-    .o-action-menu__separator
-
-mixin action-menu-slot
-    -
-        let classes = {
-            'o-action-menu__slot ': true,
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-    div(class=classes)
-        block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 1dd38ef..a8b20d7 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -46,3 +46,14 @@ mixin menu-header
 
 mixin menu-separator
     .o-menu__separator
+
+mixin menu-slot
+    -
+        let classes = {
+            'o-menu__slot ': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+    div(class=classes)
+        block
diff --git a/tpl/objects/popover.pug b/tpl/objects/popover.pug
new file mode 100644
index 0000000..ba93a81
--- /dev/null
+++ b/tpl/objects/popover.pug
@@ -0,0 +1,12 @@
+mixin popover
+    -
+        let classes = {
+            'o-popover': true,
+            'u-p-static': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes, style=styles)
+        block
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
new file mode 100644
index 0000000..511f298
--- /dev/null
+++ b/tpl/objects/side-nav.pug
@@ -0,0 +1,48 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin side-nav
+    -
+        let classes = {
+            'o-side-nav': true,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin side-nav-item
+    -
+        let classes = {
+            'o-side-nav__item':   true,
+            'l-media':        true,
+            'l-media--75':    true,
+            'o-side-nav__header': attributes.header,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        if attributes.icon
+            .l-media__block.o-side-nav__icon-slot
+                if attributes.iconIsStatus
+                    +status-indicator(attributes.icon)(class='o-side-nav__icon')
+                else
+                    +icon(attributes.icon)(class='o-side-nav__icon')
+        .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass })
+            block
+        if attributes.postIcon
+            .l-media__block.o-side-nav__icon-slot
+                +icon(attributes.postIcon)(class='o-side-nav__icon')
+
+mixin side-nav-header
+    header.o-side-nav__header
+        block
+
+mixin side-nav-separator
+    .o-side-nav__separator