From 03bb4268367dcd3b2d327d3834e2047a56687a86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 21:47:55 +0200 Subject: Menus --- tpl/views/action-menu.pug | 29 +++++++++++++++-------------- tpl/views/menu.pug | 8 ++++---- tpl/views/popover.pug | 6 ++++++ tpl/views/side-nav.pug | 26 ++++++++++++++++++++++++++ 4 files changed, 51 insertions(+), 18 deletions(-) create mode 100644 tpl/views/popover.pug create mode 100644 tpl/views/side-nav.pug (limited to 'tpl/views') 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' -- cgit v1.2.3-54-g00ecf