Skip to content

Commit e7cf3dc

Browse files
BanegasnBanegasn
committed
fixed
1 parent 97101cd commit e7cf3dc

File tree

8 files changed

+551
-509
lines changed

8 files changed

+551
-509
lines changed

‎apps/angular-app/src/app/app.component.html‎

Lines changed: 73 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,30 @@
33
<m3-navigation-rail class="desktop-nav" (menu-toggle)="onRailToggle($event)">
44
<m3-navigation-rail-toggle></m3-navigation-rail-toggle>
55

6-
<m3-navigation-rail-item label="Home"
7-
[active]="currentRoute() === '/home'"
8-
seoLink="home">
9-
<span slot="icon" class="material-symbols-outlined">home</span>
10-
</m3-navigation-rail-item>
6+
<app-seo-link href="home">
7+
<m3-navigation-rail-item label="Home"
8+
[active]="currentRoute() === '/home'">
9+
<span slot="icon" class="material-symbols-outlined">home</span>
10+
</m3-navigation-rail-item>
11+
</app-seo-link>
1112

12-
<m3-navigation-rail-item label="Quick Start"
13-
[active]="currentRoute() === '/quick-start'"
14-
seoLink="quick-start">
15-
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
16-
</m3-navigation-rail-item>
13+
<app-seo-link href="quick-start">
14+
<m3-navigation-rail-item label="Quick Start"
15+
[active]="currentRoute() === '/quick-start'">
16+
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
17+
</m3-navigation-rail-item>
18+
</app-seo-link>
1719

1820
<div class="desktop-components-trigger"
1921
(mouseenter)="onDesktopComponentsMouseEnter()"
2022
(mouseleave)="onDesktopComponentsMouseLeave()"
2123
(menu-item-select)="onComponentsMenuItemSelect($event)">
22-
<m3-navigation-rail-item label="Components"
23-
[active]="isComponentsRoute()"
24-
seoLink="components">
25-
<span slot="icon" class="material-symbols-outlined">browse</span>
26-
</m3-navigation-rail-item>
24+
<app-seo-link href="components">
25+
<m3-navigation-rail-item label="Components"
26+
[active]="isComponentsRoute()">
27+
<span slot="icon" class="material-symbols-outlined">browse</span>
28+
</m3-navigation-rail-item>
29+
</app-seo-link>
2730

2831
<m3-menu
2932
placement="right-start"
@@ -32,22 +35,24 @@
3235
(mouseenter)="onDesktopComponentsMouseEnter()"
3336
(mouseleave)="onDesktopComponentsMouseLeave()"
3437
(menu-dismiss)="onComponentsMenuDismiss($event)"
35-
style="--md-menu-max-height: calc(100vh - 200px);"
36-
>
38+
style="--md-menu-max-height: calc(100vh - 200px);">
3739
@for (item of componentMenuItems; track item.path) {
38-
<m3-menu-item [value]="item.path" [seoLink]="item.path.substring(1)">
39-
<span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
40-
{{ item.label }}
41-
</m3-menu-item>
40+
<app-seo-link [href]="item.path.substring(1)">
41+
<m3-menu-item [value]="item.path">
42+
<span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
43+
{{ item.label }}
44+
</m3-menu-item>
45+
</app-seo-link>
4246
}
4347
</m3-menu>
4448
</div>
4549

46-
<m3-navigation-rail-item label="Contact"
47-
[active]="currentRoute() === '/contact'"
48-
seoLink="contact">
49-
<span slot="icon" class="material-symbols-outlined">person</span>
50-
</m3-navigation-rail-item>
50+
<app-seo-link href="contact">
51+
<m3-navigation-rail-item label="Contact"
52+
[active]="currentRoute() === '/contact'">
53+
<span slot="icon" class="material-symbols-outlined">person</span>
54+
</m3-navigation-rail-item>
55+
</app-seo-link>
5156

