feat(layout): Navigation update according to specs (#10411)

taiga-family · Feb 20, 2025 · 7ac5898 · 7ac5898
1 parent 6920680
commit 7ac5898
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 34 deletions.
diff --git a/projects/demo/src/modules/components/navigation/examples/1/index.html b/projects/demo/src/modules/components/navigation/examples/1/index.html
@@ -44,37 +44,58 @@
         <span tuiFade>A very very long product name</span>
         <tui-badge>Test</tui-badge>
     </span>
-    <button
-        appearance="secondary-grayscale"
-        tuiButton
-        tuiChevron
-        tuiDropdownOpen
-        type="button"
-        [tuiDropdown]="products"
-    >
-        <span tuiFade>A very very long project</span>
-        <ng-template #products>
-            <tui-data-list size="s">
-                <button
-                    tuiOption
-                    type="button"
-                >
-                    A very very long project
-                    <tui-icon
-                        icon="@tui.check"
-                        [style.font-size.em]="1"
-                        [style.margin-left.rem]="0.5"
-                    />
-                </button>
-                <button
-                    tuiOption
-                    type="button"
-                >
-                    Something else
-                </button>
-            </tui-data-list>
-        </ng-template>
-    </button>
+    <span tuiNavigationSegments>
+        <button
+            appearance="secondary-grayscale"
+            tuiButton
+            type="button"
+        >
+            Link 1
+        </button>
+        <button
+            appearance="secondary-grayscale"
+            tuiButton
+            type="button"
+        >
+            Link 2
+        </button>
+        <button
+            appearance="secondary-grayscale"
+            tuiButton
+            tuiChevron
+            tuiDropdownOpen
+            type="button"
+            [tuiDropdown]="products"
+        >
+            <span
+                [style.overflow]="'hidden'"
+                [style.text-overflow]="'ellipsis'"
+            >
+                A very very long project
+            </span>
+            <ng-template #products>
+                <tui-data-list size="s">
+                    <button
+                        tuiOption
+                        type="button"
+                    >
+                        A very very long project
+                        <tui-icon
+                            icon="@tui.check"
+                            [style.font-size.em]="1"
+                            [style.margin-left.rem]="0.5"
+                        />
+                    </button>
+                    <button
+                        tuiOption
+                        type="button"
+                    >
+                        Something else
+                    </button>
+                </tui-data-list>
+            </ng-template>
+        </button>
+    </span>
     <hr />
     <button
         appearance="secondary-grayscale"

diff --git a/projects/layout/components/navigation/header.style.less b/projects/layout/components/navigation/header.style.less
@@ -33,25 +33,40 @@ header[tuiNavigationHeader][tuiNavigationHeader] {
 
     [tuiNavigationLogo] {
         padding: 0 0.5rem;
-        margin-inline-start: 0.25rem;
+        margin: 0 1rem;
 
         tui-icon {
             font-size: 1rem;
         }
     }
 
+    [tuiNavigationSegments] {
+        display: flex;
+        gap: 0.5rem;
+        min-inline-size: 12rem;
+
+        > *:not(:last-child) {
+            flex: 1 0 auto;
+        }
+
+        > *:last-child {
+            min-inline-size: 3rem;
+            flex: 1 1 auto;
+        }
+    }
+
     [tuiButton],
     [tuiBadge],
     [tuiChip],
     tui-badge,
     tui-chip {
-        max-inline-size: 8rem;
+        max-inline-size: 12.5rem;
     }
 
     hr {
         flex: 1;
         block-size: calc(100% + 1rem);
-        min-inline-size: 2rem;
+        min-inline-size: 4rem;
         margin: -0.5rem 0;
         border: none;
         flex-shrink: 0;