up

assets/script/pc_style.scss

@@ -1,3 +1,5 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
+
 *,
 ::after,
 ::before {
@@ -111,37 +113,21 @@ a {
     width: 16%;
     padding: 20px 0;
     line-height: 20px;
-    overflow-y: auto;
+    &.active {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
     a {
         color: #fff;
     }
     .menu-logo {
         display: table;
-        margin-bottom: 50px;
+        margin-bottom: 25px;
         margin-left: 16px;
         img {
             height: 22px;
         }
     }
-    details {
-        &[open] {
-            svg {
-                transform: rotate(90deg);
-            }
-            summary {
-                background: #81b5e4;
-                a {
-                    font-weight: 700;
-                }
-            }
-            .icons {
-                filter: brightness(100);
-            }
-            .fa-angle-right {
-                transform: rotate(90deg);
-            }
-        }
-    }
 
     svg {
         position: absolute;
@@ -160,7 +146,7 @@ a {
             .icons {
                 filter: brightness(100);
             }
-            .sub-hover {
+            .hover-menu {
                 display: block;
             }
         }
@@ -174,8 +160,21 @@ a {
     .title-main {
         width: 100%;
     }
+    .box-item {
+        &:hover {
+            .hover-menu {
+                visibility: visible;
+                opacity: 1;
+                left: calc(100% + 10px);
+                &::before {
+                    display: block;
+                }
+            }
+        }
+    }
     .sub-menu {
         position: relative;
+        display: none;
         a {
             display: block;
             padding: 10px 10px 10px 45px;
@@ -194,6 +193,74 @@ a {
             }
         }
     }
+    .hover-menu {
+        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;
+        z-index: -1;
+        transition: 0.2s all;
+        position: absolute;
+        left: calc(100% + 30px);
+        top: 0;
+        opacity: 0;
+        visibility: hidden;
+        min-width: 200px;
+        z-index: 999;
+        max-height: 400px;
+        overflow: auto;
+        &.bottom {
+            bottom: -30px;
+            top: unset;
+        }
+        &::before {
+            position: absolute;
+            left: -15px;
+            top: 0;
+            width: 30px;
+            height: 100%;
+            content: "";
+            display: none;
+        }
+        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-home {
         background-position: -9px -7px;
     }
@@ -253,10 +320,6 @@ a {
 
 .admin-content-container {
     width: calc(100% - 50px);
-    &.show-large-menu {
-        width: 82%;
-        margin-left: 0;
-    }
     .note-list {
         min-width: 144px;
         a {