add SearchInput to the ServerPage layout

src/common/MainLayout/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TWHELP, NAME } from '@config/app';
 import * as ROUTES from '@config/routes';
@@ -12,14 +12,13 @@ import {
   Button,
   Hidden,
   Link as MUILink,
-  InputAdornment,
   IconButton,
   AppBarProps,
 } from '@material-ui/core';
-import { Search as SearchIcon, Input as InputIcon } from '@material-ui/icons';
+import { Input as InputIcon } from '@material-ui/icons';
 import Link from '@common/Link/Link';
 import VersionSelector from '@common/VersionSelector/VersionSelector';
-import SearchInput from '@common/Form/SearchInput';
+import SearchInput from './SearchInput';
 
 export interface Props {
   showLinkToHomePage?: boolean;
@@ -34,16 +33,9 @@ export default function Header({
   defaultQ = '',
   appBarProps = {},
 }: Props) {
-  const [q, setQ] = useState<string>(defaultQ);
   const { t } = useTranslation(NAMESPACES.COMMON);
   const classes = useStyles();
-  const trimmedQLength = q.trim().length;
 
-  const iconButton = (
-    <IconButton size="small" type="submit" disabled={trimmedQLength === 0}>
-      <SearchIcon />
-    </IconButton>
-  );
   const versionSelector = (
     <div>
       <VersionSelector />
@@ -54,32 +46,7 @@ export default function Header({
       <Container>
         <Toolbar disableGutters className={classes.toolbar}>
           <form className={classes.form}>
-            <SearchInput
-              fullWidth
-              variant="outlined"
-              placeholder={t<string>('mainLayout.header.search')}
-              value={q}
-              onChange={e => {
-                setQ(e.target.value);
-              }}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    {trimmedQLength ? (
-                      <Link
-                        to={ROUTES.SEARCH_PAGE + `?q=${encodeURIComponent(q)}`}
-                      >
-                        {iconButton}
-                      </Link>
-                    ) : (
-                      iconButton
-                    )}
-                  </InputAdornment>
-                ),
-              }}
-              onResetValue={() => setQ('')}
-              size="small"
-            />
+            <SearchInput defaultQ={defaultQ} />
           </form>
           {showLinkToHomePage && (
             <Link to={ROUTES.INDEX_PAGE}>

src/common/MainLayout/components/Header/SearchInput.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as ROUTES from '@config/routes';
+import * as NAMESPACES from '@config/namespaces';
+
+import { InputAdornment, IconButton, TextFieldProps } from '@material-ui/core';
+import { Search as SearchIcon } from '@material-ui/icons';
+import SearchInput from '@common/Form/SearchInput';
+import Link from '@common/Link/Link';
+
+export type Props = TextFieldProps & {
+  defaultQ?: string;
+};
+
+function HeaderSearchInput({ defaultQ = '', ...rest }: Props) {
+  const { t } = useTranslation(NAMESPACES.COMMON);
+  const [q, setQ] = useState<string>(defaultQ);
+  const trimmedQLength = q.trim().length;
+  const iconButton = (
+    <IconButton size="small" type="submit" disabled={trimmedQLength === 0}>
+      <SearchIcon />
+    </IconButton>
+  );
+
+  return (
+    <SearchInput
+      fullWidth
+      variant="outlined"
+      placeholder={t<string>('mainLayout.header.search')}
+      size="small"
+      {...rest}
+      value={q}
+      onChange={e => {
+        setQ(e.target.value);
+      }}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            {trimmedQLength ? (
+              <Link to={ROUTES.SEARCH_PAGE + `?q=${encodeURIComponent(q)}`}>
+                {iconButton}
+              </Link>
+            ) : (
+              iconButton
+            )}
+          </InputAdornment>
+        ),
+      }}
+      onResetValue={() => setQ('')}
+    />
+  );
+}
+
+export default HeaderSearchInput;

src/common/MainLayout/components/Header/styles.ts

@@ -2,11 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   form: {
-    width: '40%',
-    [theme.breakpoints.between('xs', 'sm')]: {
-      width: '60%',
-    },
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down(750)]: {
       width: '100%',
     },
   },

src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   DrawerProps,
   Toolbar,
   Box,
+  Hidden,
 } from '@material-ui/core';
 import {
   Dashboard as DashboardIcon,
@@ -22,6 +23,7 @@ import {
   Fireplace as FireplaceIcon,
 } from '@material-ui/icons';
 import DevNote from '@common/DevNote/DevNote';
+import SearchInput from '@common/MainLayout/components/Header/SearchInput';
 import Nav from './components/Nav/Nav';
 import ServerInfo from './components/ServerInfo/ServerInfo';
 
@@ -145,6 +147,11 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
     >
       <Toolbar />
       <div className={clsx(classes.root, className)}>
+        <Hidden mdUp implementation="css">
+          <Box padding={1} paddingBottom={0} component="form">
+            <SearchInput />
+          </Box>
+        </Hidden>
         <ServerInfo t={t} />
         <Divider />
         <Nav routes={routes} />

src/features/ServerPage/common/PageLayout/components/TopBar/TopBar.tsx

@@ -17,6 +17,7 @@ import {
 import { Menu as MenuIcon, Input as InputIcon } from '@material-ui/icons';
 import VersionSelector from '@common/VersionSelector/VersionSelector';
 import Link from '@common/Link/Link';
+import SearchInput from '@common/MainLayout/components/Header/SearchInput';
 
 export interface Props {
   className?: string;
@@ -49,13 +50,18 @@ const TopBar = ({ className, openSidebar, t }: Props) => {
             </Typography>
           </div>
           <div className={classes.rightSideContainer}>
+            <Hidden smDown implementation="css">
+              <form>
+                <SearchInput />
+              </form>
+            </Hidden>
             <Link to={ROUTES.INDEX_PAGE} color="inherit">
-              <Hidden xsDown>
+              <Hidden xsDown implementation="css">
                 <Button startIcon={<InputIcon />}>
                   {t('pageLayout.topBar.home')}
                 </Button>
               </Hidden>
-              <Hidden smUp>
+              <Hidden smUp implementation="css">
                 <IconButton color="inherit">
                   <InputIcon />
                 </IconButton>