feat(ui): animate sidebar icons on hover

src/shared/ui/AppShell.module.css

@@ -13,6 +13,83 @@
 	display: none;
 }
 
+.navIcon {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.drawStroke {
+		stroke-dasharray: 1;
+	}
+
+	.topSlider {
+		--slider-offset: -3px;
+	}
+
+	.bottomSlider {
+		--slider-offset: 3px;
+	}
+
+	.navLink:focus-visible {
+		.portfolioIcon {
+			animation: portfolio-sway 650ms ease-in-out;
+		}
+		.drawStroke {
+			animation: stroke-draw 650ms ease-in-out;
+		}
+		:is(.topSlider, .bottomSlider) {
+			animation: slider-slide 650ms ease-in-out;
+		}
+	}
+
+	@media (hover: hover) {
+		.navLink:hover {
+			.portfolioIcon {
+				animation: portfolio-sway 650ms ease-in-out;
+			}
+			.drawStroke {
+				animation: stroke-draw 650ms ease-in-out;
+			}
+			:is(.topSlider, .bottomSlider) {
+				animation: slider-slide 650ms ease-in-out;
+			}
+		}
+	}
+}
+
+@keyframes portfolio-sway {
+	0%,
+	100% {
+		transform: rotate(0);
+	}
+	30% {
+		transform: translateY(-1px) rotate(-10deg);
+	}
+	65% {
+		transform: rotate(7deg);
+	}
+}
+
+@keyframes stroke-draw {
+	0% {
+		stroke-dashoffset: 1;
+	}
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes slider-slide {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	50% {
+		transform: translateX(var(--slider-offset));
+	}
+}
+
 @media (max-width: 47.99375em) {
 	.bottomNav {
 		background: var(--mantine-color-white);