@flusys/ng-layout 4.0.2 → 4.1.1

package/assets/layout/_footer.scss

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem 0 1rem 0;
+    padding: 1rem 0;
     gap: 0.5rem;
     border-top: 1px solid var(--surface-border);
 
@@ -13,3 +13,13 @@
       object-fit: contain;
     }
 }
+
+@media (max-width: 639px) {
+  .layout-footer {
+    padding: 0.75rem 0;
+
+    .logo-image {
+      height: 1.5rem;
+    }
+  }
+}

package/assets/layout/_topbar.scss

@@ -190,3 +190,27 @@
     }
   }
 }
+
+@media (max-width: 639px) {
+  .layout-topbar {
+    padding: 0 0.75rem;
+    gap: 0.5rem;
+
+    .layout-topbar-actions {
+      gap: 0.25rem;
+    }
+
+    .layout-config-menu {
+      gap: 0.25rem;
+    }
+
+    .layout-topbar-action {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
+
+    .layout-topbar-menu {
+      right: 0.75rem;
+    }
+  }
+}

package/assets/layout/_topbar_nav.scss

@@ -66,10 +66,6 @@ $submenu-icon-margin: 0.5rem;
     flex: 1;
   }
 
-  &:hover {
-    background-color: var(--surface-hover);
-  }
-
   &.active-route {
     background-color: var(--p-primary-color);
     color: var(--p-primary-contrast-color);
@@ -332,9 +328,8 @@ $submenu-icon-margin: 0.5rem;
           }
         }
 
-        // Show Level 1 submenu on hover or active state
+        // Show Level 1 submenu on hover only (not active state - prevents submenu staying open)
         &:hover > ul,
-        &.active-menuitem > ul,
         > ul:hover {
           @include show-submenu;
         }

package/fesm2022/flusys-ng-layout.mjs

@@ -405,14 +405,16 @@ class AppFooter {
     @if (displayLogo) {
       <img [src]="displayLogo" [alt]="appName" class="logo-image" />
     }
-    {{ appName }} {{ 'layout.footer.by' | translate }}
-    <a
-      [href]="authorUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="text-primary font-bold hover:underline"
-      >{{ authorName }}</a
-    >
+    <span class="hidden sm:inline">
+      {{ appName }} {{ 'layout.footer.by' | translate }}
+      <a
+        [href]="authorUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary font-bold hover:underline"
+        >{{ authorName }}</a
+      >
+    </span>
   </div>`, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, decorators: [{
@@ -424,14 +426,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     @if (displayLogo) {
       <img [src]="displayLogo" [alt]="appName" class="logo-image" />
     }
-    {{ appName }} {{ 'layout.footer.by' | translate }}
-    <a
-      [href]="authorUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="text-primary font-bold hover:underline"
-      >{{ authorName }}</a
-    >
+    <span class="hidden sm:inline">
+      {{ appName }} {{ 'layout.footer.by' | translate }}
+      <a
+        [href]="authorUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary font-bold hover:underline"
+        >{{ authorName }}</a
+      >
+    </span>
   </div>`,
                 }]
         }] });
@@ -1135,7 +1139,7 @@ class AppMenuitem {
     }
     updateSubmenuPosition() {
         const linkEl = this.parentLink()?.nativeElement;
-        if (!linkEl)
+        if (!linkEl || typeof linkEl.getBoundingClientRect !== 'function')
             return;
         const rect = linkEl.getBoundingClientRect();
         const hostEl = linkEl.closest('[app-menuitem]');
@@ -1183,7 +1187,6 @@ class AppMenuitem {
           #parentLink
           tabindex="0"
           pRipple
-          [style.cursor]="layoutService.isTopbar() ? 'default' : 'pointer'"
         >
           @if (item().icon) {
             <lib-icon
@@ -1259,7 +1262,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           #parentLink
           tabindex="0"
           pRipple
-          [style.cursor]="layoutService.isTopbar() ? 'default' : 'pointer'"
         >
           @if (item().icon) {
             <lib-icon
@@ -2454,7 +2456,7 @@ class AppTopbar {
         @if (displayLogo()) {
           <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
         }
-        <span>{{ companyName() }}</span>
+        <span class="hidden sm:inline">{{ companyName() }}</span>
       </a>
       @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
         <button
@@ -2582,7 +2584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         @if (displayLogo()) {
           <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
         }
-        <span>{{ companyName() }}</span>
+        <span class="hidden sm:inline">{{ companyName() }}</span>
       </a>
       @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
         <button