fix(layout): Navigation fix various style issues (#9723)

taiga-family · Nov 11, 2024 · a8aaf04 · a8aaf04
1 parent 892b3c3
commit a8aaf04
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/projects/demo/src/modules/components/navigation/index.less b/projects/demo/src/modules/components/navigation/index.less
@@ -1,4 +1,8 @@
-.sticky-example::ng-deep .t-demo {
+:host ::ng-deep header[tuiNavigationHeader][tuiNavigationHeader] {
+    inline-size: 100%;
+}
+
+.sticky-example ::ng-deep .t-demo {
     block-size: 30rem;
     transform: translate3d(0, 0, 0);
     padding: 0 !important;

diff --git a/projects/layout/components/navigation/aside.style.less b/projects/layout/components/navigation/aside.style.less
@@ -5,6 +5,7 @@ aside[tuiNavigationAside] {
 
     position: sticky;
     top: 3rem;
+    left: 0;
     z-index: 1;
     display: flex;
     inline-size: 3rem;
@@ -27,6 +28,17 @@ aside[tuiNavigationAside] {
         box-shadow: -1.5rem 0 var(--tui-theme-color, #000);
     }
 
+    &::after {
+        content: '';
+        position: fixed;
+        top: inherit;
+        left: 0;
+        bottom: -3rem;
+        z-index: -1;
+        inline-size: 3rem;
+        background: inherit;
+    }
+
     &._expanded {
         inline-size: 13.75rem;
 

diff --git a/projects/layout/components/navigation/header.style.less b/projects/layout/components/navigation/header.style.less
@@ -3,10 +3,11 @@
 header[tuiNavigationHeader][tuiNavigationHeader] {
     position: sticky;
     top: 0;
-    z-index: 1;
+    left: 0;
+    z-index: 2;
     display: flex;
     block-size: 3rem;
-    inline-size: 100%;
+    inline-size: 100vw;
     align-items: center;
     gap: 0.25rem;
     padding: 0.5rem;
@@ -16,7 +17,7 @@ header[tuiNavigationHeader][tuiNavigationHeader] {
     background: var(--tui-theme-color, #000);
     color: var(--tui-text-primary);
 
-    &::after {
+    &::before {
         content: '';
         position: absolute;
         top: 100%;
@@ -29,7 +30,7 @@ header[tuiNavigationHeader][tuiNavigationHeader] {
         border-radius: 1.25rem 1.25rem 0 0;
     }
 
-    &::before {
+    &::after {
         content: '';
         position: fixed;
         top: inherit;

diff --git a/projects/layout/components/navigation/main.style.less b/projects/layout/components/navigation/main.style.less
@@ -8,10 +8,16 @@ main[tuiNavigationMain] {
     gap: 0 1rem;
     justify-content: center;
     flex: 1;
-    padding: 0 1.5rem;
+    border: 1.5rem solid transparent;
+    border-top: 0;
     isolation: isolate;
     box-sizing: border-box;
 
+    > nav[tuiNavigationNav]:not(:first-child) {
+        border-image: conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 100vw;
+        box-shadow: inset 0 -1px var(--tui-border-normal);
+    }
+
     > [tuiHeader] {
         margin: 1rem 0 0.5rem;
 
@@ -27,6 +33,7 @@ main[tuiNavigationMain] {
         &:not([tuiCardLarge]) {
             [tuiTitle] {
                 max-inline-size: 42rem;
+                margin-inline-end: auto;
                 white-space: nowrap;
                 gap: 0.375rem;
                 overflow: hidden;