update menu, hover

assets/script/extension_daisyui.css

@@ -68,6 +68,7 @@ body {
   line-height: 1.5;
   margin: auto;
   min-height: 100vh;
+  min-width: 1200px;
 }
 
 img {
@@ -313,6 +314,68 @@ a {
 .admin-menu-container .icon-home {
   background-position: -9px -7px;
 }
+.admin-menu-container .box-hover {
+  padding: 10px 22px 10px 15px;
+  border-radius: 6px;
+  background: #004e99;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  position: fixed;
+  left: 240px;
+  top: 0;
+  display: none;
+  min-width: 200px;
+  z-index: 999;
+  max-height: 400px;
+  overflow: auto;
+}
+.admin-menu-container .box-hover.active {
+  display: block;
+}
+.admin-menu-container .box-hover::after {
+  position: absolute;
+  content: "";
+  left: -29px;
+  top: 0;
+  width: 37px;
+  height: 100%;
+}
+.admin-menu-container .box-hover a {
+  display: block;
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 12px;
+  padding-left: 20px;
+}
+.admin-menu-container .box-hover a::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #79b0e2;
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 9;
+}
+.admin-menu-container .box-hover a::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+.admin-menu-container .box-hover a:last-child {
+  padding-bottom: 0;
+}
+.admin-menu-container .box-hover a:last-child::after {
+  display: none;
+}
+.admin-menu-container .box-hover a:hover {
+  text-decoration: underline;
+}
 .admin-menu-container .icon-order {
   background-position: -45px -7px;
 }
@@ -368,7 +431,7 @@ a {
 
 .admin-content-container {
   width: calc(100% - 245px);
-  overflow-y: auto;
+  overflow: auto;
 }
 .admin-content-container .note-list {
   min-width: 144px;
@@ -826,46 +889,4 @@ a {
   .admin-menu-container {
     display: block;
   }
-}
+}/*# sourceMappingURL=extension_daisyui.css.map */
-@media (min-width: 1600px) {
-  .admin-menu-container {
-    display: block;
-  }
-}
-@media (min-width: 1366px) {
-  .admin-menu-container {
-    display: block;
-  }
-}
-@media screen and (max-width: 1365px) and (min-width: 1024px) {
-  .admin-menu-container {
-    display: block;
-  }
-}
-@media (max-width: 1023px) {
-  .admin-menu-container {
-    display: none;
-  }
-  .admin-content-container {
-    margin-left: 0;
-    width: 100%;
-  }
-}
-@media (max-width: 767px) {
-  .admin-content-container {
-    width: 100%;
-    margin-left: 0;
-  }
-  .admin-content-container .content-holder {
-    padding: 10px;
-  }
-  .admin-content-container .item-stat {
-    grid-column: span 2/span 2;
-  }
-  .admin-content-container .item-chart {
-    grid-column: span 4/span 4;
-  }
-  #js-form-search {
-    display: none;
-  }
-}/*# sourceMappingURL=pc_style.css.map */

assets/script/extension_daisyui.scss

@@ -61,6 +61,7 @@ body {
     line-height: 1.5;
     margin: auto;
     min-height: 100vh;
+    min-width: 1200px;
 }
 img {
     max-width: 100%;
@@ -306,6 +307,70 @@ a {
     .icon-home {
         background-position: -9px -7px;
     }
+
+    .box-hover {
+        padding: 10px 22px 10px 15px;
+        border-radius: 6px;
+        background: #004e99;
+        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+        white-space: nowrap;
+        position: fixed;
+        left: 240px;
+        top: 0;
+        display: none;
+        min-width: 200px;
+        z-index: 999;
+        max-height: 400px;
+        overflow: auto;
+        &.active {
+            display: block;
+        }
+        &::after {
+            position: absolute;
+            content: "";
+            left: -29px;
+            top: 0;
+            width: 37px;
+            height: 100%;
+        }
+        a {
+            display: block;
+            line-height: 18px;
+            position: relative;
+            padding-bottom: 12px;
+            padding-left: 20px;
+            &::before {
+                content: "";
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: #79b0e2;
+                position: absolute;
+                top: 4px;
+                left: 0;
+                z-index: 9;
+            }
+            &::after {
+                content: "";
+                width: 1px;
+                height: 100%;
+                background: #fff;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+            }
+            &:last-child {
+                padding-bottom: 0;
+                &::after {
+                    display: none;
+                }
+            }
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
     .icon-order {
         background-position: -45px -7px;
     }
@@ -362,7 +427,7 @@ a {
 
 .admin-content-container {
     width: calc(100% - 245px);
-    overflow-y: auto;
+    overflow: auto;
     .note-list {
         min-width: 144px;
         a {
@@ -834,50 +899,3 @@ a {
         display: block;
     }
 }
-
-@media (min-width: 1600px) {
-    .admin-menu-container {
-        display: block;
-    }
-}
-
-@media (min-width: 1366px) {
-    .admin-menu-container {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 1365px) and (min-width: 1024px) {
-    .admin-menu-container {
-        display: block;
-    }
-}
-
-@media (max-width: 1023px) {
-    .admin-menu-container {
-        display: none;
-    }
-    .admin-content-container {
-        margin-left: 0;
-        width: 100%;
-    }
-}
-
-@media (max-width: 767px) {
-    .admin-content-container {
-        width: 100%;
-        margin-left: 0;
-        .content-holder {
-            padding: 10px;
-        }
-        .item-stat {
-            grid-column: span 2 / span 2;
-        }
-        .item-chart {
-            grid-column: span 4 / span 4;
-        }
-    }
-    #js-form-search {
-        display: none;
-    }
-}

template/javascript/global.html

@@ -7,6 +7,9 @@
             $('#overlay').addClass('active');
         });
 
+        // hover show danh muc con
+        HoverShowMenu();
+
         AdminFunctions.searchSuggestions('#js-input-search')
     })
 
@@ -17,6 +20,43 @@
     }
 
 
+    function HoverShowMenu() {
+        $("#js-menu-big .box-item .item").on("mousemove", function () {
+            let $checkMenu = $('#js-menu-big').hasClass('active');
+            if ($checkMenu) {
+                let $hoverMenu = $('#js-hover-menu');
+                let $this = $(this).parents('.box-item');
+                let $hoverContent = $this.find('.hover-menu');
+
+                if ($hoverContent.length) {
+                    let offset = $this.offset();
+                    let x = offset.left + $("#js-menu-big").width();
+                    let y = offset.top;
+
+                    // Kiểm tra nếu hoverContent bị tràn màn hình ở dưới
+                    let hoverHeight = $hoverContent.outerHeight();
+                    let windowHeight = $(window).height();
+                    let maxY = $(window).scrollTop() + windowHeight; // Vị trí Y tối đa có thể hiển thị
+                    let newY = y;
+
+                    if (y + hoverHeight > maxY) {
+                        newY = maxY - hoverHeight - 10;
+                    }
+
+                    $hoverMenu.addClass('active')
+                        .html($hoverContent.html())
+                        .css({ left: x, top: newY });
+                }
+            }
+        });
+
+        $("#js-hover-menu").on("mouseleave", function () {
+            $("#js-hover-menu").removeClass("active");
+        });
+    }
+
+
+
     function formatCurrency(a) {
         var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
         var len = b.length;

template/theme.html

@@ -11,18 +11,13 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
         rel="stylesheet">
-    <link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
+    <link rel="stylesheet" media="screen" href="{{ 'daisyui.css' | asset_url }}?v12.11" />
-    <link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2025.02" />
+    <link rel="stylesheet" media="screen" href="{{ 'extension_daisyui.css' | asset_url }}?v2025.02" />
     <script src="{{ 'tailwindcss.js' | asset_url }}"></script>
-
-
 </head>
 
-
 <body>
 
-
-
     <div id="overlay" onclick="clickBackground()"></div>
 
     <div class="admin-global-container">
@@ -104,6 +99,9 @@
                     <span class="title text-[14px]"> Cài đặt </span>
                 </a>
 
+            </div>
+            <div class="box-hover" id="js-hover-menu">
+
             </div>
         </div>
         <div class="admin-content-container h-screen" id="js-admin-content-container">
@@ -111,10 +109,6 @@
             <div
                 class="admin-header-container flex items-center justify-between bg-white px-4 py-3 sticky top-0 z-[99] border-b-[1px] border-[#eef0f2]">
                 <div class="flex items-center">
-                    <a href="javascript:void(0)" title="Mở menu"
-                        class="icon-close lg:hidden md:block mr-[10px] 2xl:hidden sm:block" id="js-show-menu">
-                        <i class="fa fa-bars text-[25px]"></i>
-                    </a>
                     <form class="w-[420px] relative w-[100%] menu-hide" id="js-form-search">
                         <div
                             class="content w-[100%] flex items-center border-[#ECECEC] border-[1px] rounded-[5px] focus-within:border-[#0041E8]">