فهرست منبع

add sidebar style and js

weichen 4 سال پیش
والد
کامیت
84c3b1975a
2فایلهای تغییر یافته به همراه90 افزوده شده و 0 حذف شده
  1. 27 0
      backstage/static/js/sidebar.js
  2. 63 0
      backstage/static/styles/main.css

+ 27 - 0
backstage/static/js/sidebar.js

@@ -0,0 +1,27 @@
+$('#body-row .collapse').collapse('hide'); 
+
+// Collapse/Expand icon
+$('#collapse-icon').addClass('fa-angle-double-left'); 
+
+// Collapse click
+$('[data-toggle=sidebar-colapse]').click(function() {
+  SidebarCollapse();
+});
+
+function SidebarCollapse () {
+  $('.menu-collapsed').toggleClass('d-none');
+  $('.sidebar-submenu').toggleClass('d-none');
+  $('.submenu-icon').toggleClass('d-none');
+  $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
+  
+  // Treating d-flex/d-none on separators with title
+  var SeparatorTitle = $('.sidebar-separator-title');
+  if ( SeparatorTitle.hasClass('d-flex') ) {
+      SeparatorTitle.removeClass('d-flex');
+  } else {
+      SeparatorTitle.addClass('d-flex');
+  }
+  
+  // Collapse/Expand icon
+  $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
+}

+ 63 - 0
backstage/static/styles/main.css

@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+/*-------------------------------- END ----*/
+#body-row {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+#sidebar-container {
+  min-height: 100vh;
+  background-color: #132644;
+  padding: 0;
+  /* flex: unset; */
+}
+
+.sidebar-expanded {
+  width: 230px;
+}
+
+.sidebar-collapsed {
+  /*width: 60px;*/
+  width: 100px;
+}
+
+/* ----------| Menu item*/    
+#sidebar-container .list-group a {
+  height: 50px;
+  color: white;
+}
+
+/* ----------| Submenu item*/    
+#sidebar-container .list-group li.list-group-item {
+  background-color: #132644;
+}
+
+#sidebar-container .list-group .sidebar-submenu a {
+  height: 45px;
+  padding-left: 30px;
+}
+
+.sidebar-submenu {
+  font-size: 0.9rem;
+}
+
+/* ----------| Separators */    
+.sidebar-separator-title {
+  background-color: #132644;
+  height: 35px;
+}
+
+.sidebar-separator {
+  background-color: #132644;
+  height: 25px;
+}
+
+.logo-separator {
+  background-color: #132644;
+  height: 60px;
+}
+
+a.bg-dark {
+  background-color: #132644 !important;
+}