@raketa-cloud/admin 1.1.0 → 1.2.0

package/dist/application.css

@@ -2134,12 +2134,8 @@ select {
   right: -1rem;
 }
 
-.-right-\[10px\] {
-  right: -10px;
-}
-
-.bottom-12 {
-  bottom: 3rem;
+.bottom-20 {
+  bottom: 5rem;
 }
 
 .end-1 {
@@ -2154,6 +2150,10 @@ select {
   left: 2rem;
 }
 
+.left-\[64px\] {
+  left: 64px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -2190,6 +2190,10 @@ select {
   z-index: 20;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .m-1 {
   margin: 0.25rem;
 }
@@ -2341,6 +2345,10 @@ select {
   display: none;
 }
 
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
 .size-14 {
   width: 3.5rem;
   height: 3.5rem;
@@ -2366,10 +2374,6 @@ select {
   height: 2rem;
 }
 
-.h-0 {
-  height: 0px;
-}
-
 .h-1 {
   height: 0.25rem;
 }
@@ -2407,10 +2411,6 @@ select {
   max-height: 100vh;
 }
 
-.w-0 {
-  width: 0px;
-}
-
 .w-1 {
   width: 0.25rem;
 }
@@ -2575,22 +2575,14 @@ select {
   border-bottom-width: 2px;
 }
 
-.border-b-\[28px\] {
-  border-bottom-width: 28px;
-}
-
-.border-l-\[10px\] {
-  border-left-width: 10px;
+.border-l {
+  border-left-width: 1px;
 }
 
 .border-t {
   border-top-width: 1px;
 }
 
-.border-t-\[28px\] {
-  border-top-width: 28px;
-}
-
 .border-mono-25 {
   --tw-border-opacity: 1;
   border-color: rgb(234 234 234 / var(--tw-border-opacity));
@@ -2615,17 +2607,9 @@ select {
   border-color: transparent;
 }
 
-.border-b-transparent {
-  border-bottom-color: transparent;
-}
-
-.border-l-raketa-primary {
-  --tw-border-opacity: 1;
-  border-left-color: rgba(var(--primary), var(--tw-border-opacity));
-}
-
-.border-t-transparent {
-  border-top-color: transparent;
+.bg-\[\#F7F7FC\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 252 / var(--tw-bg-opacity));
 }
 
 .bg-black {
@@ -2713,6 +2697,11 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2850,10 +2839,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
 .opacity-10 {
   opacity: 0.1;
 }
@@ -3707,18 +3692,32 @@ body {
   opacity: 1;
 }
 
+.group\/item:hover .group-hover\/item\:block {
+  display: block;
+}
+
 .group:hover .group-hover\:block {
   display: block;
 }
 
-.group\/item:hover .group-hover\/item\:opacity-100 {
-  opacity: 1;
+.group\/item:hover .group-hover\/item\:bg-raketa-primary {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--primary), var(--tw-bg-opacity));
+}
+
+.group\/item:hover .group-hover\/item\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .group.expanded .group-\[\.expanded\]\:block {
   display: block;
 }
 
+.group.expanded .group-\[\.expanded\]\:hidden {
+  display: none;
+}
+
 .group.expanded .group-\[\.expanded\]\:w-60 {
   width: 15rem;
 }
@@ -3742,10 +3741,6 @@ body {
   opacity: 0.5;
 }
 
-.group\/item.is-active .group-\[\.is-active\]\/item\:opacity-100 {
-  opacity: 1;
-}
-
 @media (min-width: 768px) {
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "src/index.js",
   "files": [
     "src/",

package/src/views/layouts/application.ejs

@@ -55,7 +55,7 @@
 
   <div id="sidebar" class="flex h-[calc(100vh-56px)] overflow-y-auto relative group">
     <div class="flex w-16 group-[.expanded]:w-60 h-[calc(100vh-56px)] flex-col sticky left-0 top-0 transition-all duration-150 ease-in-out justify-between group/sidebar bg-raketa-primary/5 dark:bg-raketa-primary/15">
-      <button id="expand" type="button" class="absolute z-20 flex items-center justify-center rotate-180 transition-all ease-in-out duration-300 group-[.expanded]:rotate-0 rounded-full bottom-12 size-8 -right-4 bg-raketa-primary text-white">
+      <button id="expand" type="button" class="absolute z-20 flex items-center justify-center rotate-180 transition-all ease-in-out duration-300 group-[.expanded]:rotate-0 rounded-full bottom-20 size-8 -right-4 bg-raketa-primary text-white">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
           <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
         </svg>
@@ -65,7 +65,21 @@
         <% _context.layout.sidebar.forEach((menu, idx) => { %>
         <% if (menu.submenus) { %>
 
-        <div class="group/item">
+        <div class="relative group-[.expanded]:hidden group/item">
+          <div class="aspect-square w-full flex items-center justify-center group-hover/item:bg-raketa-primary">
+            <div class="size-6 opacity-100 group-[.expanded]:opacity-50 text-raketa-primary group-hover/item:text-white">
+              <%- atob(menu.icon) %>
+            </div>
+          </div>
+
+          <div class="absolute z-50 top-0 left-[64px] w-[250px] border-l bg-[#F7F7FC] shadow-lg hidden group-hover/item:block">
+            <% menu.submenus.forEach(submenu => { %>
+            <a href="<%= `/${_context.locale}${submenu.link}` %>" class="block py-3 px-4 body-2 text-raketa-foreground/50 hover:text-raketa-foreground transition-all ease-in-out duration-300"><%= submenu.label %></a>
+            <% }) %>
+          </div>
+        </div>
+
+        <div class="hidden group-[.expanded]:block group/item">
           <details class="unstyled-details">
             <summary class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary cursor-pointer transition-all duration-300 ease-in-out">
               <div class="size-6 opacity-100 group-[.expanded]:opacity-50">
@@ -90,13 +104,12 @@
         <% } else { %>
 
         <div class="group/item">
-          <a href="<%= `/${_context.locale}${menu.link}` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+          <a href="<%= `/${_context.locale}${menu.link}` %>" title="<%= menu.label %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
             <div class="size-6 opacity-100 group-[.expanded]:opacity-50">
               <%- atob(menu.icon) %>
             </div>
 
             <span class="group-[.expanded]:block hidden"><%= menu.label %></span>
-            <div class="absolute group-hover/item:opacity-100 group-[.is-active]/item:opacity-100 opacity-0 top-0 z-10 -right-[10px] w-0 h-0 border-t-[28px] border-t-transparent border-b-[28px] border-b-transparent border-l-[10px] border-l-raketa-primary"></div>
           </a>
         </div>
 
@@ -287,4 +300,4 @@
   </script>
 </body>
 
-</html>
+</html>