Sidebar revisions

extnet · Aug 24, 2016 · 4488ac5 · 4488ac5
1 parent f35f19b
commit 4488ac5
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 16 deletions.
diff --git a/src/Default.aspx b/src/Default.aspx
@@ -174,20 +174,10 @@
                 BodyCls="right-nav-menu">
                 <Content>
                     <ul id="nav-menu" class="nav-menu">
-                        <li class="section-title">Ext.NET 4</li>
-                        <li><a href="http://examples.ext.net/">Web Forms Examples (4.1)</a></li>
-                        <li><a href="http://mvc.ext.net/">MVC Examples (4.1)</a></li>
-                        <li class="separator"></li>
-                        <li class="section-title">Ext.NET 3</li>
-                        <li><a href="http://examples3.ext.net/">Web Forms Examples (3.3)</a></li>
-                        <li><a href="http://mvc3.ext.net/">MVC Examples (3.3)</a></li>
-                        <li class="separator"></li>
-                        <li class="section-title">Ext.NET 2</li>
-                        <li><a href="http://examples2.ext.net/">Web Forms Examples (2.5)</a></li>
-                        <li><a href="http://mvc2.ext.net/">MVC Examples (2.5)</a></li>
-                        <li class="separator"></li>
-                        <li class="section-title">Ext.NET 1</li>
-                        <li><a href="http://examples1.ext.net/">Web Forms Examples (1.7)</a></li>
+                        <li><a href="http://examples.ext.net/">Web Forms Examples</a></li>
+                        <li><a href="http://mvc.ext.net/">MVC Examples</a></li>
+                        <li><a href="http://mobile.ext.net/">Mobile Examples</a></li>
+                        <li><a href="http://mvc.mobile.ext.net/">MVC Mobile Examples</a></li>
                         <li class="separator"></li>
                         <li><a href="http://docs.sencha.com/extjs/6.0/6.0.0-classic/">EXT JS Documentation</a></li>
                         <li><a href="http://docs.ext.net/">Ext.NET Documentation</a></li>
@@ -196,6 +186,22 @@
                         <li><a href="http://ext.net/faq/">FAQ</a></li>
                         <li><a href="http://ext.net/contact/">Contact</a></li>
                         <li><a href="http://ext.net/">Ext.NET Home</a></li>
+                        <li class="separator"></li>
+                        <li>
+                            <a class="collapsed" href="#" data-toggle="collapse" data-target="#archives"><i class="fa collapse-icon"></i> Archives</a>
+                            <ul class="collapse collapsed" id="#archives">
+                                <li class="section-title">Ext.NET 3</li>
+                                <li><a href="http://examples3.ext.net/">Web Forms Examples (3.3)</a></li>
+                                <li><a href="http://mvc3.ext.net/">MVC Examples (3.3)</a></li>
+                                <li class="separator"></li>
+                                <li class="section-title">Ext.NET 2</li>
+                                <li><a href="http://examples2.ext.net/">Web Forms Examples (2.5)</a></li>
+                                <li><a href="http://mvc2.ext.net/">MVC Examples (2.5)</a></li>
+                                <li class="separator"></li>
+                                <li class="section-title">Ext.NET 1</li>
+                                <li><a href="http://examples1.ext.net/">Web Forms Examples (1.7)</a></li>
+                            </ul>
+                        </li>
                     </ul>
                     <a href="http://ext.net/store/" class="button button-success button-block button-sidebar-right">Get Ext.NET</a>
                 </Content>

diff --git a/src/resources/css/main.css b/src/resources/css/main.css
@@ -326,6 +326,11 @@ body {
     margin-bottom: 30px;
 }
 
+.nav-menu > li > ul {
+    padding-left: 20px;
+    list-style: none;
+}
+
 .nav-menu .section-title {
     color: #5c6d7d;
     font-family: OpenSansSemibold;
@@ -335,7 +340,7 @@ body {
     cursor: default;
 }
 
-.nav-menu > li > a {
+.nav-menu li a {
     color: #b0bcc7;
     font-size: 14px;
     text-decoration: none;
@@ -347,10 +352,15 @@ body {
             transition: all 0.25s ease-in-out;
 }
 
-.nav-menu > li > a:hover {
+.nav-menu li a:hover {
     color: #8fcbff;
 }
 
+.nav-menu li a i {
+    margin-right: 6px;
+    font-size: 12px;
+}
+
 .nav-menu .separator,
 .nav-menu .separator:hover {
     height: 1px;
@@ -359,6 +369,10 @@ body {
     background: #3e4a56;
 }
 
+.nav-menu .collapse {
+    margin: 10px 0;
+}
+
 .button-sidebar-right {
     margin-bottom: 30px;
 }
@@ -430,6 +444,28 @@ body {
 }
 
 
+/* Collapse */
+
+.collapse {
+    max-height: 265px;
+    overflow-y: hidden;
+    -webkit-transition: all 0.35s ease-in-out;
+         -o-transition: all 0.35s ease-in-out;
+            transition: all 0.35s ease-in-out;
+}
+
+.collapse.collapsed {
+    max-height: 0;
+}
+
+.collapse-icon:before {
+    content: "\f068";
+}
+
+.collapsed .collapse-icon:before {
+    content: "\f067";
+}
+
 /*  Misc
     -----------------------------------------------------------------------------------------------*/
 

diff --git a/src/resources/js/main.js b/src/resources/js/main.js
@@ -21,6 +21,15 @@ Ext.onReady(function () {
             Ps.update(sidebarRight);
         }
     });
+
+    Ext.select("[data-toggle='collapse'", true).on({
+        click: function (e) {
+            e.preventDefault();
+
+            this.toggleCls("collapsed");
+            Ext.get((this.getAttribute("data-target"))).toggleCls("collapsed");
+        }
+    });
 });
 
 var SEARCH_URL = "/search/",