fix: page header breadcrum nav

restorecommerce · Sep 18, 2024 · 5491696 · 5491696
1 parent b44a276
commit 5491696
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 44 deletions.
diff --git a/packages/modules/ui/src/lib/components/organisms/page-header/page-header.component.ts b/packages/modules/ui/src/lib/components/organisms/page-header/page-header.component.ts
@@ -24,43 +24,45 @@ import { IBreadcrumb } from '@console-core/types';
       "
     >
       <nav class="breadcrumb-nav">
-        <div class="row">
-          <div class="flex pt-2">
-            <ol>
-              <li>
+        <ol>
+          <li>
+            <a
+              [routerLink]="['/']"
+              class="breadcrumb-nav-item-label"
+              >Home</a
+            >
+            <vcl-icon
+              class="breadcrumb-nav-divider"
+              icon="vcl:arrow-right"
+            />
+          </li>
+          <ng-container
+            *ngFor="
+              let breadcrumb of breadcrumbs;
+              let last = last;
+              trackBy: trackByFn
+            "
+          >
+            <li [ngClass]="{ selected: last }">
+              <ng-container *ngIf="!last">
                 <a
-                  [routerLink]="['/']"
+                  [routerLink]="breadcrumb.url"
                   class="breadcrumb-nav-item-label"
-                  >Home</a
+                  >{{ breadcrumb.label }}</a
                 >
-                <vcl-icon icon="vcl:arrow-right" />
-              </li>
-              <ng-container
-                *ngFor="
-                  let breadcrumb of breadcrumbs;
-                  let last = last;
-                  trackBy: trackByFn
-                "
-              >
-                <li [ngClass]="{ selected: last }">
-                  <ng-container *ngIf="!last">
-                    <a
-                      [routerLink]="breadcrumb.url"
-                      class="breadcrumb-nav-item-label"
-                      >{{ breadcrumb.label }}</a
-                    >
-                    <vcl-icon icon="vcl:arrow-right" />
-                  </ng-container>
-                  <ng-container *ngIf="last">
-                    <div class="breadcrumb-nav-item-label">
-                      {{ breadcrumb.label }}
-                    </div>
-                  </ng-container>
-                </li>
+                <vcl-icon
+                  class="breadcrumb-nav-divider"
+                  icon="vcl:arrow-right"
+                />
               </ng-container>
-            </ol>
-          </div>
-        </div>
+              <ng-container *ngIf="last">
+                <span class="breadcrumb-nav-item-label">
+                  {{ breadcrumb.label }}
+                </span>
+              </ng-container>
+            </li>
+          </ng-container>
+        </ol>
       </nav>
     </ng-container>
   `,

diff --git a/packages/modules/ui/src/lib/components/templates/private/private-template.component.html b/packages/modules/ui/src/lib/components/templates/private/private-template.component.html
@@ -1,7 +1,7 @@
 <rc-app>
   <rc-header>
     <rc-toggle-drawer *ngIf="menuClosed$ | async" />
-
+    <rc-page-header />
     <div class="flex"></div>
     <rc-header-toolbar />
   </rc-header>
@@ -230,11 +230,11 @@
   </rc-drawer-navigation>
 
   <div class="container">
-    <div class="row grid-gutterx-2">
+    <!-- <div class="row grid-gutterx-2">
       <div class="flex">
         <rc-page-header />
       </div>
-    </div>
+    </div> -->
 
     <ng-content />
   </div>

diff --git a/packages/modules/ui/src/lib/styles/breadcrum.scss b/packages/modules/ui/src/lib/styles/breadcrum.scss
@@ -0,0 +1,9 @@
+.breadcrumb-nav {
+  ol {
+    margin: 0;
+
+    li {
+      font-weight: normal;
+    }
+  }
+}
diff --git a/packages/modules/ui/src/lib/styles/index.scss b/packages/modules/ui/src/lib/styles/index.scss
@@ -1,6 +1,7 @@
 @use './console.scss';
 @use './app.scss';
 @use './badge.scss';
+@use './breadcrum.scss';
 @use './drawer.scss';
 @use './forms.scss';
 @use './orders.scss';

diff --git a/packages/modules/ui/src/lib/styles/page.scss b/packages/modules/ui/src/lib/styles/page.scss
@@ -1,11 +1,3 @@
-.breadcrumb-nav {
-  ol {
-    li {
-      font-weight: normal;
-    }
-  }
-}
-
 h2.title {
   margin: 0 0 4px;
 }