add sidebar header title, background, sidebar icon

backstage/static/js/sidebar.js

@@ -12,6 +12,7 @@ const toTopButton = document.querySelector('.toTop');
 
 function SidebarCollapse () {
   const collapseFlag = true;
+  $('.list-group i').toggleClass('menu-icon');
   $('.menu-collapsed').toggleClass('d-none');
   $('.sidebar-submenu').toggleClass('d-none');
   $('.submenu-icon').toggleClass('d-none');
@@ -40,9 +41,9 @@ function scrollTop() {
 
 function autoFade() {
   if(document.body.scrollTop >= 300 || document.documentElement.scrollTop >= 300) {
-    toTopButton.style.opacity = 1;
+    toTopButton.style.display = 1;
   } else {
-    toTopButton.style.opacity = 0;
+    toTopButton.style.display = 0;
   }
 }
 

backstage/static/styles/main.css

@@ -228,6 +228,9 @@ label[for="file"] {
   margin-right: 15px;
 } */
 
+.menu-icon {
+  margin-left: 1.2rem;
+}
 #sidebar-container {
   min-height: 100vh;
   background-color: rgb(216, 215, 215);
@@ -257,15 +260,23 @@ label[for="file"] {
 }
 
 #sidebar-container .sidebar-header {
-  padding-top: 1rem;
-  background-image: url('../imgs/logo2.png'), linear-gradient(white, white);
-  width: 100%;
-  height: 50px;
+  background-image: url('../imgs/sidebar_\ backbround.jpeg');
+  height: 65px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
+  position: relative;
 }
 
+#sidebar-container .sidebar__company {
+  position: absolute;
+  bottom: 3px;
+  left: 0.5rem;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 2px;
+}
 /* ----------| Submenu item*/    
 
 #sidebar-container .list-group .list-group-item {

backstage/templates/layout.html

@@ -35,9 +35,10 @@
     <!-- Sidebar -->
     <nav id="sidebar-container" class="sidebar-expanded col-2 sidebar"><!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
       <div class="sidebar-header">
+        <h3 class="sidebar__company">小寶優居</h3>
       </div>
       <!-- Bootstrap List Group -->
-      <ul class="list-group">
+      <ul class="list-group pt-2">
         <!-- /END Separator -->
         <!-- Menu with submenu -->
         <a href="#submenu1" data-toggle="collapse" aria-expanded="false" class="bg-dark list-group-item list-group-item-action flex-column align-items-start">