Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

sidebar mini bug and logo-switch added

Daniel 1 year ago
parent
f38748e5ab
commit
cfd8454b1a
8 changed files with 267 additions and 30 deletions
Split View Show Diff Stats
  1. BIN
      src/assets/img/AdminLTEFullLogo.png
  2. 1 0
      src/html/pages/docs/layout.astro
  3. 83 0
      src/html/pages/layout/collapsed-sidebar.astro
  4. 96 0
      src/html/pages/layout/logo-switch.astro
  5. 1 1
      src/html/pages/layout/sidebar-mini.astro
  6. 85 7
      src/scss/_app-sidebar.scss
  7. 0 4
      src/scss/mixins/_animations.scss
  8. 1 18
      src/ts/push-menu.ts

BIN
src/assets/img/AdminLTEFullLogo.png
View File


+ 1 - 0
src/html/pages/docs/layout.astro
View File 

@@ -59,6 +59,7 @@ const page = "layout";
 
             <p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
 
             <ul>
 
               <li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
 
+              <li>Mini Sidebar on Toggle: use the class <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar upon loading.</li>
 
               <li>Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
 
               </ul>
 
           </div>

+ 83 - 0
src/html/pages/layout/collapsed-sidebar.astro
View File 

@@ -0,0 +1,83 @@
 
+---
 
+import Head from '@components/_head.astro';
 
+import Footer from '@components/dashboard/_footer.astro';
 
+import Topbar from '@components/dashboard/_topbar.astro';
 
+import Sidenav from '@components/dashboard/_sidenav.astro';
 
+import Scripts from '@components/_scripts.astro';
 
+
 
+const title = 'AdminLTE 4 | Sidebar Mini'
 
+const path = '../../../dist'
 
+const mainPage = 'layout'
 
+const page = 'collapsed-sidebar'
 
+---
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <!-- Main content -->
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">Collapsed Sidebar</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">Collapsed Sidebar</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <!-- Main content -->
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-12">
 
+                <!-- Default box -->
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">Title</h3>
 
+
 
+                    <div class="card-tools">
 
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
 
+                        <i class="fa-solid fa-minus"></i>
 
+                      </button>
 
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
 
+                        <i class="fa-solid fa-times"></i>
 
+                      </button>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    Start creating your amazing application!
 
+                  </div>
 
+                  <!-- /.card-body -->
 
+                  <div class="card-footer">
 
+                    Footer
 
+                  </div>
 
+                  <!-- /.card-footer-->
 
+                </div>
 
+                <!-- /.card -->
 
+              </div>
 
+            </div>
 
+            <!-- /.row -->
 
+          </div><!-- /.container-fluid -->
 
+        </div>
 
+        <!-- /.content -->
 
+      </main>
 
+      <!-- /.app-content -->
 
+
 
+      <Footer />
 
+    </div>
 
+    <!--  ./app-wrapper -->
 
+
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 96 - 0
src/html/pages/layout/logo-switch.astro
View File 

@@ -0,0 +1,96 @@
 
+---
 
+import Head from '@components/_head.astro';
 
+import Footer from '@components/dashboard/_footer.astro';
 
+import Topbar from '@components/dashboard/_topbar.astro';
 
+import Scripts from '@components/_scripts.astro';
 
+import { convertPathToHtml } from '../../../utils/index.js';
 
+
 
+const title = 'AdminLTE 4 | Sidebar Mini'
 
+const path = '../../../dist'
 
+const htmlPath = convertPathToHtml(path)
 
+---
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <!-- Sidebar Container -->
 
+      <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
 
+        <div class="sidebar-brand">
 
+          <a href={htmlPath + '/index.html'} class="brand-link logo-switch">
 
+            <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
 
+            <img src={path + '/assets/img/AdminLTEFullLogo.png'} alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
 
+          </a>
 
+        </div>
 
+        <!-- Sidebar -->
 
+        <div class="sidebar-wrapper">
 
