Inicio Explorar Ayuda
Registro Iniciar sesión
wilson.silva
/
AdminLte
espejo de https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

feat(css): add sidebar-without-hover class to disable hover expand on collapsed sidebar (#5837)

Add `sidebar-without-hover` body class that prevents the collapsed mini
sidebar from expanding on hover. Wraps all `.app-sidebar:hover` rules
inside `:not(.sidebar-without-hover)` so the behavior is opt-in.

Includes a new demo page at layout/collapsed-sidebar-without-hover.

Co-Authored-By: WojakGra <WojakGra@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Aigars Silkalns hace 22 horas
padre
b4edb2707e
commit
ae0554cecd
Se han modificado 3 ficheros con 171 adiciones y 45 borrados
Dividir vista Mostrar estadísticas de diff
  1. 13 1
      src/html/components/dashboard/_sidenav.astro
  2. 110 0
      src/html/pages/layout/collapsed-sidebar-without-hover.astro
  3. 48 44
      src/scss/_app-sidebar.scss

+ 13 - 1
src/html/components/dashboard/_sidenav.astro
Ver fichero 

@@ -142,7 +142,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
 
             <p>
 
               Layout Options
 
               <span class="nav-badge badge text-bg-secondary me-3"
 
-              >6</span
 
+              >7</span
 
               >
 
               <i class="nav-arrow bi bi-chevron-right"></i>
 
             </p>
 
@@ -226,6 +226,18 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
 
                 <p>Sidebar Mini <small>+ Collapsed</small></p>
 
               </a>
 
             </li>
 
+            <li class="nav-item">
 
+              <a
 
+                href={htmlPath + "/layout/collapsed-sidebar-without-hover.html"}
 
+                class:list={[
 
+                  "nav-link",
 
+                  page === "collapsed-sidebar-without-hover" && "active",
 
+                ]}
 
+              >
 
+                <i class="nav-icon bi bi-circle"></i>
 
+                <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
 
+              </a>
 
+            </li>
 
             <li class="nav-item">
 
               <a
 
                 href={htmlPath + "/layout/logo-switch.html"}

+ 110 - 0
src/html/pages/layout/collapsed-sidebar-without-hover.astro
Ver fichero 

@@ -0,0 +1,110 @@
 
+---
 
+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 | Collapsed Sidebar Without Hover"
 
+const path = "../../../dist"
 
+const mainPage = "layout"
 
+const page = "collapsed-sidebar-without-hover";
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <!--begin::Head-->
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <!--end::Head-->
 
+  <!--begin::Body-->
 
+  <body
 
+    class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-without-hover sidebar-collapse bg-body-tertiary"
 
+  >
 
+    <!--begin::App Wrapper-->
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <!--begin::App Main-->
 
+      <main class="app-main">
 
+        <!--begin::App Content Header-->
 
+        <div class="app-content-header">
 
+          <!--begin::Container-->
 
+          <div class="container-fluid">
 
+            <!--begin::Row-->
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">Collapsed Sidebar Without Hover</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 Without Hover
 
+                  </li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+            <!--end::Row-->
 
+          </div>
 
+          <!--end::Container-->
 
+        </div>
 
+        <!--end::App Content Header-->
 
+        <!--begin::App Content-->
 
+        <div class="app-content">
 
+          <!--begin::Container-->
 
+          <div class="container-fluid">
 
+            <!--begin::Row-->
 
+            <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 data-lte-icon="expand" class="bi bi-plus-lg"></i>
 
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
 
+                      </button>
 
+                      <button
 
+                        type="button"
 
+                        class="btn btn-tool"
 
+                        data-lte-toggle="card-remove"
 
+                        title="Remove"
 
+                      >
 
+                        <i class="bi bi-x-lg"></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>
 
+            <!--end::Row-->
 
+          </div>
 
+          <!--end::Container-->
 
+        </div>
 
+        <!--end::App Content-->
 
+      </main>
 
+      <!--end::App Main-->
 
+      <Footer />
 
+    </div>
 
+    <!--end::App Wrapper-->
 
+    <!--begin::Script-->
 
+    <Scripts path={path} />
 
+    <!--end::Script-->
 
+  </body><!--end::Body-->
 
+</html>

+ 48 - 44
src/scss/_app-sidebar.scss
Ver fichero 

@@ -404,55 +404,59 @@
 
     animation-fill-mode: both;
 
   }
 
 
-  .app-sidebar:hover {
 
-    min-width: var(--#{$lte-prefix}sidebar-width);
 
-    max-width: var(--#{$lte-prefix}sidebar-width);
 
+  &:not(.sidebar-without-hover) {
 
+    .app-sidebar:hover {
 
+      min-width: var(--#{$lte-prefix}sidebar-width);
 
+      max-width: var(--#{$lte-prefix}sidebar-width);
 
 
-    .sidebar-menu .nav-header {
 
-      display: inline;
 
-    }
 
+      .sidebar-menu .nav-header {
 
+        display: inline;
 
+      }
 
 
-    .sidebar-menu .nav-link {
 
-      width: auto;
 
-    }
 
+      .sidebar-menu .nav-link {
 
+        width: auto;
 
+      }
 
 
-    .sidebar-menu .nav-link p,
 
-    .brand-text,
 
-    .logo-xl {
 
-      width: auto;
 
-      margin-left: 0;
 
-      visibility: visible;
 
-      animation-name: fadeIn;
 
-      animation-duration: $lte-transition-speed;
 
-      animation-fill-mode: both;
 
-    }
 
+      .sidebar-menu .nav-link p,
 
+      .brand-text,
 
+      .logo-xl {
 
+        width: auto;
 
+        margin-left: 0;
 
+        visibility: visible;
 
+        animation-name: fadeIn;
 
+        animation-duration: $lte-transition-speed;
 
+        animation-fill-mode: both;
 
+      }
 
 
-    .brand-text {
 
-      display: inline;
 
-      max-width: inherit;
 
-      margin-left: .5rem;
 
-      animation-name: fadeIn;
 
-      animation-duration: $lte-transition-speed;
 
-      animation-fill-mode: both;
 
-    }
 
-    .nav-badge,
 
-    .nav-arrow {
 
-      display: inline-block;
 
-      visibility: visible;
 
-      animation-name: fadeIn;
 
-      animation-duration: $lte-transition-speed;
 
-      animation-fill-mode: both;
 
-      animation-delay: $lte-transition-speed;
 
-    }
 
+      .brand-text {
 
+        display: inline;
 
+        max-width: inherit;
 
+        margin-left: .5rem;
 
+        animation-name: fadeIn;
 
+        animation-duration: $lte-transition-speed;
 
+        animation-fill-mode: both;
 
+      }
 
 
-    .nav-link p {
 
-      padding-left: .5rem;
 
-    }
 
-    .logo-xs {
 
-      visibility: hidden;
 
-      animation-name: fadeOut;
 
-      animation-duration: $lte-transition-speed;
 
-      animation-fill-mode: both;
 
+      .nav-badge,
 
+      .nav-arrow {
 
+        display: inline-block;
 
+        visibility: visible;
 
+        animation-name: fadeIn;
 
+        animation-duration: $lte-transition-speed;
 
+        animation-fill-mode: both;
 
+        animation-delay: $lte-transition-speed;
 
+      }
 
+
 
+      .nav-link p {
 
+        padding-left: .5rem;
 
+      }
 
+
 
+      .logo-xs {
 
+        visibility: hidden;
 
+        animation-name: fadeOut;
 
+        animation-duration: $lte-transition-speed;
 
+        animation-fill-mode: both;
 
+      }
 
     }
 
   }
 
 }