Update breadcrums layout

jet/static/jet/css/_breadcrumbs.scss

@@ -14,21 +14,20 @@ div.breadcrumbs {
   text-overflow: ellipsis;
   overflow: hidden;
   min-height: 32px;
-  display: inline;
 
   @include for-mobile {
-    padding: 20px 20px 10px 0;
+    padding: 20px 20px 10px 20px;
     white-space: normal;
     text-overflow: clip;
     overflow: auto;
   }
 
-  &.initialized {
-    visibility: inherit;
+  @include for-phone {
+    padding: 10px;
   }
 
-  body.menu-pinned & {
-    padding-left: 0;
+  &.initialized {
+    visibility: inherit;
   }
 
   a {
@@ -50,45 +49,4 @@ div.breadcrumbs {
     font-size: 15px;
     vertical-align: middle;
   }
-
-  &-menu {
-    float: left;
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-    line-height: 31px;
-    padding: 0; 
-
-    &:hover {
-      color: $hover-link-color;
-    }
-
-    body.menu-pinned & {
-      display: none;
-    }
-
-    @include for-mobile {
-      display: none;
-    }
-  }
-}
-
-.breadcrumbs-container {
-  position: relative;
-  min-height: 31px;
-  padding: 10px 175px + 20px + 20px 10px 20px;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);
-
-  body.login & {
-    display: none;
-  }
-
-  @include for-mobile {
-    padding: 20px 20px 10px 20px;
-  }
-
-  @include for-phone {
-    padding-left: 10px;
-  }
 }
-

jet/static/jet/css/_sidebar.scss

@@ -539,4 +539,25 @@
       }
     }
   }
+
+  &-container-toggle {
+    float: left;
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    line-height: 31px;
+    padding: 10px 0 10px 20px;
+
+    &:hover {
+      color: $hover-link-color;
+    }
+
+    body.menu-pinned & {
+      display: none;
+    }
+
+    @include for-mobile {
+      display: none;
+    }
+  }
 }

jet/static/jet/js/src/features/sidebar/main.js

@@ -71,6 +71,12 @@ SideBar.prototype = {
     storePinStatus: function(status) {
         $.cookie('sidebar_pinned', status, { expires: 365, path: '/' });
     },
+    addToggleButton: function() {
+        var $button = $('<span>')
+          .addClass('sidebar-container-toggle sidebar-header-menu-icon icon-menu sidebar-toggle');
+
+        $('#container').prepend($button);
+    },
     run: function() {
         var $sidebar = this.$sidebar;
 
@@ -80,6 +86,7 @@ SideBar.prototype = {
 
         try {
             this.initScrollBars($sidebar);
+            this.addToggleButton();
             this.initSideBarToggle();
             this.initPinSideBar($sidebar);
         } catch (e) {

jet/static/jet/js/src/layout-updaters/breadcrumbs.js

@@ -1,5 +1,4 @@
 var $ = require('jquery');
-var sidebar = require('../features/sidebar/main.js');
 
 var BreadcrumbsUpdater = function($breadcrumbs) {
     this.$breadcrumbs = $breadcrumbs;
@@ -16,18 +15,12 @@ BreadcrumbsUpdater.prototype = {
     scrollToEnd: function($breadcrumbs) {
         $breadcrumbs.scrollLeft($breadcrumbs[0].scrollWidth - $breadcrumbs.width());
     },
-    initOpenSideBar: function ($breadcrumbs) {
-        if (sidebar) {
-            $breadcrumbs.siblings('.breadcrumbs-menu').on('click', sidebar.sideBarToggle.bind(sidebar))
-        }
-    },
     run: function() {
         var $breadcrumbs = this.$breadcrumbs;
 
         try {
             this.replaceSeparators($breadcrumbs);
             this.scrollToEnd($breadcrumbs);
-            this.initOpenSideBar($breadcrumbs);
         } catch (e) {
             console.error(e, e.stack);
         }
@@ -40,9 +33,7 @@ $(document).ready(function() {
     var $breadcrumbs = $('.breadcrumbs');
 
     if ($breadcrumbs.length == 0) {
-        $breadcrumbs = $('<div>')
-            .addClass('breadcrumbs')
-            .appendTo($('#breadcrumbs-container'));
+        return;
     }
 
     $breadcrumbs.each(function() {

jet/templates/admin/base.html

@@ -77,17 +77,12 @@
         {% endblock %}
     </div>
     <!-- END Header -->
-    
-    {% block breadcrumbs_container %}
-        <div id="breadcrumbs-container" class="breadcrumbs-container">
-            <span id="breadcrumbs-menu" class="breadcrumbs-menu sidebar-header-menu-icon icon-menu"></span>
-            {% block breadcrumbs %}
-                <div class="breadcrumbs">
-                    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>{% if title %} &rsaquo;
-                    {{ title }}{% endif %}
-                </div>
-            {% endblock %}
-        </div>
+
+    {% block breadcrumbs %}
+    <div class="breadcrumbs">
+    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
+    {% if title %} &rsaquo; {{ title }}{% endif %}
+    </div>
     {% endblock %}
     {% endif %}