Merge pull request #1364 from second1996/front-ui

fix: Top bar menu
moonshine-software · Dec 11, 2024 · ca82821 · ca82821
2 parents 48db4aa + d35f4dc
commit ca82821
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/src/Laravel/src/Layouts/BaseLayout.php b/src/Laravel/src/Layouts/BaseLayout.php
@@ -108,6 +108,8 @@ protected function getTopBarComponent(): Topbar
                     Burger::make(),
                 ])->class('menu-burger'),
             ])->class('menu-actions'),
+        ])->customAttributes([
+            ':class' => "asideMenuOpen && '_is-opened'",
         ]);
     }
 

diff --git a/src/UI/dist/assets/main.css b/src/UI/dist/assets/main.css
diff --git a/src/UI/dist/assets/minimalistic.css b/src/UI/dist/assets/minimalistic.css
diff --git a/src/UI/resources/css/base/layout.css b/src/UI/resources/css/base/layout.css
@@ -1,7 +1,7 @@
 /* Theme layout */
 .layout {
   &-wrapper {
-    @apply relative flex min-h-screen flex-col gap-y-5 p-3 transition-all md:p-5 lg:flex-row lg:p-6;
+    @apply relative flex min-h-screen flex-col gap-y-5 py-3 transition-all md:p-5 lg:flex-row lg:p-6;
 
     /* MOBILEBAR */
     /* selector :has not supported */

diff --git a/src/UI/resources/css/components/menu.css b/src/UI/resources/css/components/menu.css
@@ -232,7 +232,7 @@
 
 /* Aside horizontal navigation */
 .layout-menu-horizontal {
-  @apply sticky inset-x-0 top-0 z-[100] flex h-[4.5rem] items-center gap-x-5 overflow-x-auto bg-body/80 px-6 transition-colors md:px-10 lg:h-24;
+  @apply sticky inset-x-0 top-0 z-[100] flex h-[4.5rem] items-center gap-x-5 overflow-x-auto overflow-y-hidden bg-body/80 px-6 transition-colors md:px-10 lg:h-24 lg:overflow-y-auto;
 
   .menu-inner-item-char {
     @apply hidden;
@@ -242,8 +242,10 @@
   &._is-opened {
     @apply bg-body;
 
-    .menu-navigation {
-      @apply pointer-events-auto visible translate-y-0 opacity-100;
+    @media (max-width: 1023px) {
+      .menu-navigation {
+        @apply pointer-events-auto visible fixed translate-y-0 opacity-100;
+      }
     }
   }
 
@@ -371,6 +373,10 @@
       .menu-inner-divider {
         @apply mx-1;
       }
+
+      .profile-info {
+        @apply hidden sm:block;
+      }
     }
 
     /* Settings button */
@@ -387,8 +393,9 @@
   @media (max-width: 1023.98px) {
     .menu {
       &-navigation {
-        @apply pointer-events-none invisible absolute inset-x-0 top-[4.5rem] -translate-y-2 overflow-x-auto bg-body px-3 pb-8 opacity-0 transition-all md:px-7;
-        height: calc(100vh - 4.5rem);
+        --top-space: 4.5rem;
+        @apply pointer-events-none invisible absolute inset-x-0 top-[--top-space] -translate-y-2 overflow-x-auto bg-body px-3 pb-8 opacity-0 transition-all md:px-7;
+        height: calc(100vh - var(--top-space));
       }
 
       &-inner {

diff --git a/src/UI/resources/css/minimalistic.css b/src/UI/resources/css/minimalistic.css
@@ -239,6 +239,15 @@ body.theme-minimalistic {
         }
       }
     }
+
+    @media (max-width: 1023.98px) {
+      .menu {
+        &-navigation {
+          --top-space: 4rem;
+          @apply pt-4;
+        }
+      }
+    }
   }
 
   /* Mobile menu */