fix: change sidebar from hash location to routes

Author: barelyhuman

src/components/Sidebar.jsx

@@ -1,33 +1,23 @@
-import { useEffect, useState } from "preact/hooks";
+import { useLocation } from "preact-iso";
 
-export function Sidebar({ items = [], initialValue = "" } = {}) {
-  const [activeKey, setActiveKey] = useState(initialValue);
+export function Sidebar({ items = [] } = {}) {
+  const location = useLocation();
 
-  useEffect(() => {
-    const hash = window.location.hash.replace(/^#/, "");
-
-    if (hash != activeKey) {
-      setActiveKey(hash.replace(/^#/, ""));
-    }
-  }, []);
+  const activeKey = items.find((d) => "/" + d.key === location.path);
 
   return (
     <ul class="sticky top-[50px] flex flex-col gap-4">
       {items.map((i) => (
-        <SidebarItem
-          item={i}
-          active={i.key == activeKey}
-          onPress={() => setActiveKey(i.key)}
-        />
+        <SidebarItem item={i} active={activeKey && i.key == activeKey.key} />
       ))}
     </ul>
   );
 }
 
-function SidebarItem({ item, active, onPress }) {
+function SidebarItem({ item, active }) {
   return (
     <li class="w-fit">
-      <a href={"/" + item.key} onClick={onPress} class="group text-zinc-600">
+      <a href={"/" + item.key} class="group text-zinc-600">
         {item.label}
         <span
           class={`block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-black ${