Upload and test

00-Lesson-Site/frontend/src/components/Navbar/UserIcon.module.scss

@@ -0,0 +1,65 @@
+/* Path: src/components/Navbar/UserIcon.module.scss */
+
+.user-icon {
+    display: inline-flex;
+    // 1. Fix alignment (Flexbox uses justify-content)
+    justify-content: center;
+    align-items: center;
+
+    // 2. Create a positioning context for the absolute child
+    position: relative;
+
+    margin-left: 1rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+
+    // Optional: Reset link styles
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+
+    &:focus {
+        outline: none;
+    }
+
+    // 3. Trigger the animation when the USER hovers the main button
+    &:hover .spin-container {
+        animation-play-state: running;
+    }
+}
+
+.spin-container {
+    position: absolute;
+    // 4. Force the container to fill the parent exactly
+    inset: 0;
+    width: 100%;
+    height: 100%;
+
+    // Animation 1: Rotate CCW fast
+    animation: spin 1.5s ease-in-out infinite reverse;
+    animation-play-state: paused;
+
+    // Allow clicks to pass through to the link/button underneath
+    pointer-events: none;
+}
+
+.spin-animation {
+    width: 100%;
+    height: 100%;
+
+    animation: spin 15s linear infinite normal;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}