testio-tailwind 0.1.0

package/src/pages/forms/tomselect.haml

@@ -0,0 +1,76 @@
+---
+tags: forms
+title: Tom Select
+---
+
+%p.mb-heading
+  %span These selects use the 
+  %a{href:"https://tom-select.js.org/"} Tom Select Library
+  %span .
+.form-grid.single
+  .form-group.form-select
+    %label.form-label Select
+    %select.tom-select{placeholder: "Please select"}
+      %option{value: ""}
+      %option{value:"Option 1"} Option 1
+      %option{value:"Option 2"} Option 2
+      %option{value:"Option 3"} Option 3
+      %option{value:"Option 4"} ABC
+      %option{value:"Option 5"} DEF
+      %option{value:"Option 6"} WHY
+      %option{value:"Option 7"} XYZ
+  %p.mt-3 If you have some errors on the field
+  .form-group.form-select
+    .field_with_errors
+      %label.form-label Select
+    .field_with_errors
+      %select.tom-select{placeholder: "Please select"}
+        %option{value: ""}
+        %option{value:"Option 1"} Option 1
+        %option{value:"Option 2"} Option 2
+        %option{value:"Option 3"} Option 3
+        %option{value:"Option 4"} ABC
+        %option{value:"Option 5"} DEF
+        %option{value:"Option 6"} WHY
+        %option{value:"Option 7"} XYZ
+      .form-hint.error
+        You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  %p.mt-3 Use opt-groups to display hints inside the select
+  .form-group.form-select
+    %label.form-label Optgroup select
+    %select.tom-select{placeholder: "Please select"}
+      %optgroup{label: "Here's a helper text that explains further information about the options of this dropdown"}
+        %option{value: ""}
+        %option Option 1
+        %option Option 2
+        %option Option 3
+        %option ABC
+        %option DEF
+        %option WHY
+        %option XYZ
+  %p.mt-3 Disabled select example
+  .form-group.form-select
+    %label.form-label Disabled
+    %select.tom-select{placeholder: "Please select", disabled:"true"}
+      %option{value: ""}
+      %option Option 1
+      %option Option 2
+      %option Option 3
+      %option ABC
+      %option DEF
+      %option WHY
+      %option XYZ
+  %p.mt-3 Multi selects display the selected options as removable tags.
+  .form-group.multi-select
+    %label.form-label Select multiple
+    %select.tom-select-multi{multiple: 'true', placeholder: "Please select"}
+      %option Option 1
+      %option Option 2
+      %option Option 3
+      %option Option 4
+      %option Option 5
+      %option ABC
+      %option DEF
+      %option WHY
+      %option XYZ
+

package/src/pages/forms/trix_editor.pug

@@ -0,0 +1,10 @@
+---
+tags: "forms"
+title: Trix Editor
+---
+
+.form-group.trix-editor
+  label.form-label(for='space_branding_full_description') Full description
+  input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
+  trix-editor#space_branding_full_description.form-control.trix-content
+

package/src/pages/forms/uploads.pug

