Menus

4 files changed, 51 insertions, 18 deletions

diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug
index 3357caa..0546463 100644
--- a/tpl/views/action-menu.pug
+++ b/tpl/views/action-menu.pug
@@ -3,17 +3,18 @@ mixin view-action-menu
         .c-box
             div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
                 +action-button(quiet=true selected=true)= 'Menu'
-                +action-menu
-                    +action-menu-slot(class='l-media l-media--flush')
-                        +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
-                        .l-media__block.l-media__block--main
-                            strong.u-d-block= 'Volpeon'
-                            small.u-d-block= '@volpeon@mk.vulpes.one'
-                    +action-menu-separator
-                    +action-menu-item(icon='user')= 'View profile'
-                    +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
-                    +action-menu-separator
-                    +action-menu-item(icon='trash' disabled=true)= 'Delete'
-                    +action-menu-item(icon='bookmark')= 'Bookmark'
-                    +action-menu-item(icon='tags')= 'Tags'
-                    +action-menu-item(postIcon='chevron-right')= 'More'
+                +popover
+                    +menu
+                        +menu-slot(class='l-media l-media--flush')
+                            +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
+                            .l-media__block.l-media__block--main
+                                strong.u-d-block= 'Volpeon'
+                                small.u-d-block= '@volpeon@mk.vulpes.one'
+                        +menu-separator
+                        +menu-item(icon='user')= 'View profile'
+                        +menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
+                        +menu-separator
+                        +menu-item(icon='trash' disabled=true)= 'Delete'
+                        +menu-item(icon='bookmark')= 'Bookmark'
+                        +menu-item(icon='tags')= 'Tags'
+                        +menu-item(postIcon='chevron-right')= 'More'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 4d7444f..c61cb92 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -20,11 +20,11 @@ mixin view-menu
                     +menu-item(header=true)
                         = 'Libera'
                     +menu-item(icon='hash')
-                        = 'achannel'
-                        +badge('primary')(menu=true)= '12 '
+                        = 'achannel '
+                        +badge('primary')(size='sm')= '12 '
                     +menu-item(icon='hash')
-                        = 'kitsuneirc'
-                        +badge(menu=true)= '31 '
+                        = 'kitsuneirc '
+                        +badge(size='sm')= '31 '
                     +menu-item(icon='green' iconIsStatus=true)
                         = 'volpeon'
                     +menu-item(icon='red' iconIsStatus=true)
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
new file mode 100644
index 0000000..b269596
--- /dev/null
+++ b/tpl/views/popover.pug
@@ -0,0 +1,6 @@
+mixin view-popover
+    +view('popover', 'Popover')
+        .c-box
+            +action-button(quiet=true selected=true)= 'Popover'
+            +popover
+                = loremIpsum
diff --git a/tpl/views/side-nav.pug b/tpl/views/side-nav.pug
new file mode 100644
index 0000000..30fbcbb
--- /dev/null
+++ b/tpl/views/side-nav.pug
@@ -0,0 +1,26 @@
+mixin view-side-nav 
+    +view('side-nav', 'Side Nav')
+        .c-box
+            +side-nav
+                +side-nav-item= 'Section 1'
+                +side-nav-item(tag='div')= 'Section 2'
+                +side-nav-item= 'Section 3'
+
+        .c-box
+            +side-nav
+                +side-nav-item= 'Section 1'
+                +side-nav-item= 'Section 2'
+
+                +side-nav-header= 'Category 1'
+                +side-nav-item= 'Section 3'
+                +side-nav-item= 'Section 4'
+
+                +side-nav-header= 'Category 2'
+                +side-nav-item= 'Section 5'
+                +side-nav-item= 'Section 6'
+
+        .c-box
+            +side-nav
+                +side-nav-item(icon='hash')= 'Section 1'
+                +side-nav-item(tag='div' icon='bookmark')= 'Section 2'
+                +side-nav-item(icon='tags')= 'Section 3'