link

src/App.module.scss

@@ -9,14 +9,23 @@ main.main {
   justify-content: space-evenly;
 
   list-style-type: none;
+
+  li {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
 }
 
 .link {
-  flex-grow: 1;
   display: inline-block;
+  width: 100%;
+  text-align: center;
   padding: 12px;
+  border-top: 4px solid transparent;
+  user-select: none;
 }
 
 .link-active {
-  background-color: skyblue;
+  border-top-color: #09c;
+  background-color: lightskyblue;
 }

src/App.tsx

@@ -18,14 +18,16 @@ function Layout() {
   return (
     <main className={styles.main}>
       <ul className={styles.header}>
-        {routes.map((route) => {
-          if (!route.title) return undefined;
-          const active = matchPath({ path: route.path }, location.pathname);
+        {navLinks.map((navLink) => {
+          const active = (
+            navLink.subPaths ? navLink.subPaths : [{ key: navLink.key, path: navLink.path }]
+          ).some((item) => matchPath({ path: item.path }, location.pathname));
+          const mainPath = navLink.subPaths ? navLink.subPaths[0].path : navLink.path;
           const className = classNames(styles.link, active && styles["link-active"]);
           return (
-            <li key={route.path}>
-              <Link to={route.path} className={className}>
-                {route.title}
+            <li key={navLink.path}>
+              <Link to={mainPath} className={className}>
+                {navLink.title}
               </Link>
             </li>
           );
@@ -41,9 +43,23 @@ export default function App() {
   const router = createBrowserRouter(
     createRoutesFromElements(
       <Route path="/" element={<Layout />}>
-        {routes.map((route, idx) => (
-          <Route key={route.path} index={idx === 0} path={route.path} element={route.element} />
-        ))}
+        {navLinks.flatMap((route, idx) => {
+          if (route.subPaths) {
+            return route.subPaths.map((subRoute, idx) => {
+              return (
+                <Route
+                  key={`${route.key}-${subRoute.key}`}
+                  path={subRoute.path}
+                  element={route.element}
+                />
+              );
+            });
+          } else {
+            return (
+              <Route key={route.path} index={idx === 0} path={route.path} element={route.element} />
+            );
+          }
+        })}
       </Route>,
     ),
   );
@@ -57,11 +73,18 @@ export default function App() {
   );
 }
 
-const routes = [
+const navLinks = [
   { key: "home", path: "/", title: "Home", element: <HomePane /> },
   { key: "srs", path: "/srs", title: "SRS", element: <SrsPane /> },
-  { key: "kanji", path: "/kanji", title: "Kanji", element: <KanjiPane /> },
-  { key: "kanjiSelected", path: "/kanji/:selectedKanji", element: <KanjiPane /> },
+  {
+    key: "kanji",
+    title: "Kanji",
+    element: <KanjiPane />,
+    subPaths: [
+      { key: "index", path: "/kanji" },
+      { key: "selected", path: "/kanji/:selectedKanji" },
+    ],
+  },
   { key: "vocab", path: "/vocab", title: "Vocab", element: <VocabPane /> },
   { key: "settings", path: "/settings", title: "Settings", element: <SettingsPane /> },
 ];

src/panes/HomePane.tsx

@@ -1,3 +1,17 @@
 export default function HomePane() {
-  return <>hellosu</>;
+  return (
+    <main>
+      <h1 className="text-4xl">Houhou</h1>
+
+      <a
+        href="https://git.mzhang.io/michael/houhou"
+        rel="noopener"
+        target="_blank"
+        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+        style={{ display: "inline" }}
+      >
+        Source
+      </a>
+    </main>
+  );
 }