@@ -0,0 +1,101 @@
+---
+tags: forms
+title: Uploads and attachments
+---
+
+.mb-heading
+  p.mb-xs We use <a href="https://www.dropzone.dev/">Dropzone.JS</a> for uploading files. You are viewing dropzone with the following configuration:
+  code
+    |  let dropzone = new Dropzone("#file-upload", {
+    br
+    |   addRemoveLinks: true,
+    |   uploadMultiple: true,
+    |   autoQueue: false,
+    |   dictCancelUpload: "",
+    |	  dictRemoveFile: ""
+    br
+    |  });
+
+.form-grid-single
+  form.form-group.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+    .dz-default.dz-message
+      p.dropzone-msg-title Click to upload a file or drag and drop
+      p.dropzone-msg-desc Files up to 10MB
+  .attachments.mt-sm
+    .attachment
+      a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
+        img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
+    .attachment
+      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+        img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove
+    .attachment
+      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+        span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove
+  .attachments.mt-sm
+    input(type='hidden', name='document[context_attributes][external_attachments_attachment_ids][]', value='', autocomplete='off')
+    .attachment.selectable
+      input#checkable-attachment1(data-checkboxes-target='checkbox', type='checkbox', value='89')
+      label(for="checkable-attachment1")
+        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
+    .attachment.selectable
+      input#checkable-attachment2(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
+      label(for="checkable-attachment2")
+        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
+    .attachment.selectable
+      input#checkable-attachment3(data-checkboxes-target='checkbox', type='checkbox', value='89')
+      label(for="checkable-attachment3")
+        .attachment-thumb
+          span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
+    .attachment.selectable
+      input#checkable-attachment4(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
+      label(for="checkable-attachment4")
+        .attachment-thumb
+          span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
+
+p.mt-3 Form errors example
+.form-grid-single
+  form.form-group.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+    .dz-default.dz-message
+      p.dropzone-msg-title Click to upload a file or drag and drop
+      p.dropzone-msg-desc Files up to 10MB
+  .form-hint.error
+    You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+.bg-black.p-md.mt-3
+  .form-grid-single
+    form.form-group.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
+      .dz-default.dz-message
+        p.dropzone-msg-title Click to upload a file or drag and drop
+        p.dropzone-msg-desc Files up to 10MB
+    .attachments.mt-sm
+      .attachment.inverted
+        a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
+          img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+        a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
+        button.btn.btn-danger.attachment-btn
+          span.icon.text-icon-default.icon-remove
+
+      .attachment.inverted
+        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+          img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
+        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        button.btn.btn-danger.attachment-btn
+          span.icon.text-icon-default.icon-remove
+
+      .attachment.inverted
+        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+          span.attachment-icon.icon-xl.icon-review-xl
+        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        button.btn.btn-danger.attachment-btn
+          span.icon.text-icon-default.icon-remove

package/src/pages/icons/bug-icons.haml

@@ -0,0 +1,76 @@
+---
+tags: icons
+title: Bug icons
+---
+
+.grid.gap-5.grid-cols-3
+  %dl.list-inline
+    %dd.icon.icon-functional
+    %dt functional
+    %dd.icon.icon-critical
+    %dt critical
+    %dd.icon.icon-high
+    %dt high
+    %dd.icon.icon-low
+    %dt low
+    %dd.icon.icon-usability
+    %dt usability
+    %dd.icon.icon-visual
+    %dt visual
+    %dd.icon.icon-content
+    %dt content
+  %dl.list-inline
+    %dd.icon.icon-user-story
+    %dt user story
+    %dd.icon.icon-user-story-check
+    %dt user story passed
+    %dd.icon.icon-user-story-cross
+    %dt user story failed
+    %dd.icon.icon-user-story-clock
+    %dt user story waiting
+    %dd.icon.icon-user-outline-check
+    %dt user story execution
+    %dd.icon.icon-user-outline-cross
+    %dt user story execution
+    %dd.icon.icon-user-outline-blocked
+    %dt user story execution
+  %dl.list-inline
+    %dd.icon.icon-review-bug-check
+    %dt Bug report confirmation
+    %dd.icon.icon-review-bug-check.critical
+    %dt Bug report confirmation critical
+    %dd.icon.icon-review-bug-check.high
+    %dt Bug report confirmation high
+    %dd.icon.icon-review-bug-check.low
+    %dt Bug report confirmation low
+  %dl.list-inline
+    %dd.icon.icon-bug-reproduction
+    %dt Bug report confirmation
+    %dd.icon.icon-bug-reproduction.critical
+    %dt Bug report confirmation critical
+    %dd.icon.icon-bug-reproduction.high
+    %dt Bug report confirmation high
+    %dd.icon.icon-bug-reproduction.low
+    %dt Bug report confirmation low
+  %dl.list-inline
+    %dd.icon.icon-bug-fix-confirmation
+    %dt Bug report confirmation
+    %dd.icon.icon-bug-fix-confirmation.critical
+    %dt Bug report confirmation critical
+    %dd.icon.icon-bug-fix-confirmation.high
+    %dt Bug report confirmation high
+    %dd.icon.icon-bug-fix-confirmation.low
+    %dt Bug report confirmation low
+  %dl.list-inline
+    %dd.icon.icon-testcase-bug
+    %dt test case bug
+    %dd.icon.icon-testcase-bug.critical
+    %dt test case bug critical
+    %dd.icon.icon-testcase-bug.high
+    %dt test case bug high
+    %dd.icon.icon-testcase-bug.low
+    %dt test case bug low
+  %dl.list-inline
+    %dd.icon.icon-review-exclamation
+    %dt Custom single task
+  