+          <nav class="mt-2">
 
+
 
+          </nav>
 
+        </div>
 
+      <aside/>
 
+      <!-- Main content -->
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">Logo Switch</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">Logo Switch</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <!-- Main content -->
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-12">
 
+                <!-- Default box -->
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">Title</h3>
 
+
 
+                    <div class="card-tools">
 
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
 
+                        <i class="fa-solid fa-minus"></i>
 
+                      </button>
 
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
 
+                        <i class="fa-solid fa-times"></i>
 
+                      </button>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    Start creating your amazing application!
 
+                  </div>
 
+                  <!-- /.card-body -->
 
+                  <div class="card-footer">
 
+                    Footer
 
+                  </div>
 
+                  <!-- /.card-footer-->
 
+                </div>
 
+                <!-- /.card -->
 
+              </div>
 
+            </div>
 
+            <!-- /.row -->
 
+          </div><!-- /.container-fluid -->
 
+        </div>
 
+        <!-- /.content -->
 
+      </main>
 
+      <!-- /.app-content -->
 
+
 
+      <Footer />
 
+    </div>
 
+    <!--  ./app-wrapper -->
 
+
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 1 - 1
src/html/pages/layout/sidebar-mini.astro
View File 

@@ -15,7 +15,7 @@ const page = 'sidebar-mini'
 
   <head>
 
     <Head title={title} path={path} />
 
   </head>
 
-  <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
 
+  <body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
 
     <div class="app-wrapper">
 
       <Topbar path={path} />
 
       <Sidenav path={path} mainPage={mainPage} page={page} />

+ 85 - 7
src/scss/_app-sidebar.scss
View File 

@@ -45,6 +45,24 @@
 
       margin-left: .8rem;
 
       line-height: .8;
 
     }
 
+
 
+    .brand-image-xs {
 
+      float: left;
 
+      width: auto;
 
+      max-height: 33px;
 
+      margin-top: -.1rem;
 
+      line-height: .8;
 
+    }
 
+
 
+    .brand-image-xl {
 
+      width: auto;
 
+      max-height: 40px;
 
+      line-height: .8;
 
+
 
+      &.single {
 
+        margin-top: -.3rem;
 
+      }
 
+    }
 
   }
 
 
   .brand-text {
 
@@ -223,6 +241,42 @@
 
   white-space: nowrap;
 
 }
 
 
+// Logo style
 
+.logo-xs,
 
+.logo-xl {
 
+  position: absolute;
 
+  visibility: visible;
 
+  opacity: 1;
 
+
 
+  &.brand-image-xs {
 
+    top: 12px;
 
+    left: 18px;
 
+  }
 
+
 
+  &.brand-image-xl {
 
+    top: 6px;
 
+    left: 12px;
 
+  }
 
+}
 
+
 
+.logo-xs {
 
+  visibility: hidden;
 
+  opacity: 0;
 
+
 
+  &.brand-image-xl {
 
+    top: 8px;
 
+    left: 16px;
 
+  }
 
+}
 
+
 
+.brand-link {
 
+  &.logo-switch {
 
+    &::before {
 
+      content: "\00a0";
 
+    }
 
+  }
 
+}
 
