Added routing for nav links and SPA mounting of components using Angular router

2026-01-15 20:20:09 +00:00 · 2025-05-22 11:56:39 +02:00
parent a9dedcb1f6
commit 11fd702957
37 changed files with 269 additions and 147 deletions
--- a/src/app/shared/ui/nav-button/button.component.css
+++ b/src/app/shared/ui/nav-button/button.component.css
@@ -0,0 +1,149 @@
+.button-custom {
+  cursor: pointer;
+  background-color: var(--color-nier-mid);
+  color: var(--color-nier-dark);
+  position: relative;
+  border: 1px solid transparent;
+  border-left: none;
+  border-right: none;
+  overflow: hidden;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.button-custom::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 3px;  /* Space from top border */
+  bottom: 3px; /* Space from bottom border */
+  width: 0;
+  height: auto; /* This makes it respect top and bottom values */
+  background-color: var(--color-nier-dark);
+  transition: width 0.2s ease;
+  z-index: 0;
+}
+
+/* Normal hover/focus state - keep your original behavior */
+.button-custom:hover,
+.button-custom:focus {
+  color: var(--color-nier-text-light);
+  background-color: transparent;
+  border-color: var(--color-nier-dark);
+}
+
+.button-custom:hover::before,
+.button-custom:focus::before {
+  width: 100%;
+}
+
+/* Add NieR-style glitch effects on hover */
+.button-custom::after {
+  content: attr(data-label); /* Use the button's text from data-label attribute */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-nier-text-light);
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.button-custom:hover::after {
+  animation: nier-button-glitch 0.6s ease forwards;
+}
+
+/* Add subtle scan line on hover */
+.button-custom .scan-line {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-nier-text-light);
+  opacity: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.button-custom:hover .scan-line {
+  animation: nier-button-scan 0.3s ease forwards;
+}
+
+/* The glitch effect animation */
+@keyframes nier-button-glitch {
+  0%, 100% {
+    opacity: 0;
+    transform: translateX(0);
+    clip-path: inset(0 0 0 0);
+  }
+  10% {
+    opacity: 0.2;
+    transform: translateX(-2px);
+    clip-path: inset(10% 0 80% 0);
+  }
+  12% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  20% {
+    opacity: 0.2;
+    transform: translateX(2px);
+    clip-path: inset(30% 0 50% 0);
+  }
+  22% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  30% {
+    opacity: 0.1;
+    transform: translateX(-1px);
+    clip-path: inset(50% 0 20% 0);
+  }
+  32% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+}
+
+/* The scan line animation */
+@keyframes nier-button-scan {
+  0% {
+    opacity: 0.5;
+    left: -100%;
+  }
+  100% {
+    opacity: 0;
+    left: 100%;
+  }
+}
+
+/* Add a brief effect on button click */
+.button-custom:active {
+  transform: scale(0.98);
+}
+
+.button-custom:active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  opacity: 0;
+  animation: nier-button-flash 0.2s ease;
+}
+
+@keyframes nier-button-flash {
+  0% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}