|
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