+
 
 .sidebar-mini.sidebar-collapse {
 
   .app-sidebar {
 
     min-width: $lte-sidebar-mini-width;
 
@@ -246,17 +300,25 @@
 
   }
 
 
   .sidebar-menu .nav-link p,
 
-  .brand-text {
 
+  .brand-text,
 
+  .logo-xl {
 
     visibility: hidden;
 
     animation-name: fadeOut;
 
+    animation-duration: $lte-transition-speed;
 
     animation-fill-mode: both;
 
   }
 
 
-  &.sidebar-is-hover {
 
-    .app-sidebar {
 
-      min-width: var(--#{$lte-prefix}sidebar-width);
 
-      max-width: var(--#{$lte-prefix}sidebar-width);
 
-    }
 
+  .logo-xs {
 
+    display: inline-block;
 
+    visibility: visible;
 
+    animation-name: fadeIn;
 
+    animation-duration: $lte-transition-speed;
 
+    animation-fill-mode: both;
 
+  }
 
+
 
+  .app-sidebar:hover {
 
+    min-width: var(--#{$lte-prefix}sidebar-width);
 
+    max-width: var(--#{$lte-prefix}sidebar-width);
 
 
     .sidebar-menu .nav-header {
 
       display: inline-block;
 
@@ -267,13 +329,21 @@
 
     }
 
 
     .sidebar-menu .nav-link p,
 
-    .brand-text {
 
+    .brand-text,
 
+    .logo-xl {
 
       margin-left: 0;
 
       visibility: visible;
 
       animation-name: fadeIn;
 
       animation-duration: $lte-transition-speed;
 
       animation-fill-mode: both;
 
     }
 
+
 
+    .logo-xs {
 
+      visibility: hidden;
 
+      animation-name: fadeOut;
 
+      animation-duration: $lte-transition-speed;
 
+      animation-fill-mode: both;
 
+    }
 
   }
 
 }
 
 
@@ -368,6 +438,7 @@
 
             z-index: $lte-zindex-sidebar-overlay;
 
             width: 100%;
 
             height: 100%;
 
+            visibility: visible;
 
             background-color: rgba(0, 0, 0, .2);
 
             animation-name: fadeIn;
 
             animation-fill-mode: both;
 
@@ -378,6 +449,13 @@
 
   }
 
 }
 
 
+.sidebar-menu .nav-link p,
 
+.app-sidebar .brand-text,
 
+.app-sidebar .logo-xs,
 
+.app-sidebar .logo-xl {
 
+  @include transition(margin-left $lte-transition-speed linear, opacity $lte-transition-speed ease, visibility $lte-transition-speed ease);
 
+}
 
+
 
 // To prevent onload transition and animation
 
 .app-loaded {
 
   &.sidebar-mini.sidebar-collapse {

+ 0 - 4
src/scss/mixins/_animations.scss
View File 

@@ -32,24 +32,20 @@
 
 
 @keyframes fadeIn {
 
   from {
 
-    visibility: hidden;
 
     opacity: 0;
 
   }
 
 
   to {
 
-    visibility: visible;
 
     opacity: 1;
 
   }
 
 }
 
 
 @keyframes fadeOut {
 
   from {
 
-    visibility: visible;
 
     opacity: 1;
 
   }
 
 
   to {
 
-    visibility: hidden;
 
     opacity: 0;
 
   }
 
 }

+ 1 - 18
src/ts/push-menu.ts
View File 

@@ -24,13 +24,11 @@ const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
 
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 
 const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
 
 const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
 
-const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
 
 const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
 
 const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
 
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 
 
 const SELECTOR_APP_SIDEBAR = '.app-sidebar'
 
-const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
 
 const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
 
 const SELECTOR_NAV_ITEM = '.nav-item'
 
 const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
 
@@ -97,20 +95,6 @@ class PushMenu {
 
     this._element.dispatchEvent(event)
 
   }
 
 
-  sidebarHover() {
 
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
 
-
 
-    if (selSidebar) {
 
-      selSidebar.addEventListener('mouseover', () => {
 
-        document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER)
 
-      })
 
-
 
-      selSidebar.addEventListener('mouseout', () => {
 
-        document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
 
-      })
 
-    }
 
-  }
 
-
 
   addSidebarBreakPoint() {
 
     const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
 
     const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
 
@@ -125,7 +109,7 @@ class PushMenu {
 
         this.expand()
 
       }
 
 
-      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
 
+      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
 
         this.collapse()
 
       }
 
     }
 
@@ -141,7 +125,6 @@ class PushMenu {
 
 
   init() {
 
     this.addSidebarBreakPoint()
 
-    this.sidebarHover()
 
   }
 
 }