feat: toggle fixing user search navigation

Author: appare45

atcoder-problems-frontend/src/App.tsx

@@ -31,6 +31,7 @@ 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 (
@@ -41,6 +42,16 @@ const App: React.FC = () => {
             <NavigationBar />
           </div>
 
+          <Route
+            path={[
+              "/user/:userIds([a-zA-Z0-9_]+)+",
+              "/table/:userIds([a-zA-Z0-9_]*)*",
+              "/list/:userIds([a-zA-Z0-9_]*)*",
+            ]}
+          >
+            <UserSearchBar />
+          </Route>
+
           <Container
             className="my-5"
             style={{ width: "100%", maxWidth: "90%" }}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { NavLink as RouterLink, Route } from "react-router-dom";
+import { NavLink as RouterLink } from "react-router-dom";
 import {
   Collapse,
   DropdownItem,
@@ -17,7 +17,6 @@ import { useLoginState } from "../api/InternalAPIClient";
 import { useLoginLink } from "../utils/Url";
 import { ACCOUNT_INFO } from "../utils/RouterPath";
 import * as UserState from "../utils/UserState";
-import { UserSearchBar } from "./UserSearchBar";
 import { ThemeSelector } from "./ThemeSelector";
 
 export const NavigationBar = () => {
@@ -168,16 +167,6 @@ 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 isOpen={isOpen} />
-      </Route>
     </>
   );
 };

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

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import { GoPin } from "react-icons/go";
 import {
   NavLink as RouterLink,
   useLocation,
@@ -7,11 +8,13 @@ import {
 import {
   Button,
   ButtonGroup,
+  Col,
   Form,
   Input,
   Nav,
   Navbar,
-  Collapse,
+  NavItem,
+  Row,
 } from "reactstrap";
 import { useLoginState } from "../api/InternalAPIClient";
 import { extractRivalsParam, normalizeUserId } from "../utils";
@@ -43,10 +46,6 @@ const extractUserIds = (
   return { userId, rivalIdString };
 };
 
-interface Props {
-  isOpen: boolean;
-}
-
 const generatePath = (
   kind: PageKind,
   userId: string,
@@ -56,7 +55,7 @@ const generatePath = (
   return "/" + kind + "/" + users.join("/");
 };
 
-export const UserSearchBar = (props: Props) => {
+export const UserSearchBar = () => {
   const { pathname } = useLocation();
   const loginState = useLoginState().data;
   const pageKind = extractPageKind(pathname);
@@ -67,6 +66,8 @@ export const UserSearchBar = (props: Props) => {
 
   const loggedInUserId = UserState.loggedInUserId(loginState) ?? "";
 
+  const [userSearchBarIsFixed, setUserSearchBarIsFixed] = useState(false);
+
   const [userId, setUserId] = React.useState(pathUserId ?? "");
   const [rivalIdString, setRivalIdString] = React.useState(
     pathRivalIdString ?? ""
@@ -105,11 +106,11 @@ export const UserSearchBar = (props: Props) => {
       color="light"
       light
       expand="md"
-      className="border-bottom"
+      className={`${userSearchBarIsFixed ? "sticky-top" : ""} border-bottom`}
       style={{ padding: 0 }}
     >
-      <Collapse isOpen={props.isOpen} navbar>
-        <Nav navbar style={{ padding: "0.5rem 1rem" }}>
+      <Nav navbar style={{ padding: "0.5rem 1rem", width: "100%" }}>
+        <NavItem>
           <Form inline>
             <Input
               className="mt-2 mr-2 mt-lg-0 mt-md-0"
@@ -126,7 +127,6 @@ export const UserSearchBar = (props: Props) => {
               placeholder={loggedInUserId ? loggedInUserId : "User ID"}
               onChange={(e): void => setUserId(e.target.value)}
             />
-
             <Input
               className="mt-2 mr-2 mt-lg-0 mt-md-0"
               style={{ width: 160 }}
@@ -142,28 +142,42 @@ export const UserSearchBar = (props: Props) => {
               placeholder="Rival ID, ..."
               onChange={(e): void => setRivalIdString(e.target.value)}
             />
-
-            <ButtonGroup className="mt-2 mb-0 mt-lg-0 mt-md-0">
-              <Button tag={RouterLink} to={tablePath} color="light">
-                Table
-              </Button>
-
-              <Button tag={RouterLink} to={listPath} color="light">
-                List
-              </Button>
-
+          </Form>
+        </NavItem>
+        <NavItem style={{ flexGrow: 1 }}>
+          <Row className="justify-content-between align-items-center">
+            <Col className="col-auto">
+              <ButtonGroup className="mt-2 mb-0 mt-lg-0 mt-md-0">
+                <Button tag={RouterLink} to={tablePath} color="light">
+                  Table
+                </Button>
+
+                <Button tag={RouterLink} to={listPath} color="light">
+                  List
+                </Button>
+
+                <Button
+                  disabled={userId.length === 0 && loggedInUserId.length === 0}
+                  tag={RouterLink}
+                  to={userPath}
+                  color="light"
+                >
+                  User
+                </Button>
+              </ButtonGroup>
+            </Col>
+            <Col className="col-auto">
               <Button
-                disabled={userId.length === 0 && loggedInUserId.length === 0}
-                tag={RouterLink}
-                to={userPath}
                 color="light"
+                active={userSearchBarIsFixed}
+                onClick={() => setUserSearchBarIsFixed((e) => !e)}
               >
-                User
+                <GoPin />
               </Button>
-            </ButtonGroup>
-          </Form>
-        </Nav>
-      </Collapse>
+            </Col>
+          </Row>
+        </NavItem>
+      </Nav>
     </Navbar>
   );
 };