fix(layout): Navigation fix drawer positioning (#9594)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 24, 2024 · d0560c8 · d0560c8
1 parent 6b6863e
commit d0560c8
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 10 deletions.
diff --git a/projects/demo/src/modules/components/navigation/index.less b/projects/demo/src/modules/components/navigation/index.less
@@ -1,5 +1,6 @@
 .sticky-example::ng-deep .t-demo {
     block-size: 30rem;
+    transform: translate3d(0, 0, 0);
     padding: 0 !important;
 
     .custom-portal {

diff --git a/projects/demo/src/styles/styles.less b/projects/demo/src/styles/styles.less
@@ -19,3 +19,7 @@ body {
         scroll-behavior: auto;
     }
 }
+
+html {
+    font-size: 1em;
+}
diff --git a/projects/layout/components/navigation/drawer.component.ts b/projects/layout/components/navigation/drawer.component.ts
@@ -7,6 +7,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';
+import {tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiSlideInLeft} from '@taiga-ui/core/animations';
 import {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';
 import {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';
@@ -43,13 +44,18 @@ import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
     host: {
         tuiTheme: 'dark',
         '[@tuiSlideInLeft]': 'animation',
-        '[style.top.px]':
-            'directive.el.offsetParent?.offsetTop + directive.el.offsetParent?.offsetHeight',
+        '[style.top.px]': 'top',
     },
 })
 class TuiDrawerComponent {
     protected readonly directive = inject(TuiDropdownDirective);
     protected readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+    protected readonly top =
+        tuiIsHTMLElement(this.directive.el.offsetParent) &&
+        tuiIsHTMLElement(this.directive.el.offsetParent.offsetParent)
+            ? this.directive.el.offsetParent.getBoundingClientRect().bottom -
+              this.directive.el.offsetParent.offsetParent.getBoundingClientRect().top
+            : 0;
 }
 
 @Component({

diff --git a/projects/layout/components/navigation/drawer.style.less b/projects/layout/components/navigation/drawer.style.less
@@ -2,8 +2,9 @@
     position: fixed;
     left: 0;
     right: 0;
+    bottom: 0;
     background: var(--tui-theme-color, #000);
-    inline-size: 15rem;
+    inline-size: 13.75rem;
     color: var(--tui-text-primary);
     pointer-events: auto;
 

diff --git a/projects/layout/components/navigation/header.style.less b/projects/layout/components/navigation/header.style.less
@@ -16,26 +16,28 @@ header[tuiNavigationHeader][tuiNavigationHeader] {
     background: var(--tui-theme-color, #000);
     color: var(--tui-text-primary);
 
-    &::before,
     &::after {
         content: '';
         position: absolute;
         top: 100%;
+        left: 0;
+        right: 0;
         z-index: -1;
         block-size: 3rem;
-        inline-size: 3rem;
         pointer-events: none;
         box-shadow: 0 -1.5rem var(--tui-theme-color, #000);
+        border-radius: 1.25rem 1.25rem 0 0;
     }
 
     &::before {
+        content: '';
+        position: fixed;
+        top: inherit;
         left: 0;
-        border-start-start-radius: 1.25rem;
-    }
-
-    &::after {
         right: 0;
-        border-start-end-radius: 1.25rem;
+        z-index: -1;
+        block-size: inherit;
+        background: inherit;
     }
 
     [tuiNavigationLogo] {