Continuing to iterate on sidebar

server/documents/modules/dropdown.html.eco

@@ -546,6 +546,39 @@ themes      : ['Default']
         </div>
       </div>
     </div>
+    <div class="another button example">
+      <div class="ui info message ignored">Bottom pointing dropdown menus have sub-menus open upwards</div>
+      <div class="ui icon bottom left pointing dropdown button">
+        <i class="wrench icon"></i>
+        <div class="menu">
+          <div class="item">
+            <i class="dropdown icon"></i>
+            New
+            <div class="menu">
+              <div class="item">Document</div>
+              <div class="item">Image</div>
+            </div>
+          </div>
+          <div class="item">Save</div>
+          <div class="item">Edit</div>
+        </div>
+      </div>
+      <div class="ui icon bottom right pointing dropdown button">
+        <i class="wrench icon"></i>
+        <div class="menu">
+          <div class="item">
+            <i class="dropdown icon"></i>
+            New
+            <div class="menu">
+              <div class="item">Document</div>
+              <div class="item">Image</div>
+            </div>
+          </div>
+          <div class="item">Save</div>
+          <div class="item">Edit</div>
+        </div>
+      </div>
+    </div>
     <div class="another button example">
       <div class="ui labeled icon top right pointing dropdown button">
         <i class="filter icon"></i>

server/documents/modules/sidebar.html.eco

@@ -66,7 +66,10 @@ themes      : ['Default']
 
     <div class="no direction example">
       <h4 class="ui header">Direction</h4>
-      <div class="ui ignored info message">Only left and right sidebars support all animations. Bottom sidebars must be overlays and top sidebars are limited to push, reveal, and overlay</div>
+      <div class="ui ignored warning message">Only <b>top</b> and <b>bottom</b> sidebars support dropdown menus. This is because elements with scrollbars cannot have absolutely positioned content escape the container.</div>
+      <div class="ui ignored info message">
+        Only <b>left</b> and <b>right</b> sidebars support all animations. Top and bottom sidebars must overlay page content.
+      </div>
       <p>A sidebar can appear on different sides of the page</p>
       <div class="ui button" data-direction="left">
         Left
@@ -636,22 +639,93 @@ themes      : ['Default']
   <a class="item">Health</a>
   <a class="item">Sports</a>
 </div>
-<div class="ui right sidebar vertical inverted menu">
+<div class="ui right vertical inverted sidebar menu">
   <a class="header item">File Permissions</a>
   <a class="item">Share on Social</a>
   <a class="item">Share by E-mail</a>
   <a class="item">Edit Permissions</a>
   <a class="item">Delete Permanently</a>
 </div>
-<div class="ui top inverted teal sidebar menu">
-  <div class="header item">Top Sidebar menu</div>
-  <a class="item">One</a>
-  <a class="item">Two</a>
-  <a class="item">Three</a>
-</div>
-<div class="ui bottom inverted sidebar menu">
-  <div class="header item">Bottom Sidebar menu</div>
-  <a class="item">One</a>
-  <a class="item">Two</a>
-  <a class="item">Three</a>
-</div>
+<div class="ui top inverted sidebar menu">
+  <div class="menu">
+    <a class="item">
+      Home
+    </a>
+    <div class="ui pointing dropdown link item">
+      <i class="dropdown icon"></i>
+      Shopping
+      <div class="menu">
+        <div class="header">Categories</div>
+        <div class="item">
+          <i class="dropdown icon"></i>
+          Clothing
+          <div class="menu">
+            <div class="header">Mens</div>
+            <div class="item">Shirts</div>
+            <div class="item">Pants</div>
+            <div class="item">Jeans</div>
+            <div class="item">Shoes</div>
+            <div class="divider"></div>
+            <div class="header">Womens</div>
+            <div class="item">Dresses</div>
+            <div class="item">Shoes</div>
+            <div class="item">Bags</div>
+          </div>
+        </div>
+        <div class="item">Home Goods</div>
+        <div class="item">Bedroom</div>
+        <div class="divider"></div>
+        <div class="header">Order</div>
+        <div class="item">Status</div>
+        <div class="item">Cancellations</div>
+      </div>
+    </div>
+    <a class="item">
+      Forums
+    </a>
+    <a class="item">
+      Contact Us
+    </a>
+  </div>
+</div><div class="ui bottom inverted sidebar menu">
+  <div class="menu">
+    <a class="item">
+      Home
+    </a>
+    <div class="ui bottom pointing dropdown link item">
+      <i class="dropdown icon"></i>
+      Shopping
+      <div class="menu">
+        <div class="header">Categories</div>
+        <div class="item">
+          <i class="dropdown icon"></i>
+          Clothing
+          <div class="menu">
+            <div class="header">Mens</div>
+            <div class="item">Shirts</div>
+            <div class="item">Pants</div>
+            <div class="item">Jeans</div>
+            <div class="item">Shoes</div>
+            <div class="divider"></div>
+            <div class="header">Womens</div>
+            <div class="item">Dresses</div>
+            <div class="item">Shoes</div>
+            <div class="item">Bags</div>
+          </div>
+        </div>
+        <div class="item">Home Goods</div>
+        <div class="item">Bedroom</div>
+        <div class="divider"></div>
+        <div class="header">Order</div>
+        <div class="item">Status</div>
+        <div class="item">Cancellations</div>
+      </div>
+    </div>
+    <a class="item">
+      Forums
+    </a>
+    <a class="item">
+      Contact Us
+    </a>
+  </div>
+</div>

