Merge pull request #1075 from appare45/issue1054

ユーザー検索画面を固定できるように

Author: kenkoooo

atcoder-problems-frontend/src/App.tsx

@@ -37,9 +37,7 @@ const App: React.FC = () => {
     <ThemeProvider>
       <Router>
         <div>
-          <div className="sticky-top">
-            <NavigationBar />
-          </div>
+          <NavigationBar />
 
           <Container
             className="my-5"

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { NavLink as RouterLink, Route } from "react-router-dom";
 import {
   Collapse,
@@ -17,8 +17,8 @@ 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";
+import { UserSearchBar } from "./UserSearchBar";
 
 export const NavigationBar = () => {
   const loginState = useLoginState().data;
@@ -28,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
@@ -176,8 +178,11 @@ export const NavigationBar = () => {
           "/list/:userIds([a-zA-Z0-9_]*)*",
         ]}
       >
-        <UserSearchBar isOpen={isOpen} />
+        <UserSearchBar
+          isNavigationFixed={isNavigationFixed}
+          setIsNavigationFixed={() => setIsNavigationFixed((e) => !e)}
+        />
       </Route>
-    </>
+    </div>
   );
 };

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

@@ -1,4 +1,5 @@
 import React 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";
@@ -44,7 +47,8 @@ const extractUserIds = (
 };
 
 interface Props {
-  isOpen: boolean;
+  isNavigationFixed: boolean;
+  setIsNavigationFixed: () => void;
 }
 
 const generatePath = (
@@ -108,8 +112,8 @@ export const UserSearchBar = (props: Props) => {
       className="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 +130,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 +145,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={props.isNavigationFixed}
+                onClick={props.setIsNavigationFixed}
               >
-                User
+                <GoPin />
               </Button>
-            </ButtonGroup>
-          </Form>
-        </Nav>
-      </Collapse>
+            </Col>
+          </Row>
+        </NavItem>
+      </Nav>
     </Navbar>
   );
 };