Update old docs to new Pug templates

1 files changed, 184 insertions, 0 deletions

diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug
new file mode 100644
index 0000000..fe7825b
--- /dev/null
+++ b/docs/src/contents/menu.pug
@@ -0,0 +1,184 @@
+p Menus are vertical list of links or buttons for actions and navigation.
+
+.columns
+  .column.col-4.col-xs-12
+    ul.menu
+      li.menu-item
+        .tile.tile-centered
+          .tile-icon
+            img.avatar(src="img/avatar-4.png" alt="Avatar")
+          .tile-content
+            | Steve Rogers
+      li.divider
+      li.menu-item
+        .menu-badge
+          label.label.label-primary 2
+        a.active(href="#menus")
+          | My profile
+      li.menu-item
+        a(href="#menus")
+          | Settings
+      li.menu-item
+        a(href="#menus")
+          | Logout
+  .column.col-4.col-xs-12
+    ul.menu
+      li.divider(data-content="LINKS")
+      li.menu-item
+        a(href="#menus") Slack
+      li.menu-item
+        a(href="#menus") Hipchat
+      li.menu-item
+        a(href="#menus") Skype
+  .column.col-4.col-xs-12
+    ul.menu
+      li.menu-item
+        label.form-checkbox
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  form-checkbox
+      li.menu-item
+        label.form-radio
+          input(type="radio" checked="")
+          i.form-icon
+          |  form-radio
+      li.menu-item
+        label.form-switch
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  form-switch
+
+p
+  | Add a container element with the #[code menu] class.
+  | And add child elements with the #[code menu-item] class.
+  | You can separate menu items with a #[code divider].
+  | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+p
+  | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <ul class="menu">
+        <!-- menu header text -->
+        <li class="divider" data-content="LINKS">
+        </li>
+        <!-- menu item standard -->
+        <li class="menu-item">
+          <a href="#">
+            <i class="icon icon-link"></i> Slack
+          </a>
+        </li>
+        <!-- menu item with form control -->
+        <li class="menu-item">
+          <label class="form-checkbox">
+            <input type="checkbox">
+            <i class="form-icon"></i> form-checkbox
+          </label>
+        </li>
+        <!-- menu divider -->
+        <li class="divider"></li>
+        <!-- menu item with badge -->
+        <li class="menu-item">
+          <div class="menu-badge">
+            <label class="label label-primary">2</label>
+          </div>
+          <a href="#">
+            <i class="icon icon-link"></i> Settings
+          </a>
+        </li>
+      </ul>
+        
++docs-subheading('menu-dropdown', 'Dropdown menu')
+
+p The dropdown is a combination of buttons and menus.
+
+.columns
+  .column.col-xs-12
+    .dropdown
+      .btn-group
+        a.btn.btn-primary dropdown button
+        a.btn.btn-primary.dropdown-toggle(tabindex="0")
+          i.icon.icon-caret
+        ul.menu
+          li.menu-item
+            a(href="#dropdowns")
+              | Slack
+          li.menu-item
+            a(href="#dropdowns")
+              | Hipchat
+          li.menu-item
+            a(href="#dropdowns")
+              | Skype
+  .column.col-xs-12
+    .dropdown
+      a.btn.btn-link.dropdown-toggle(tabindex="0")
+        | dropdown button 
+        i.icon.icon-caret
+      ul.menu
+        li.menu-item
+          a(href="#dropdowns")
+            | Slack
+        li.menu-item
+          a(href="#dropdowns")
+            | Hipchat
+        li.menu-item
+          a(href="#dropdowns")
+            | Skype
+
+p
+  | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
+p
+  | Add a container element with the #[code dropdown] class.
+  | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
+  | You also need to add #[code tabindex] to make the buttons focusable.
+p
+  | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
+
+.columns
+  .column.col-xs-12.text-right
+    .dropdown.dropdown-right
+      a.btn.btn-primary.dropdown-toggle(tabindex="0")
+        | dropdown button 
+        i.icon.icon-caret
+      ul.menu.text-left
+        li.menu-item
+          a(href="#dropdowns") Slack
+        li.menu-item
+          a(href="#dropdowns") Hipchat
+        li.menu-item
+          a(href="#dropdowns") Skype
+
+p
+  | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- basic dropdown button -->
+      <div class="dropdown">
+        <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+          dropdown menu <i class="icon icon-caret"></i>
+        </a>
+        <!-- menu component -->
+        <ul class="menu">
+          ...
+        </ul>
+      </div>
+
+      <!-- dropdown button group -->
+      <div class="dropdown">
+        <div class="btn-group">
+          <a href="#" class="btn">
+            dropdown button
+          </a>
+          <a href="#" class="btn dropdown-toggle" tabindex="0">
+            <i class="icon icon-caret"></i>
+          </a>
+
+          <!-- menu component -->
+          <ul class="menu">
+            ...
+          </ul>
+        </div>
+      </div>
\ No newline at end of file