Setup New Sidebar (Responsive)

rest_framework/static/rest_framework/docs/css/base.css

@@ -1,154 +1,185 @@
- body {
+.sidebar {
-    overflow-x: hidden;
+  overflow: auto;
-    position: 'relative';
+  font-family: verdana;
- }
+  font-size: 12px;
-
+  font-weight: 200;
-/* Toggle Styles */
+  background-color: #2e353d;
-
+  position: fixed;
-#wrapper {
+  top: 0px;
-    padding-left: 0;
+  width: 225px;
-    -webkit-transition: all 0.5s ease;
+  height: 100%;
-    -moz-transition: all 0.5s ease;
+  color: #FFF;
-    -o-transition: all 0.5s ease;
-    transition: all 0.5s ease;
 }
 
-#wrapper.toggled {
+.sidebar .brand {
-    padding-left: 250px;
+    background-color: #23282e;
-}
-
-#sidebar-wrapper {
-    background: #E8EAEF;
-
-    z-index: 1000;
-    position: fixed;
-    top: 50px;
-    left: 250px;
-    width: 0;
-    height: 100%;
-    margin-left: -250px;
-    overflow-y: auto;
-    -webkit-transition: all 0.5s ease;
-    -moz-transition: all 0.5s ease;
-    -o-transition: all 0.5s ease;
-    transition: all 0.5s ease;
-}
-
-#wrapper.toggled #sidebar-wrapper {
-    width: 250px;
-}
-
-#page-content-wrapper {
-    width: 100%;
-    position: absolute;
-    top: 80px;
-}
-
-#wrapper.toggled #page-content-wrapper {
-    position: absolute;
-    margin-right: -250px;
-}
-
-.top-navbar {
-    border-radius: 0;
-}
-
-/* Sidebar Styles */
-
-.sidebar-nav {
-    position: absolute;
-    top: 80px;
-    width: 250px;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.sidebar-nav li {
-    text-indent: 10px;
-}
-
-.sidebar-nav > li > .nav > li {
-    text-indent: 30px;
-}
-
-.sidebar-nav li a {
     display: block;
-    border: 0;
-    border-radius: 0;
-    font-size: 12px;
-    font-weight: normal;
-    color: #999999;
-    text-decoration: none;
-    text-transform: none;
-    padding: 8px 15px;
-}
-
-.sidebar-nav li.active > a {
-    background: none;
-}
-
-.sidebar-nav li.active > a:hover {
-    background: white;
-}
-
-.sidebar-nav > li.active > .nav > li.active > a,
-.sidebar-nav li a:hover,
-.sidebar-nav li a:active,
-.sidebar-nav li a:focus {
-    text-decoration: none;
-    background: white;
-    border: 0;
-    border: 0;
-    text-decoration: none;
-}
-
-.sidebar-wrapper > .sidebar-brand {
     text-align: center;
-    margin-bottom: 20px;
+    padding: 25px 0;
-    width: 250px;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
-.sidebar-wrapper .language-switcher {
+.sidebar .menu-list {
+    position: relative;
+}
+
+.sidebar .toggle-btn {
+  display: none;
+}
+
+.sidebar .menu-list ul,
+.sidebar .menu-list li {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  line-height: 35px;
+  cursor: pointer;
+  /*    
+    .collapsed{
+       .arrow:before{
+                 font-family: FontAwesome;
+                 content: "\f053";
+                 display: inline-block;
+                 padding-left:10px;
+                 padding-right: 10px;
+                 vertical-align: middle;
+                 float:right;
+            }
+     }
+*/
+}
+
+.sidebar .menu-list ul :not(collapsed) .arrow:before,
+.sidebar .menu-list li :not(collapsed) .arrow:before {
+  font-family: FontAwesome;
+  content: "\f078";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+  float: right;
+}
+
+.sidebar .menu-list ul .active,
+.sidebar .menu-list li .active {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+}
+
+.sidebar .menu-list ul .sub-menu li.active,
+.sidebar .menu-list li .sub-menu li.active {
+  color: #d19b3d;
+}
+
+.sidebar .menu-list ul .sub-menu li.active a,
+.sidebar .menu-list li .sub-menu li.active a {
+  color: #d19b3d;
+}
+
+.sidebar .menu-list ul .sub-menu li,
+.sidebar .menu-list li .sub-menu li {
+  background-color: #181c20;
+  border: none;
+  border-bottom: 1px solid #23282e;
+  margin-left: 0px;
+  text-indent: 10px;
+}
+
+.sidebar .menu-list ul .sub-menu li:hover,
+.sidebar .menu-list li .sub-menu li:hover {
+  background-color: #020203;
+}
+
+.sidebar .menu-list ul .sub-menu li:before,
+.sidebar .menu-list li .sub-menu li:before {
+  font-family: FontAwesome;
+  content: "\f105";
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: middle;
+}
+
+.sidebar .menu-list li {
+  padding-left: 0px;
+  border-left: 3px solid #2e353d;
+  border-bottom: 1px solid #23282e;
+}
+
+.sidebar .menu-list li a {
+  text-decoration: none;
+  color: white;
+}
+
+.sidebar .menu-list li a i {
+  padding-left: 10px;
+  width: 20px;
+  padding-right: 20px;
+}
+
+.sidebar .menu-list li:hover {
+  border-left: 3px solid #d19b3d;
+  background-color: #4f5b69;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+
+@media (max-width: 767px) {
+  .sidebar {
+    position: relative;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .sidebar .toggle-btn {
+    display: block;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10 !important;
+    padding: 3px;
+    width: 40px;
     text-align: center;
-    margin-top: 20px;
+  }
-    margin-bottom: 20px;
+
-    width: 250px;
+  .sidebar .language-switcher {
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  .sidebar .brand {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    text-align: left !important;
+    font-size: 22px;
+    padding: 0;
+    padding-left: 20px;
+    line-height: 50px !important;
+  }
 }
 
-.sidebar-wrapper .language-switcher .dropdown-menu {
+@media (min-width: 767px) {
-    min-width: 100px;
+  .sidebar .menu-list .menu-content {
+    display: block;
+  }
+  #main {
+    width:calc(100% - 225px);
+    float: right;
+  }
 }
 
-@media(min-width:768px) {
+body {
-    #wrapper {
+  margin: 0px;
-        padding-left: 250px;
+  padding: 0px;
-    }
-
-    #wrapper.toggled {
-        padding-left: 0;
-    }
-
-    #sidebar-wrapper {
-        width: 250px;
-    }
-
-    #wrapper.toggled #sidebar-wrapper {
-        width: 0;
-    }
-
-    #page-content-wrapper {
-        padding: 20px;
-        position: relative;
-    }
-
-    #wrapper.toggled #page-content-wrapper {
-        position: relative;
-        margin-right: 0;
-    }
 }
 
-
 .coredocs-section {
     border-top: 2px solid lightgrey;
     margin-top: 20px;
@@ -159,3 +190,18 @@
     border-top: 0;
     margin-top: 0;
 }
+
+.sidebar .language-switcher {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    bottom: 0;
+}
+
+.sidebar .language-switcher h6 {
+    margin-bottom: 15px;
+}
+
+.sidebar .language-switcher .btn {
+    padding: 3px 7px;
+}

rest_framework/templates/rest_framework/docs/index.html

@@ -27,44 +27,19 @@
 
     <body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
 
-        <nav class="navbar navbar-default navbar-fixed-top top-navbar">
+        {% include "rest_framework/docs/sidebar.html" %}
-          <div class="container-fluid">
-            <div class="navbar-header">
-                <a href="#document-title" class="navbar-toggle collapsed" id="menu-toggle">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </a>
-              <a class="navbar-brand" href="#">{{ document.title }}</a>
-            </div>
-          </div>
-        </nav>
 
-        <div id="wrapper">
+        <div class="container" id="main">
-            {% include "rest_framework/docs/sidebar.html" %}
+            <div class="row">
-
+                <div class="col-md-12">
-            <!-- Page Content -->
+                    {% include "rest_framework/docs/document.html" %}
-            <div id="page-content-wrapper">
-                <div class="container-fluid">
-                    <div class="row">
-                        <div class="col-lg-12">
-                            {% include "rest_framework/docs/document.html" %}
-                        </div>
-                    </div>
                 </div>
             </div>
-            <!-- /#page-content-wrapper -->
         </div>
 
         <script src="{% static 'rest_framework/docs/js/jquery-1.10.2.min.js' %}"></script>
         <script src="{% static 'rest_framework/docs/js/bootstrap.min.js' %}"></script>
         <script>
-            $("#menu-toggle").click(function(e) {
-                e.preventDefault();
-                $("#wrapper").toggleClass("toggled");
-            });
-
             function getCookie(name) {
                 var cookieValue = null;
                 if (document.cookie && document.cookie !== '') {
@@ -98,7 +73,7 @@
                 languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
                 languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
 
-                button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
+                button.closest("li.dropdown").find('.dropdown-toggle span').text(language)
 
                 var codeBlocks = $('pre.highlight')
                 codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
@@ -146,8 +121,6 @@
                     }
                 })
 
