Skip to content

fix(learn): track location.hash reactively instead of freezing it in useState #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tknkaa merged 4 commits into from
Apr 14, 2026
+24 −28
Merged

fix(learn): track location.hash reactively instead of freezing it in useState #129

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27a9e70
Initial plan
Copilot Apr 13, 2026
fa92f36
fix: use live location.hash instead of useState in learn.tsx
Copilot Apr 13, 2026
6cf131f
fix: remove #basic default so no sidebar item is active on initial load
Copilot Apr 13, 2026
e5d5d33
fix
tknkaa Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 24 additions & 28 deletions app/routes/learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import { useState } from "react";
import { useEffect } from "react";
import { Link, useLocation } from "react-router";
import BasicRule from "~/lib/components/BasicRule";
import LocalRule from "~/lib/components/LocalRule";

export default function Page() {
const location = useLocation();
const [currentHash] = useState(location.hash);
const contents = ["basic", "local"];
const currentHash = location.hash;
const contents = ["basic", "local"] as const;

useEffect(() => {
if (!currentHash) return;
const el = document.querySelector(currentHash);
el?.scrollIntoView({ behavior: "smooth" });
}, [currentHash]);

return (
<div className="drawer drawer-open bg-[#1A472A] font-serif">
<input id="my-drawer-4" type="checkbox" className="drawer-toggle" />
Expand All @@ -24,39 +31,28 @@ export default function Page() {
<LocalRule />
</div>
</div>

<div className="hidden md:block drawer-side is-drawer-close:overflow-visible">
<label
htmlFor="my-drawer-4"
aria-label="close sidebar"
className="drawer-overlay"
></label>
/>
<div className="is-drawer-close:w-14 is-drawer-open:w-48 bg-[#0F2918] flex flex-col items-start min-h-full">
<ul className="menu w-full grow">
{contents.map((content) => {
if (currentHash === `#${content}`) {
return (
<li key={content}>
<span className="is-drawer-close:hidden text-yellow-400">
<Link to={`#${content}`}>
{content === "basic" ? "基本ルール" : "ローカルルール"}
</Link>
</span>
</li>
);
} else {
return (
<li key={content}>
<span className="is-drawer-close:hidden">
<Link to={`#${content}`}>
{content === "basic" ? "基本ルール" : "ローカルルール"}
</Link>
</span>
</li>
);
}
})}
{contents.map((content) => (
<li key={content}>
<Link
to={`#${content}`}
className={`is-drawer-close:hidden ${
currentHash === `#${content}` ? "text-yellow-400" : ""
}`}
>
{content === "basic" ? "基本ルール" : "ローカルルール"}
</Link>
</li>
))}
</ul>

<div
className="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right"
data-tip="Open"
Expand Down
Loading