server/files/javascript/sidebar.js

@@ -9,6 +9,12 @@ semantic.sidebar.ready = function() {
     handler
   ;
 
+  $('.ui.sidebar .ui.dropdown')
+    .dropdown({
+      on: 'hover'
+    })
+  ;
+
   $('.left.sidebar')
     .sidebar()
   ;

src/definitions/modules/dropdown.less

@@ -633,12 +633,20 @@ select.ui.dropdown {
   z-index: @pointingArrowZIndex;
 }
 
-/* Directions */
 .ui.pointing.dropdown > .menu:after {
   top: @pointingArrowOffset;
   left: 50%;
   margin: 0em 0em 0em @pointingArrowOffset;
 }
+
+/* Top Left Pointing */
+.ui.top.left.pointing.dropdown > .menu {
+  top: 100%;
+  bottom: auto;
+  left: 0%;
+  right: auto;
+  margin: @pointingArrowDistanceFromEdge 0em 0em;
+}
 .ui.top.left.pointing.dropdown > .menu {
   top: 100%;
   bottom: auto;
@@ -653,6 +661,7 @@ select.ui.dropdown {
   margin: 0em;
   transform: rotate(45deg);
 }
+/* Top Right  Pointing */
 .ui.top.right.pointing.dropdown > .menu {
   top: 100%;
   bottom: auto;
@@ -668,6 +677,7 @@ select.ui.dropdown {
   transform: rotate(45deg);
 }
 
+/* Left Pointing */
 .ui.left.pointing.dropdown > .menu {
   top: 0%;
   left: 100%;
@@ -681,6 +691,7 @@ select.ui.dropdown {
   transform: rotate(-45deg);
 }
 
+/* Right Pointing */
 .ui.right.pointing.dropdown > .menu {
   top: 0%;
   left: auto;
@@ -695,4 +706,45 @@ select.ui.dropdown {
   transform: rotate(135deg);
 }
 
+/* Bottom Pointing */
+.ui.bottom.pointing.dropdown > .menu {
+  top: auto;
+  bottom: 100%;
+  left: 0%;
+  right: auto;
+  margin: 0em 0em @pointingArrowDistanceFromEdge ;
+}
+.ui.bottom.pointing.dropdown > .menu:after {
+  top: auto;
+  bottom: @pointingArrowOffset;
+  right: auto;
+  margin: 0em;
+  transform: rotate(-135deg);
+}
+/* Reverse Sub-Menu Direction */
+.ui.bottom.pointing.dropdown > .menu .menu {
+  top: auto !important;
+  bottom: 0px !important;
+}
+
+/* Bottom Left */
+.ui.bottom.left.pointing.dropdown > .menu {
+  left: 0%;
+  right: auto;
+}
+.ui.bottom.left.pointing.dropdown > .menu:after {
+  left: @pointingArrowDistanceFromEdge;
+  right: auto;
+}
+
+/* Bottom Right */
+.ui.bottom.right.pointing.dropdown > .menu {
+  right: 0%;
+  left: auto;
+}
+.ui.bottom.right.pointing.dropdown > .menu:after {
+  left: auto;
+  right: @pointingArrowDistanceFromEdge;
+}
+
 .loadUIOverrides();

src/definitions/modules/sidebar.js

@@ -777,15 +777,15 @@ $.fn.sidebar.settings = {
 
   defaultTransition : {
     computer: {
-      top    : 'reveal',
       left   : 'reveal',
       right  : 'reveal',
+      top    : 'overlay',
       bottom : 'overlay'
     },
     mobile: {
-      top    : 'reveal',
       left   : 'reveal',
       right  : 'reveal',
+      top    : 'overlay',
       bottom : 'overlay'
     }
   },

src/definitions/modules/sidebar.less

@@ -50,7 +50,7 @@
 .ui.top.sidebar,
 .ui.bottom.sidebar {
   width: 100% !important;
-  height: @sidebarHeight !important;
+  height: auto !important;
   overflow-y: visible !important;
 }
 
@@ -330,11 +330,6 @@
 .pushable.right.reveal.pushed > .pusher {
   transform: translate3d(-@sidebarWidth, 0, 0);
 }
-/*--- Top ---*/
-.pushable.top.reveal.pushed > .fixed,
-.pushable.top.reveal.pushed > .pusher {
-  transform: translate3d(0, @sidebarHeight, 0);
-}
 
 /*--------------
    Slide Along

src/themes/packages/default/modules/sidebar.variables

@@ -3,9 +3,7 @@
 *******************************/
 
 @sidebarWidth: 260px;
-@sidebarHeight: 37px;
 @sidebarBackground: @black;
-@sidebarTransition: transform 0.5s linear;
 
 @dimmerColor: rgba(0, 0, 0, 0.4);