menu logo

resources/assets/dcat/sass/components/_menu.scss

@@ -0,0 +1,61 @@
+
+.main-menu {
+  .navbar-header {
+    padding: 0.35rem 1rem 4.5rem;
+
+    .navbar-brand {
+      margin-top: 1.2rem;
+
+      .logo-mini {
+        display: none;
+      }
+
+      .logo-lg {
+        color: $primary;
+        font-weight: 600;
+        letter-spacing: 0.01rem;
+        font-size: 1.57rem;
+        -webkit-animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
+        animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
+      }
+
+      img {
+        display: inline-block;
+        max-width: 45px;
+        max-height: 40px;
+      }
+    }
+
+    .modern-nav-toggle {
+      display: block;
+      float: right;
+      margin-top: 1px;
+    }
+
+    .nav-item {
+      width: 100%;
+      text-align: center;
+    }
+
+    .navbar-brand {
+      display: inline-block;
+      margin: 10px 0;
+    }
+  }
+}
+
+
+body.vertical-layout.vertical-menu-modern.menu-collapsed {
+  .main-menu:not(.expanded) .navbar-header {
+    width: 80px;
+    padding: 0.35rem 15px;
+
+    .logo-lg {
+      display: none;
+    }
+
+    .logo-mini {
+      display: inline-block;
+    }
+  }
+}

resources/assets/dcat/sass/dcat-app.scss

@@ -67,6 +67,8 @@ ol, ul, dl {
 @import "./components/label";
 // tab
 @import "./components/tab";
+// menu
+@import "./components/menu";
 
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
    font-size: 1.3rem;

resources/dist/dcat/css/dcat-app.css

@@ -2712,6 +2712,62 @@ table.dataTable.complex-headers tfoot td {
   background: #ea5455;
 }
 
+.main-menu .navbar-header {
+  padding: 0.35rem 1rem 4.5rem;
+}
+
+.main-menu .navbar-header .navbar-brand {
+  margin-top: 1.2rem;
+}
+
+.main-menu .navbar-header .navbar-brand .logo-mini {
+  display: none;
+}
+
+.main-menu .navbar-header .navbar-brand .logo-lg {
+  color: #5c6bc6;
+  font-weight: 600;
+  letter-spacing: 0.01rem;
+  font-size: 1.57rem;
+  -webkit-animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
+  animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
+}
+
+.main-menu .navbar-header .navbar-brand img {
+  display: inline-block;
+  max-width: 45px;
+  max-height: 40px;
+}
+
+.main-menu .navbar-header .modern-nav-toggle {
+  display: block;
+  float: right;
+  margin-top: 1px;
+}
+
+.main-menu .navbar-header .nav-item {
+  width: 100%;
+  text-align: center;
+}
+
+.main-menu .navbar-header .navbar-brand {
+  display: inline-block;
+  margin: 10px 0;
+}
+
+body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header {
+  width: 80px;
+  padding: 0.35rem 15px;
+}
+
+body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .logo-lg {
+  display: none;
+}
+
+body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .logo-mini {
+  display: inline-block;
+}
+
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
   font-size: 1.3rem;
 }

resources/views/partials/navbar.blade.php

@@ -4,8 +4,8 @@
             <ul class="nav navbar-nav flex-row">
                 <li class="nav-item">
                     <a href="{{ admin_url('/') }}" class="navbar-brand waves-effect waves-light">
-                        <div class="brand-logo"></div>
-                        <h2 class="brand-text mb-0">{!! config('admin.logo', config('admin.name')) !!}</h2>
+                        <span class="logo-mini">{!! config('admin.logo-mini') !!}</span>
+                        <span class="logo-lg">{!! config('admin.logo') !!}</span>
                     </a>
                 </li>
             </ul>

resources/views/partials/sidebar.blade.php

@@ -4,11 +4,10 @@
         <ul class="nav navbar-nav flex-row">
             <li class="nav-item mr-auto">
                 <a href="{{ admin_url('/') }}" class="navbar-brand waves-effect waves-light">
-                    <div class="brand-logo"></div>
-                    <h2 class="brand-text mb-0">{!! config('admin.logo', config('admin.name')) !!}</h2>
+                    <span class="logo-mini">{!! config('admin.logo-mini') !!}</span>
+                    <span class="logo-lg">{!! config('admin.logo') !!}</span>
                 </a>
-            </li>
-            <li class="nav-item nav-toggle">
+
                 <a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse">
                     <i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i>
                     <i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block primary collapse-toggle-icon"