fix: consistent settings tabs

AlexSciFier · Sep 8, 2023 · 253bb37 · 253bb37
1 parent 349cd86
commit 253bb37
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/frontend/src/pages/settings/tabHeader.jsx b/frontend/src/pages/settings/tabHeader.jsx
@@ -2,13 +2,14 @@ import React from "react";
 
 export default function TabHeader({ title, isActive, onClick }) {
   return (
-    <li
+    <a
       className={`px-4 py-2 hover:bg-cyan-600/10 hover:cursor-pointer ${
         isActive ? "border-b-2 border-cyan-500" : ""
       }`}
       onClick={onClick}
+      href={`#${title}`}
     >
       {title}
-    </li>
+    </a>
   );
 }
diff --git a/frontend/src/pages/settings/tabView.jsx b/frontend/src/pages/settings/tabView.jsx
@@ -1,11 +1,13 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import TabHeader from "./tabHeader";
 import AboutTab from "./tabs/aboutTab";
 import GroupTab from "./tabs/groupTab/groupTab";
 import MainTab from "./tabs/mainTab/mainTab";
 import InterfaceTab from "./tabs/interfaceTab/interfaceTab";
+import { useLocation } from "react-router";
 
 export default function TabView() {
+  const location = useLocation();
   const tabs = [
     {
       header: "Main",
@@ -27,6 +29,14 @@ export default function TabView() {
 
   const [curentTab, setCurentTab] = useState(0);
 
+  useEffect(() => {
+    if (location.hash) {
+      let found = tabs.filter((tab) => tab.header === location.hash.slice(1));
+      let foundIdx = tabs.indexOf(found[0]);
+      setCurentTab(foundIdx);
+    }
+  }, []);
+
   return (
     <div className="md:w-2/4 w-full px-3">
       <ul className="flex gap-3 w-full text-lg overflow-x-auto">