From a8aaf046472413fd4b9893d23aa76fc70d2c48bc Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 11 Nov 2024 15:24:33 +0800
Subject: [PATCH] fix(layout): `Navigation` fix various style issues (#9723)

---
 .../src/modules/components/navigation/index.less     |  6 +++++-
 .../layout/components/navigation/aside.style.less    | 12 ++++++++++++
 .../layout/components/navigation/header.style.less   |  9 +++++----
 .../layout/components/navigation/main.style.less     |  9 ++++++++-
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/projects/demo/src/modules/components/navigation/index.less b/projects/demo/src/modules/components/navigation/index.less
index 01f8870b2b50..35c488545ee6 100644
--- 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
index 537675e22401..ff5f06b0e9a7 100644
--- 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
index 29118ee58466..982220d8a29c 100644
--- 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
index a8bcd17af308..8902ef048f1b 100644
--- 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;