improved sidebar

components/Sidebar.tsx

@@ -6,13 +6,27 @@ import {
   faHashtag,
   faBookmark,
   faChartSimple,
+  faChevronDown,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { Disclosure, Transition } from "@headlessui/react";
 
 export default function Sidebar({ className }: { className?: string }) {
+  const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
+    const storedValue = localStorage.getItem("tagDisclosure");
+    return storedValue ? storedValue === "true" : true;
+  });
+
+  const [collectionDisclosure, setCollectionDisclosure] = useState<boolean>(
+    () => {
+      const storedValue = localStorage.getItem("collectionDisclosure");
+      return storedValue ? storedValue === "true" : true;
+    }
+  );
+
   const { collections } = useCollectionStore();
   const { tags } = useTagStore();
 
@@ -20,6 +34,17 @@ export default function Sidebar({ className }: { className?: string }) {
 
   const [active, setActive] = useState("");
 
+  useEffect(() => {
+    localStorage.setItem("tagDisclosure", tagDisclosure ? "true" : "false");
+  }, [tagDisclosure]);
+
+  useEffect(() => {
+    localStorage.setItem(
+      "collectionDisclosure",
+      collectionDisclosure ? "true" : "false"
+    );
+  }, [collectionDisclosure]);
+
   useEffect(() => {
     setActive(router.asPath);
   }, [router, collections]);
@@ -80,10 +105,31 @@ export default function Sidebar({ className }: { className?: string }) {
         </Link>
       </div>
 
-      <div className="text-gray-500 mt-5">
-        <p className="text-sm mb-2 pl-2 font-semibold">Collections</p>
-      </div>
-      <div className="flex flex-col gap-1">
+      <Disclosure defaultOpen={collectionDisclosure}>
+        <Disclosure.Button
+          onClick={() => {
+            setCollectionDisclosure(!collectionDisclosure);
+          }}
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+        >
+          <p>Collections</p>
+
+          <FontAwesomeIcon
+            icon={faChevronDown}
+            className={`w-3 h-3 ${
+              collectionDisclosure ? "rotate-reverse" : "rotate"
+            }`}
+          />
+        </Disclosure.Button>
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="transform opacity-0 -translate-y-3"
+          enterTo="transform opacity-100 translate-y-0"
+          leave="transition duration-100 ease-out"
+          leaveFrom="transform opacity-100 translate-y-0"
+          leaveTo="transform opacity-0 -translate-y-3"
+        >
+          <Disclosure.Panel className="flex flex-col gap-1">
             {collections
               .sort((a, b) => a.name.localeCompare(b.name))
               .map((e, i) => {
@@ -107,11 +153,31 @@ export default function Sidebar({ className }: { className?: string }) {
                   </Link>
                 );
               })}
-      </div>
-      <div className="text-gray-500 mt-5">
-        <p className="text-sm mb-2 pl-2 font-semibold">Tags</p>
-      </div>
-      <div className="flex flex-col gap-1">
+          </Disclosure.Panel>
+        </Transition>
+      </Disclosure>
+      <Disclosure defaultOpen={tagDisclosure}>
+        <Disclosure.Button
+          onClick={() => {
+            setTagDisclosure(!tagDisclosure);
+          }}
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+        >
+          <p>Tags</p>
+          <FontAwesomeIcon
+            icon={faChevronDown}
+            className={`w-3 h-3 ${tagDisclosure ? "rotate-reverse" : "rotate"}`}
+          />
+        </Disclosure.Button>
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="transform opacity-0 -translate-y-3"
+          enterTo="transform opacity-100 translate-y-0"
+          leave="transition duration-100 ease-out"
+          leaveFrom="transform opacity-100 translate-y-0"
+          leaveTo="transform opacity-0 -translate-y-3"
+        >
+          <Disclosure.Panel className="flex flex-col gap-1">
             {tags
               .sort((a, b) => a.name.localeCompare(b.name))
               .map((e, i) => {
@@ -134,7 +200,9 @@ export default function Sidebar({ className }: { className?: string }) {
                   </Link>
                 );
               })}
-      </div>
+          </Disclosure.Panel>
+        </Transition>
+      </Disclosure>
     </div>
   );
 }

styles/globals.css

@@ -27,6 +27,16 @@
   hyphens: auto;
 }
 
+.rotate {
+  transition: transform 0.1s ease;
+  transform: rotate(-90deg);
+}
+
+.rotate-reverse {
+  transition: transform 0.1s ease;
+  transform: rotate(0deg);
+}
+
 .fade-in {
   animation: fade-in-animation 100ms;
 }