|
79 | 79 | <!-- Home / Angular logo --> |
80 | 80 | <li |
81 | 81 | class="adev-nav-item adev-nav-item--logo" |
82 | | - [class.adev-nav-item--active]="activeRouteItem() === HOME_ROUTE" |
| 82 | + [class.adev-nav-item--active]="activeRouteItem() === PAGE_PREFIX.HOME" |
83 | 83 | > |
84 | 84 | <a aria-label="Angular homepage" routerLink="/"> |
85 | 85 | <!-- Logo Symbol --> |
86 | | - @if(!isUwu) { |
87 | | - <svg class="angular-logo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32"> |
88 | | - <g clip-path="url(#a)"> |
89 | | - <path |
90 | | - fill="url(#b)" |
91 | | - d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" |
92 | | - /> |
93 | | - <path |
94 | | - fill="url(#c)" |
95 | | - d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" |
96 | | - /> |
97 | | - </g> |
98 | | - <defs> |
99 | | - <linearGradient |
100 | | - id="b" |
101 | | - x1="49.009" |
102 | | - x2="225.829" |
103 | | - y1="213.75" |
104 | | - y2="129.722" |
105 | | - gradientUnits="userSpaceOnUse" |
106 | | - > |
107 | | - <stop stop-color="#E40035" /> |
108 | | - <stop offset=".24" stop-color="#F60A48" /> |
109 | | - <stop offset=".352" stop-color="#F20755" /> |
110 | | - <stop offset=".494" stop-color="#DC087D" /> |
111 | | - <stop offset=".745" stop-color="#9717E7" /> |
112 | | - <stop offset="1" stop-color="#6C00F5" /> |
113 | | - </linearGradient> |
114 | | - <linearGradient |
115 | | - id="c" |
116 | | - x1="41.025" |
117 | | - x2="156.741" |
118 | | - y1="28.344" |
119 | | - y2="160.344" |
120 | | - gradientUnits="userSpaceOnUse" |
121 | | - > |
122 | | - <stop stop-color="#FF31D9" /> |
123 | | - <stop offset="1" stop-color="#FF5BE1" stop-opacity="0" /> |
124 | | - </linearGradient> |
125 | | - <clipPath id="a"> |
126 | | - <path fill="#fff" d="M0 0h223v236H0z" /> |
127 | | - </clipPath> |
128 | | - </defs> |
129 | | - </svg> |
130 | | - } @else { |
131 | | - <img |
132 | | - src="assets/images/uwu.png" |
133 | | - style="width: auto; margin: 0" |
134 | | - class="uwu-logo" |
135 | | - alt="Angular logo" |
136 | | - height="34"/> |
137 | | - } |
| 86 | + @if (!isUwu) { |
| 87 | + <svg |
| 88 | + class="angular-logo" |
| 89 | + xmlns="http://www.w3.org/2000/svg" |
| 90 | + fill="none" |
| 91 | + viewBox="0 0 223 236" |
| 92 | + width="32" |
| 93 | + > |
| 94 | + <g clip-path="url(#a)"> |
| 95 | + <path |
| 96 | + fill="url(#b)" |
| 97 | + d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" |
| 98 | + /> |
| 99 | + <path |
| 100 | + fill="url(#c)" |
| 101 | + d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" |
| 102 | + /> |
| 103 | + </g> |
| 104 | + <defs> |
| 105 | + <linearGradient |
| 106 | + id="b" |
| 107 | + x1="49.009" |
| 108 | + x2="225.829" |
| 109 | + y1="213.75" |
| 110 | + y2="129.722" |
| 111 | + gradientUnits="userSpaceOnUse" |
| 112 | + > |
| 113 | + <stop stop-color="#E40035" /> |
| 114 | + <stop offset=".24" stop-color="#F60A48" /> |
| 115 | + <stop offset=".352" stop-color="#F20755" /> |
| 116 | + <stop offset=".494" stop-color="#DC087D" /> |
| 117 | + <stop offset=".745" stop-color="#9717E7" /> |
| 118 | + <stop offset="1" stop-color="#6C00F5" /> |
| 119 | + </linearGradient> |
| 120 | + <linearGradient |
| 121 | + id="c" |
| 122 | + x1="41.025" |
| 123 | + x2="156.741" |
| 124 | + y1="28.344" |
| 125 | + y2="160.344" |
| 126 | + gradientUnits="userSpaceOnUse" |
| 127 | + > |
| 128 | + <stop stop-color="#FF31D9" /> |
| 129 | + <stop offset="1" stop-color="#FF5BE1" stop-opacity="0" /> |
| 130 | + </linearGradient> |
| 131 | + <clipPath id="a"> |
| 132 | + <path fill="#fff" d="M0 0h223v236H0z" /> |
| 133 | + </clipPath> |
| 134 | + </defs> |
| 135 | + </svg> |
| 136 | + } @else { |
| 137 | + <img |
| 138 | + src="assets/images/uwu.png" |
| 139 | + style="width: auto; margin: 0" |
| 140 | + class="uwu-logo" |
| 141 | + alt="Angular logo" |
| 142 | + height="34" |
| 143 | + /> |
| 144 | + } |
138 | 145 | </a> |
139 | 146 |
|
140 | 147 | <!-- Version picker for v18+ --> |
|
211 | 218 | </li> |
212 | 219 |
|
213 | 220 | <!-- Docs --> |
214 | | - <li class="adev-nav-item" [class.adev-nav-item--active]="activeRouteItem() === DOCS_ROUTE"> |
215 | | - <a [routerLink]="DOCS_ROUTE"> |
| 221 | + <li |
| 222 | + class="adev-nav-item" |
| 223 | + [class.adev-nav-item--active]="activeRouteItem() === PAGE_PREFIX.DOCS" |
| 224 | + > |
| 225 | + <a [routerLink]="PAGE_PREFIX.DOCS"> |
216 | 226 | <svg |
217 | 227 | aria-hidden="true" |
218 | 228 | xmlns="http://www.w3.org/2000/svg" |
|
231 | 241 | <!-- Tutorials --> |
232 | 242 | <li |
233 | 243 | class="adev-nav-item" |
234 | | - [class.adev-nav-item--active]="activeRouteItem() === TUTORIALS_ROUTE" |
| 244 | + [class.adev-nav-item--active]="activeRouteItem() === PAGE_PREFIX.TUTORIALS" |
235 | 245 | > |
236 | | - <a [routerLink]="TUTORIALS_ROUTE"> |
| 246 | + <a [routerLink]="PAGE_PREFIX.TUTORIALS"> |
237 | 247 | <svg |
238 | 248 | aria-hidden="true" |
239 | 249 | xmlns="http://www.w3.org/2000/svg" |
|
252 | 262 | <!-- Playground --> |
253 | 263 | <li |
254 | 264 | class="adev-nav-item" |
255 | | - [class.adev-nav-item--active]="activeRouteItem() === PLAYGROUND_ROUTE" |
| 265 | + [class.adev-nav-item--active]="activeRouteItem() === PAGE_PREFIX.PLAYGROUND" |
256 | 266 | > |
257 | | - <a [routerLink]="PLAYGROUND_ROUTE"> |
| 267 | + <a [routerLink]="PAGE_PREFIX.PLAYGROUND"> |
258 | 268 | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"> |
259 | 269 | <path |
260 | 270 | d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.46Z" |
|
267 | 277 | <!-- API Ref --> |
268 | 278 | <li |
269 | 279 | class="adev-nav-item" |
270 | | - [class.adev-nav-item--active]="activeRouteItem() === REFERENCE_ROUTE" |
| 280 | + [class.adev-nav-item--active]="activeRouteItem() === PAGE_PREFIX.REFERENCE" |
271 | 281 | > |
272 | | - <a [routerLink]="REFERENCE_ROUTE"> |
| 282 | + <a [routerLink]="PAGE_PREFIX.REFERENCE"> |
273 | 283 | <svg |
274 | 284 | aria-hidden="true" |
275 | 285 | xmlns="http://www.w3.org/2000/svg" |
|
363 | 373 | fill="none" |
364 | 374 | xmlns="http://www.w3.org/2000/svg" |
365 | 375 | > |
366 | | - <path |
367 | | - d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path> |
| 376 | + <path |
| 377 | + d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z" |
| 378 | + ></path> |
368 | 379 | </svg> |
369 | 380 | </a> |
370 | 381 | </li> |
|
385 | 396 | </a> |
386 | 397 | </li> |
387 | 398 | <li> |
388 | | - <a [href]="ngLinks.GITHUB" cdkMenuItem title="Angular Github" target="_blank" rel="noopener"> |
| 399 | + <a |
| 400 | + [href]="ngLinks.GITHUB" |
| 401 | + cdkMenuItem |
| 402 | + title="Angular Github" |
| 403 | + target="_blank" |
| 404 | + rel="noopener" |
| 405 | + > |
389 | 406 | <!-- Github Icon --> |
390 | 407 | <svg |
391 | 408 | width="20" |
|
403 | 420 | </a> |
404 | 421 | </li> |
405 | 422 | <li> |
406 | | - <a [href]="ngLinks.DISCORD" cdkMenuItem title="Angular Discord" target="_blank" rel="noopener"> |
| 423 | + <a |
| 424 | + [href]="ngLinks.DISCORD" |
| 425 | + cdkMenuItem |
| 426 | + title="Angular Discord" |
| 427 | + target="_blank" |
| 428 | + rel="noopener" |
| 429 | + > |
407 | 430 | <!-- Discord Icon --> |
408 | 431 | <svg |
409 | | - xmlns="http://www.w3.org/2000/svg" |
410 | | - viewBox="0 0 127.14 96.36" |
411 | | - width="20" |
412 | | - height="20" |
413 | | - fill="none" |
414 | | - > |
415 | | - <path |
416 | | - fill-rule="evenodd" |
417 | | - clip-rule="evenodd" |
418 | | - d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,110.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" |
419 | | - /> |
420 | | - </svg> |
| 432 | + xmlns="http://www.w3.org/2000/svg" |
| 433 | + viewBox="0 0 127.14 96.36" |
| 434 | + width="20" |
| 435 | + height="20" |
| 436 | + fill="none" |
| 437 | + > |
| 438 | + <path |
| 439 | + fill-rule="evenodd" |
| 440 | + clip-rule="evenodd" |
| 441 | + d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,110.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" |
| 442 | + /> |
| 443 | + </svg> |
421 | 444 | </a> |
422 | 445 | </li> |
423 | 446 | </ul> |
|
434 | 457 | (cdkMenuOpened)="openMenu('theme-picker')" |
435 | 458 | > |
436 | 459 | <docs-icon role="presentation"> |
437 | | - @switch (theme()) { @case ('light') { |
438 | | - {{ 'light_mode' }} |
439 | | - } @case ('dark') { |
440 | | - {{ 'dark_mode' }} |
441 | | - } @case ('auto') { |
442 | | - {{ 'routine' }} |
443 | | - } } |
| 460 | + @switch (theme()) { |
| 461 | + @case ('light') { |
| 462 | + {{ 'light_mode' }} |
| 463 | + } |
| 464 | + @case ('dark') { |
| 465 | + {{ 'dark_mode' }} |
| 466 | + } |
| 467 | + @case ('auto') { |
| 468 | + {{ 'routine' }} |
| 469 | + } |
| 470 | + } |
444 | 471 | </docs-icon> |
445 | 472 | </button> |
446 | 473 |
|
|
486 | 513 | </nav> |
487 | 514 |
|
488 | 515 | <!-- Tablet: Second horizontal nav layer which opens the secondary nav --> |
489 | | - @if (activeRouteItem() === DOCS_ROUTE || activeRouteItem() === REFERENCE_ROUTE) { |
490 | | - <div class="adev-secondary-tablet-bar"> |
491 | | - <button type="button" (click)="openMobileNav($event)"> |
492 | | - <docs-icon class="docs-icon_high-contrast">menu</docs-icon> |
493 | | - @if (activeRouteItem() === DOCS_ROUTE) { |
494 | | - <span>Docs</span> |
495 | | - } @if (activeRouteItem() === REFERENCE_ROUTE) { |
496 | | - <span>API</span> |
497 | | - } |
498 | | - </button> |
499 | | - </div> |
| 516 | + @if (activeRouteItem() === PAGE_PREFIX.DOCS || activeRouteItem() === PAGE_PREFIX.REFERENCE) { |
| 517 | + <div class="adev-secondary-tablet-bar"> |
| 518 | + <button type="button" (click)="openMobileNav($event)"> |
| 519 | + <docs-icon class="docs-icon_high-contrast">menu</docs-icon> |
| 520 | + @if (activeRouteItem() === PAGE_PREFIX.DOCS) { |
| 521 | + <span>Docs</span> |
| 522 | + } |
| 523 | + @if (activeRouteItem() === PAGE_PREFIX.REFERENCE) { |
| 524 | + <span>API</span> |
| 525 | + } |
| 526 | + </button> |
| 527 | + </div> |
500 | 528 | } |
501 | 529 | </div> |
0 commit comments