-                console.log(params)
-
                 client.action(doc, key, params).then(function (data) {
                     var response = JSON.stringify(data, null, 2);
                     form.find(".response-data").text(response)

rest_framework/templates/rest_framework/docs/sidebar.html

@@ -1,30 +1,33 @@
-<!-- Sidebar -->
+<div class="sidebar">
-<div id="sidebar-wrapper" class="sidebar-wrapper">
+    <h3 class="brand">{{ document.title }}</h3>
-    <div class="language-switcher">
+
-        <div class="btn-group">
+    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
-          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <div class="menu-list">
-            <span>shell</span> &nbsp;&nbsp;<span class="caret"></span>
+        <ul id="menu-content" class="menu-content collapse out">
-          </button>
+            {% for section_key, section in document.data.items %}
-          <ul class="dropdown-menu language-control">
+            <li data-toggle="collapse" data-target="#{{ section_key }}-{{ link_key }}" class="collapsed">
-            <li class="active"><a href="#" data-language="shell">shell</a></li>
+                <a href="#{{ section_key }}"><i class="fa fa-dot-circle-o fa-lg"></i> {{ section_key }} <span class="arrow"></span></a>
-            <li><a href="#" data-language="javascript">javascript</a></li>
+            </li>
-            <li><a href="#" data-language="python">python</a></li>
+            <ul class="sub-menu collapse in" id="{{ section_key }}-{{ link_key }}">
-          </ul>
+                {% for link_key, link in section.links.items %}
+                    <li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
+                {% endfor %}
+            </ul>
+            {% endfor %}
+        </ul>
+
+        <div class="language-switcher">
+            <h6>Choose Language</h6>
+            <div class="btn-group">
+              <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span>shell</span> &nbsp;&nbsp;<span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu language-control">
+                <li class="active"><a href="#" data-language="shell">shell</a></li>
+                <li><a href="#" data-language="javascript">javascript</a></li>
+                <li><a href="#" data-language="python">python</a></li>
+              </ul>
+            </div>
         </div>
     </div>
-
-    <ul id="sidebar-nav" class="nav nav-pills nav-stacked sidebar-nav">
-        {% for section_key, section in document.data.items %}
-        <li role="navigation">
-            <a href="#{{ section_key }}">{{ section_key }}</a>
-
-            <ul class="nav nav-pills nav-stacked">
-            {% for link_key, link in section.links.items %}
-                <li role="navigation"><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
-            {% endfor %}
-            </ul>
-        </li>
-        {% endfor %}
-    </ul>
 </div>
-<!-- /#sidebar-wrapper -->