package/src/pages/icons/index.njk

@@ -0,0 +1,83 @@
+---
+layout: base
+permalink: icons/
+---
+
+{% set collection = collections.icons %}
+
+<script type="text/javascript">
+
+const getJSON = function(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'json';
+    xhr.onload = function() {
+      var status = xhr.status;
+      if (status === 200) {
+        callback(null, xhr.response);
+      } else {
+        callback(status, xhr.response);
+      }
+    };
+    xhr.send();
+};
+
+const fetchIcons = function(appType) {
+  getJSON('/static/icons-' + appType + '.json',
+  function(err, data) {
+    if (err !== null) {
+      console.log('Something went wrong: ' + err);
+    } else {
+      const classList = document.getElementById('iconList');
+      data.forEach(iconClass => {
+        let e = document.createElement('div');
+        e.innerHTML = '<span class="icon text-icon-default ' + iconClass + '"></span><span class="label ml-3">.' + iconClass +'</span>';
+        classList.appendChild(e);
+      });
+    }
+  });
+}
+
+let app = '{{ site.app }}';
+
+fetchIcons(app)
+
+</script>
+
+<main tabindex="-1" id="main-content" class="main-content-padding main-content">
+
+  <h1 class="mb-8">Icons</h1>
+  {%- for section in collection -%}
+    <section class="space-y-6" id="{{ section.data.title }}">
+      <div class="section-header">
+        <h4 class="section-title">{{ section.data.title }}</h4>
+      </div>
+
+      {% if section.data.type == 'block' %}
+        {% set direction = 'y' %}
+      {% else %}
+        {% set direction = 'x' %}
+      {% endif %}
+      {{ section.templateContent | safe }}
+
+      <details class="mt-3">
+        <summary class="btn btn-sm btn-secondary inline-block cursor-pointer mb-2">
+          Show source
+        </summary>
+        <div class="prose max-w-none bg-gray-light p-2 rounded mb-1">
+          <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
+        </div>
+      </details>
+    </section>
+  {%- endfor -%}
+
+  <section>
+  <div class="section-header">
+    <h4 class="section-title">Icon list</h4>
+  </div>
+  <div class="grid grid-cols-3 gap-2 place-items-start pb-10" id="iconList"></div>
+  </section>
+
+</main>
+
+

package/src/pages/icons/marketingicons.haml

@@ -0,0 +1,16 @@
+---
+tags: icons
+title: Icons for marketing and presentation
+---
+
+%ul.list-inline
+  %li.icon.icon-lg.icon-critical
+  %li.icon.icon-lg.icon-high
+  %li.icon.icon-lg.icon-low
+  %li.icon.icon-lg.icon-visual
+  %li.icon.icon-lg.icon-content
+  %li.icon.icon-lg.icon-usability
+%p.mb-heading If you are looking for SVG and PNG versions of the icons to include them into your presentation look no further. Download the ZIP and get started prettifying your life.
+%a.btn.btn-xl.btn-primary{href:"/downloads/Bugandtesttype_icons.zip"}
+  .icon.icon-criticalissues-xl
+  Download ZIP

package/src/pages/icons/status-icons.haml

