✨ (CursorAnimation.js): Add ErrorBoundary component to catch errors a…

…nd improve error handling in AnimatedPointer component

♻️ (NavLinks.jsx): Remove commented out code for status link in NavLinks component
♻️ (NavLinks.scss): Adjust padding in .navBar li to improve spacing in navigation bar

src/components/Animation/CursorAnimation.js

@@ -1,17 +1,56 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import AnimatedCursor from "react-animated-cursor";
 
+// ErrorBoundary component to catch errors
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    // Log the error to an error reporting service if needed
+    console.error("Error caught in ErrorBoundary:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any fallback UI
+      return <div>Error loading cursor</div>;
+    }
+
+    return this.props.children;
+  }
+}
+
 export default function AnimatedPointer() {
+  const [isClient, setIsClient] = useState(false);
+
+  // Ensure the component only renders on the client side (not SSR)
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsClient(true);
+    }
+  }, []);
+
+  // Only render AnimatedCursor if on the client side
   return (
-    <div className="App">
-      <AnimatedCursor
-        innerSize={8}
-        outerSize={22}
-        color="193, 11, 111"
-        outerAlpha={0.5}
-        innerScale={0.2}
-        outerScale={2}
-      />
-    </div>
+    isClient && (
+      <ErrorBoundary>
+        <AnimatedCursor
+          innerSize={8}
+          outerSize={22}
+          color="193, 11, 111"
+          outerAlpha={0.5}
+          innerScale={0.2}
+          outerScale={2}
+        />
+      </ErrorBoundary>
+    )
   );
 }

src/components/Navigation/NavLinks/NavLinks.jsx

@@ -90,7 +90,7 @@ const NavLinks = () => {
           </a>
         </li>
 
-        {/* <li>
+        <li>
           <a
             href="https://status.milansachani.dev"
             target="_blank"
@@ -99,7 +99,7 @@ const NavLinks = () => {
             <GiNetworkBars />
             {t("navbar.status")}
           </a>
-        </li> */}
+        </li>
 
         <li>
           <LanguageSwitch />

src/styles/Components/Navigation/_NavLinks.scss

@@ -13,7 +13,7 @@
 }
 
 .navBar li {
-  padding: 0.2rem 1.5rem;
+  padding: 0.2rem 0.6rem;
 }
 
 .active {