fix: fix all navigation

Author: appare45

atcoder-problems-frontend/src/App.tsx

@@ -31,26 +31,13 @@ import { ACCOUNT_INFO } from "./utils/RouterPath";
 import { ThemeProvider } from "./components/ThemeProvider";
 import { caseInsensitiveUserId } from "./utils";
 import { PROBLEM_ID_SEPARATE_SYMBOL } from "./utils/QueryString";
-import { UserSearchBar } from "./components/UserSearchBar";
 
 const App: React.FC = () => {
   return (
     <ThemeProvider>
       <Router>
         <div>
-          <div className="sticky-top">
-            <NavigationBar />
-          </div>
-
-          <Route
-            path={[
-              "/user/:userIds([a-zA-Z0-9_]+)+",
-              "/table/:userIds([a-zA-Z0-9_]*)*",
-              "/list/:userIds([a-zA-Z0-9_]*)*",
-            ]}
-          >
-            <UserSearchBar />
-          </Route>
+          <NavigationBar />
 
           <Container
             className="my-5"

atcoder-problems-frontend/src/components/NavigationBar.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { NavLink as RouterLink } from "react-router-dom";
+import React, { useState } from "react";
+import { NavLink as RouterLink, Route } from "react-router-dom";
 import {
   Collapse,
   DropdownItem,
@@ -18,6 +18,7 @@ import { useLoginLink } from "../utils/Url";
 import { ACCOUNT_INFO } from "../utils/RouterPath";
 import * as UserState from "../utils/UserState";
 import { ThemeSelector } from "./ThemeSelector";
+import { UserSearchBar } from "./UserSearchBar";
 
 export const NavigationBar = () => {
   const loginState = useLoginState().data;
@@ -27,8 +28,10 @@ export const NavigationBar = () => {
 
   const [isOpen, setIsOpen] = React.useState(false);
 
+  const [isNavigationFixed, setIsNavigationFixed] = useState(true);
+
   return (
-    <>
+    <div className={isNavigationFixed ? "sticky-top" : ""}>
       <Navbar color="dark" dark expand="lg">
         <NavbarBrand tag={RouterLink} to="/" className="mb-0 h1">
           AtCoder Problems
@@ -167,6 +170,19 @@ export const NavigationBar = () => {
           </Nav>
         </Collapse>
       </Navbar>
-    </>
+
+      <Route
+        path={[
+          "/user/:userIds([a-zA-Z0-9_]+)+",
+          "/table/:userIds([a-zA-Z0-9_]*)*",
+          "/list/:userIds([a-zA-Z0-9_]*)*",
+        ]}
+      >
+        <UserSearchBar
+          isNavigationFixed={isNavigationFixed}
+          setIsNavigationFixed={() => setIsNavigationFixed((e) => !e)}
+        />
+      </Route>
+    </div>
   );
 };

atcoder-problems-frontend/src/components/UserSearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { GoPin } from "react-icons/go";
 import {
   NavLink as RouterLink,
@@ -46,6 +46,11 @@ const extractUserIds = (
   return { userId, rivalIdString };
 };
 
+type Props = {
+  isNavigationFixed: boolean;
+  setIsNavigationFixed: () => void;
+};
+
 const generatePath = (
   kind: PageKind,
   userId: string,
@@ -55,7 +60,7 @@ const generatePath = (
   return "/" + kind + "/" + users.join("/");
 };
 
-export const UserSearchBar = () => {
+export const UserSearchBar = (props: Props) => {
   const { pathname } = useLocation();
   const loginState = useLoginState().data;
   const pageKind = extractPageKind(pathname);
@@ -66,8 +71,6 @@ export const UserSearchBar = () => {
 
   const loggedInUserId = UserState.loggedInUserId(loginState) ?? "";
 
-  const [userSearchBarIsFixed, setUserSearchBarIsFixed] = useState(false);
-
   const [userId, setUserId] = React.useState(pathUserId ?? "");
   const [rivalIdString, setRivalIdString] = React.useState(
     pathRivalIdString ?? ""
@@ -106,7 +109,7 @@ export const UserSearchBar = () => {
       color="light"
       light
       expand="md"
-      className={`${userSearchBarIsFixed ? "sticky-top" : ""} border-bottom`}
+      className="border-bottom"
       style={{ padding: 0 }}
     >
       <Nav navbar style={{ padding: "0.5rem 1rem", width: "100%" }}>
@@ -169,8 +172,8 @@ export const UserSearchBar = () => {
             <Col className="col-auto">
               <Button
                 color="light"
-                active={userSearchBarIsFixed}
-                onClick={() => setUserSearchBarIsFixed((e) => !e)}
+                active={props.isNavigationFixed}
+                onClick={props.setIsNavigationFixed}
               >
                 <GoPin />
               </Button>