@@ -0,0 +1,39 @@
+---
+tags: icons
+title: Status icons
+---
+
+%dl.list-inline
+  %dd Open, Submitted
+  %dl
+    .status-icon.status-submitted
+  %dd Manager approved
+  %dl
+    .status-icon.status-manager-approved
+  %dd Customer approved
+  %dl
+    .status-icon.status-customer-approved
+  %dd Forwarded
+  %dl
+    .status-icon.status-forwarded
+  %dd Manager rejected
+  %dl
+    .status-icon.status-manager-rejected
+  %dd Customer rejected
+  %dl
+    .status-icon.status-customer-rejected
+  %dd Manager question
+  %dl
+    .status-icon.status-manager-question
+  %dd Withheld
+  %dl
+    .status-icon.status-withheld
+  %dd Reproduction 
+  %dl
+    .status-icon.status-reproduction
+  %dd Test Case passed
+  %dl
+    .status-icon.status-testcase-passed
+  %dd Test Case failed 
+  %dl
+    .status-icon.status-testcase-failed

package/src/pages/layout/app_layout.haml

@@ -0,0 +1,28 @@
+---
+tags: layout
+title: App layout structure
+---
+
+.grid.gap-1px.p-xs.bg-gray-lightest.rounded
+  %p .app-body
+  .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
+  .grid.grid-cols-2-auto-fr.gap-1px
+    .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar
+    .grid.gap-1px
+      .bg-gray-light.p-xs.pl-md .test-header.tester
+      .grid.grid-cols-2-fr-auto
+        .bg-white.p-xs.pl-md.h-xxl .main-content
+        .bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
+      .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
+
+%h5.mt-md HTML structure
+%code
+  &#60body class=&quotapp-body&quot&#62
+  %br
+  .ml-md &#60header class=&quotheader&quot&#62
+  .ml-md &#60nav class=&quotsidebar&quot&#62
+  .ml-md &#60header class=&quottest-header tester&quot&#62
+  .ml-md &#60main class=&quotmain-content&quot&#62
+  .ml-md &#60aside class=&quotmetasidebar&quot&#62
+  .ml-md &#60footer class=&quotactionbar&quot&#62
+  &#60/body&quot&#62

package/src/pages/layout/index.njk

@@ -0,0 +1,7 @@
+---
+layout: base
+permalink: layout/
+---
+
+{% set collection = collections.layout %}
+{% include "page-with-sidebar.njk" %}

package/src/pages/layout/max_width.haml

@@ -0,0 +1,50 @@
+---
+tags: layout
+title: Max-width capped
+---
+
+.card.bg-gray-lighter.p-sm.max-w-capped
+  %p Card with the class .max-width-capped. The card width will be capped to ensure readability. 
+%p.mb-sm.max-w-capped This class should also be applied to text elements to ensure readability in the case of an endless amount of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+.form-grid.mb-sm.max-w-capped
+  .form-group
+    %label.form-label Input
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group
+    %label.form-label Input disabled
+    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
+.list-listitems.mb-sm.max-w-capped
+  .listitem
+    .listitem-title
+      List-item
+      .listitem-label with max-w-capped on the parent container
+    .listitem-actions
+      %a.btn.btn-secondary.hidden-xs-down
+        .icon.icon-check-circle-filled.mr-icon-spacing
+        Action
+      %a.btn.btn-secondary.hidden-xs-down
+        .icon.icon-check-circle-filled.mr-icon-spacing
+        Action
+      %a.btn.btn-primary
+        .icon.icon-cloud-upload.mr-icon-spacing
+        Primary action
+      %details.dropdown-actions.dropright
+        %summary
+          .btn.btn-primary.btn-square
+            %span.icon.text-icon-default.icon-more
+        .listitem-more-menu.popover-menu
+          %a.popover-action.hidden-xs-up
+            .icon.icon-check-circle-filled
+            Action
+          %a.popover-action.hidden-xs-up
+            .icon.icon-check-circle-filled
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-pencil
+            Edit
+          %a.popover-action
+            %span.icon.text-icon-default.icon-duplicate
+            Duplicate
+          %a.popover-action
+            %span.icon.text-icon-default.icon-remove
+            Delete

