fix: sidebar close on route change

alsiam · Dec 15, 2023 · aff83e7 · aff83e7
1 parent 0c4687f
commit aff83e7
Showing 1 changed file with 40 additions and 15 deletions.
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 const Sidebar = () => {
@@ -9,49 +10,73 @@ const Sidebar = () => {
   const handleOpen = () => {
     setOpen(!open);
   };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const pathUrl = usePathname();
 
   return (
     <aside className={`aside ${open ? "open" : ""}`}>
-      <div onClick={handleOpen} className="nav-toggler"> 
+      <div onClick={handleOpen} className="nav-toggler">
         <span />
       </div>
       <div className="aside-inner">
         <div className="logo">
-          <a href="/">Logo</a>
+          <Link href="/" onClick={handleClose}>
+            Logo
+          </Link>
         </div>
         <ul className="nav">
-          <li>
-            <Link href="/" className="active">
+          <li onClick={handleClose}>
+            <Link href="/" className={`${pathUrl == "/" && "active"}`}>
               <i className="fa fa-home" /> Home
             </Link>
           </li>
-          <li>
-            <Link href="/about">
+          <li onClick={handleClose}>
+            <Link
+              href="/about"
+              className={`${pathUrl == "/about" && "active"}`}
+            >
               <i className="fa fa-user" /> About
             </Link>
           </li>
-          <li>
-            <Link href="/services">
+          <li onClick={handleClose}>
+            <Link
+              href="/services"
+              className={`${pathUrl == "/services" && "active"}`}
+            >
               <i className="fa fa-list" /> Services
             </Link>
           </li>
-          <li>
-            <Link href="/portfolio">
+          <li onClick={handleClose}>
+            <Link
+              href="/portfolio"
+              className={`${pathUrl == "/portfolio" && "active"}`}
+            >
               <i className="fa fa-briefcase" /> Portfolio
             </Link>
           </li>
-          <li>
-            <Link href="/blog">
+          <li onClick={handleClose}>
+            <Link href="/blog" className={`${pathUrl == "/blog" && "active"}`}>
               <i className="fa fa-envelope" /> Blog
             </Link>
           </li>
-          <li>
-            <Link href="/contact">
+          <li onClick={handleClose}>
+            <Link
+              href="/contact"
+              className={`${pathUrl == "/contact" && "active"}`}
+            >
               <i className="fa fa-comments" /> Contact
             </Link>
           </li>
         </ul>
-        <div className="copyright">Created with ❤️ By <a href="http://alsiam.com" target="_blank" rel="noopener noreferrer">Al Siam</a></div>
+        <div className="copyright">
+          Created with ❤️ By{" "}
+          <a href="http://alsiam.com" target="_blank" rel="noopener noreferrer">
+            Al Siam
+          </a>
+        </div>
       </div>
     </aside>
   );