dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-09 06:48:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix: correctly handle direct tab navigation with encoded chars (#3172)

Browse source
This commit is contained in:
shamoon 2024-03-23 23:22:27 -07:00 • committed by GitHub
parent e4b4eba445
commit 01a2495e47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/tab.jsx
View file

@ -3,13 +3,19 @@ import classNames from "classnames";
import { TabContext } from "utils/contexts/tab";
export function slugify(tabName) {
return tabName !== undefined ? encodeURIComponent(tabName.toString().replace(/\s+/g, "-").toLowerCase()) : "";
function slugify(tabName) {
return tabName.toString().replace(/\s+/g, "-").toLowerCase();
}
export function slugifyAndEncode(tabName) {
return tabName !== undefined ? encodeURIComponent(slugify(tabName)) : "";
}
export default function Tab({ tab }) {
const { activeTab, setActiveTab } = useContext(TabContext);
const matchesTab = decodeURI(activeTab) === slugify(tab);
return (
<li
key={tab}
@ -21,16 +27,14 @@ export default function Tab({ tab }) {
type="button"
role="tab"
aria-controls={`#${tab}`}
aria-selected={activeTab === slugify(tab) ? "true" : "false"}
aria-selected={matchesTab ? "true" : "false"}
className={classNames(
"w-full rounded-md m-1",
activeTab === slugify(tab)
? "bg-theme-300/20 dark:bg-white/10"
: "hover:bg-theme-100/20 dark:hover:bg-white/5",
matchesTab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
)}
onClick={() => {
setActiveTab(slugify(tab));
window.location.hash = `#${slugify(tab)}`;
setActiveTab(slugifyAndEncode(tab));
window.location.hash = `#${slugifyAndEncode(tab)}`;
}}
>
{tab}