package/src/pages/layout/spacing.haml

@@ -0,0 +1,30 @@
+---
+tags: layout
+title: Spacing
+---
+
+%dl.list-inline
+  %dd Spacing XXS
+  %dt
+    .h-xxs.w-xxs.bg-gray
+  %dd Spacing XS
+  %dt
+    .h-xs.w-xs.bg-gray
+  %dd Spacing SM
+  %dt
+    .h-sm.w-sm.bg-gray
+  %dd Spacing MD
+  %dt
+    .h-md.w-md.bg-gray
+  %dd Spacing
+  %dt
+    .h-spacing.w-spacing.bg-gray
+  %dd Spacing LG
+  %dt
+    .h-lg.w-lg.bg-gray
+  %dd Spacing XL
+  %dt
+    .h-xl.w-xl.bg-gray
+  %dd Spacing XXL
+  %dt
+    .h-xxl.w-xxl.bg-gray

package/src/pages/navigation/header-manager.haml

@@ -0,0 +1,74 @@
+---
+tags: navigation
+title: Header - Manager
+---
+
+%nav.header.manager
+  .navlinks.logo-wrapper
+    %a.navlink.header-logo{href:'#'}
+  .navlinks.left
+    %a.navlink.active{href:'#'}
+      %span.navlink-badge.icon.icon-home
+      %span Navlink active
+    %a.navlink{href:'#'} Navlink
+    %a.navlink{href:'#'}
+      %span.icon.icon-check-circle-filled 
+      %span Navlink
+    %details.header-dropdown
+      %summary.navlink Collapsable
+      .dropdown-menu
+        %a.navlink{href:'#', role:'menuitem'}
+          %span.icon.icon-user  
+          Dropdown-item
+        %a.navlink{href:'#', role:'menuitem'}
+          %span.icon.icon-cog  
+          Dropdown-item
+        %a.navlink{href:'#', role:'menuitem'}
+          %span.icon.icon-shutdown 
+          Dropdown-item with a longer text to see how things break and behave
+  %details.mobile-links
+    %summary.mobile-menu-btn
+      .navlink
+        %span.sr-only Open main menu
+        %span.icon.icon-menu{ariahidden:'true'}
+    .mobile-menu.sidebar
+      %a.navlink.active{href:'#'}
+        %span.navlink-badge.icon.icon-home
+        %span Navlink active
+      %a.navlink{href:'#'}
+        %span.navlink-badge.icon.icon-plus
+        %span Add project
+      %details
+        %summary.navlink
+          %span.icon.icon-product
+          Collapsable
+        %a.navlink{href:'#'}
+          %span.icon.icon-test
+          Navlink child
+        %a.navlink{href:'#'}
+          %span.icon.icon-test
+          Navlink child
+        %a.navlink{href:'#'}
+          %span.icon.icon-test
+          Navlink child
+        %a.navlink.active{href:'#'}
+          %span.icon.icon-test
+          Active child
+  .navlinks.right
+    %details.header-dropdown.user-menu
+      %summary.btn-profile.navlink
+        %span.sr-only Open user menu
+        %img.user-profile{src:'/assets/images/placeholders/profile_supergirl.png', alt:''}
+        .user-details
+          .profile-role Admin
+          .profile-name Anja Berger
+      .dropdown-menu.profile-dropdown{role:'menu', ariaorientation:'vertical', arialabelledby:'user-menu'}
+        %a.navlink{href:'#', role:'menuitem'}
+          %span.icon.icon-user  
+          Your Profile
+        %a.navlink{href:'#', role:'menuitem'}
+          %span.icon.icon-cog  
+          Settings
+        %a.navlink{href:'#', role:'menuitem'}
+          %span.icon.icon-shutdown
+          Sign out