5257
<m3-navigation-rail-item label="Theme" slot="bottom" (item-click)="toggleTheme()">
5358
@if(currentTheme !== 'dark') {
@@ -63,7 +68,8 @@
6368

6469
<m3-navigation-rail-item label="GitHub" slot="bottom" (item-click)="openGitHub()">
6570
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
66-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
71+
<path
72+
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
6773
</svg>
6874
</m3-navigation-rail-item>
6975
</m3-navigation-rail>
@@ -83,50 +89,55 @@
8389
[offset]="12"
8490
[open]="componentsMenuOpen()"
8591
(menu-dismiss)="onComponentsMenuDismiss($event)"
86-
style="--md-menu-max-height: calc(100dvh - 120px);"
87-
>
92+
style="--md-menu-max-height: calc(100dvh - 120px);">
8893
@for (item of componentMenuItems; track item.path) {
89-
<m3-menu-item [value]="item.path" [seoLink]="item.path.substring(1)">
90-
<span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
91-
{{ item.label }}
92-
</m3-menu-item>
94+
<app-seo-link [href]="item.path.substring(1)">
95+
<m3-menu-item [value]="item.path">
96+
<span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
97+
{{ item.label }}
98+
</m3-menu-item>
99+
</app-seo-link>
93100
}
94101
</m3-menu>
95102
</div>
96103

97104
<m3-navigation-bar class="mobile-nav" auto-layout>
98-
<m3-navigation-bar-item
99-
label="Home"
100-
[active]="currentRoute() === '/home'"
101-
seoLink="home">
102-
<span slot="icon" class="material-symbols-outlined">home</span>
103-
</m3-navigation-bar-item>
105+
<app-seo-link href="home">
106+
<m3-navigation-bar-item
107+
label="Home"
108+
[active]="currentRoute() === '/home'">
109+
<span slot="icon" class="material-symbols-outlined">home</span>
110+
</m3-navigation-bar-item>
111+
</app-seo-link>
104112

105-
<m3-navigation-bar-item
106-
label="Quick Start"
107-
[active]="currentRoute() === '/quick-start'"
108-
seoLink="quick-start">
109-
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
110-
</m3-navigation-bar-item>
113+
<app-seo-link href="quick-start">
114+
<m3-navigation-bar-item
115+
label="Quick Start"
116+
[active]="currentRoute() === '/quick-start'">
117+
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
118+
</m3-navigation-bar-item>
119+
</app-seo-link>
111120

112-
<m3-navigation-bar-item
113-
id="mobile-components-trigger"
114-
label="Components"
115-
[active]="isComponentsRoute()"
116-
seoLink="components"
117-
(pointerdown)="onMobileComponentsPointerDown($event)"
118-
(pointerup)="onMobileComponentsPointerUp($event)"
119-
(pointercancel)="onMobileComponentsPointerCancel($event)"
120-
(contextmenu)="onMobileComponentsContextMenu($event)">
121-
<span slot="icon" class="material-symbols-outlined">browse</span>
122-
</m3-navigation-bar-item>
121+
<app-seo-link href="components">
122+
<m3-navigation-bar-item
123+
id="mobile-components-trigger"
124+
label="Components"
125+
[active]="isComponentsRoute()"
126+
(pointerdown)="onMobileComponentsPointerDown($event)"
127+
(pointerup)="onMobileComponentsPointerUp($event)"
128+
(pointercancel)="onMobileComponentsPointerCancel($event)"
129+
(contextmenu)="onMobileComponentsContextMenu($event)">
130+
<span slot="icon" class="material-symbols-outlined">browse</span>
131+
</m3-navigation-bar-item>
132+
</app-seo-link>
123133

124-
<m3-navigation-bar-item
125-
label="Contact"
126-
[active]="currentRoute() === '/contact'"
127-
seoLink="contact">
128-
<span slot="icon" class="material-symbols-outlined">person</span>
129-
</m3-navigation-bar-item>
134+
<app-seo-link href="contact">
135+
<m3-navigation-bar-item
136+
label="Contact"
137+
[active]="currentRoute() === '/contact'">
138+
<span slot="icon" class="material-symbols-outlined">person</span>
139+
</m3-navigation-bar-item>
140+
</app-seo-link>
130141

131142
<m3-navigation-bar-item label="Settings"
132143
(item-click)="openSettings()">

‎apps/angular-app/src/app/app.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import '@banegasn/m3-menu';
1212
import { DialogService } from './services/dialog.service';
1313
import { SettingsComponent } from './components/settings/settings.component';
1414

15-
import { SeoLinkDirective } from './directives/seo-link.directive';
15+
import { SeoLinkComponent } from './components/seo-link/seo-link.component';
1616

1717
@Component({
1818
selector: 'app-root',
19-
imports: [RouterOutlet, SeoLinkDirective],
19+
imports: [RouterOutlet, SeoLinkComponent],
2020
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2121
templateUrl: './app.component.html',
2222
styleUrls: ['./app.component.css']

‎apps/angular-app/src/app/components/seo-link/seo-link.component.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Component, Input, HostListener, inject } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
4+
@Component({
5+
selector: 'app-seo-link',
6+
standalone: true,
7+
template: `
8+
<a [href]="processedHref" [target]="target || '_self'" (click)="onClick($event)">
9+
<ng-content></ng-content>
10+
</a>
11+
`,
12+
styles: [`
13+
:host {
14+
display: contents;
15+
}
16+
a {
17+
display: contents;
18+
text-decoration: none;
19+
color: inherit;
20+
}
21+
`]
22+
})
23+
export class SeoLinkComponent {
24+
@Input() href!: string;
25+
@Input() target?: string;
26+
27+
private router = inject(Router);
28+
29+
get processedHref() {
30+
if (!this.href) return '';
31+
return this.href.startsWith('/') ? this.href.substring(1) : this.href;
32+
}
33+
34+
onClick(event: Event) {
35+
if (!this.target || this.target === '_self') {
36+
event.preventDefault();
37+
event.stopPropagation();
38+
const navigatePath = this.href.startsWith('/') ? this.href : '/' + this.href;
39+
this.router.navigateByUrl(navigatePath);
40+
}
41+
}
42+
}

‎apps/angular-app/src/app/directives/seo-link.directive.ts‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)