Update Header with responsive design

cisagov · Mar 25, 2024 · 6a9d857 · 6a9d857
1 parent 821fa6f
commit 6a9d857
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 92 deletions.
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { NavLink, Link, useHistory, useLocation } from 'react-router-dom';
 import {
@@ -151,7 +151,8 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
     apiGet
   } = useAuthContext();
   const [drawerOpen, setDrawerOpen] = useState(false);
-
+  let drawerItems = [];
+  const [isMobile, setIsMobile] = useState(false);
   const [organizations, setOrganizations] = useState<
     (Organization | OrganizationTag)[]
   >([]);
@@ -184,7 +185,7 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
     }
   }, [apiGet, setOrganizations, userLevel]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (userLevel > 0) {
       fetchOrganizations();
     }
@@ -248,6 +249,23 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
 
   const orgPageMatch = useRouteMatch('/organizations/:id');
 
+  const handleResize = () => {
+    if (window.innerWidth < 1110) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+  });
+
+  if (isMobile) {
+    drawerItems = [...navItems, ...userItems];
+  } else {
+    drawerItems = userItems;
+  }
   return (
     <Root>
       <AppBar position="static" elevation={0}>
@@ -260,9 +278,10 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
                 alt="Crossfeed Icon Navigate Home"
               />
             </Link>
-            <div className={classes.lgNav}>{desktopNavItems.slice()}</div>
+            {!isMobile && (
+              <div className={classes.lgNav}>{desktopNavItems.slice()}</div>
+            )}
             <div className={classes.spacing} />
-
             {userLevel > 0 && (
               <>
                 <SearchBar
@@ -278,87 +297,84 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
                   }}
                 />
                 {organizations.length > 1 && (
-                  <>
-                    <div className={classes.spacing} />
-                    <Autocomplete
-                      isOptionEqualToValue={(option, value) =>
-                        option?.name === value?.name
-                      }
-                      options={[{ name: 'All Organizations' }].concat(
-                        organizations
-                      )}
-                      autoComplete={false}
-                      className={classes.selectOrg}
-                      classes={{
-                        option: classes.option
-                      }}
-                      value={
-                        showAllOrganizations
-                          ? { name: 'All Organizations' }
-                          : currentOrganization ?? undefined
+                  <Autocomplete
+                    isOptionEqualToValue={(option, value) =>
+                      option?.name === value?.name
+                    }
+                    options={[{ name: 'All Organizations' }].concat(
+                      organizations
+                    )}
+                    autoComplete={false}
+                    className={classes.selectOrg}
+                    classes={{
+                      option: classes.option
+                    }}
+                    value={
+                      showAllOrganizations
+                        ? { name: 'All Organizations' }
+                        : currentOrganization ?? undefined
+                    }
+                    filterOptions={(options, state) => {
+                      // If already selected, show all
+                      if (
+                        options.find(
+                          (option) =>
+                            option?.name.toLowerCase() ===
+                            state.inputValue.toLowerCase()
+                        )
+                      ) {
+                        return options;
                       }
-                      filterOptions={(options, state) => {
-                        // If already selected, show all
-                        if (
-                          options.find(
-                            (option) =>
-                              option?.name.toLowerCase() ===
-                              state.inputValue.toLowerCase()
-                          )
-                        ) {
-                          return options;
+                      return options.filter(
+                        (option) =>
+                          option?.name
+                            .toLowerCase()
+                            .includes(state.inputValue.toLowerCase())
+                      );
+                    }}
+                    disableClearable
+                    blurOnSelect
+                    selectOnFocus
+                    getOptionLabel={(option) => option!.name}
+                    renderOption={(props, option) => (
+                      <li {...props}>{option!.name}</li>
+                    )}
+                    onChange={(
+                      event: any,
+                      value: Organization | { name: string } | undefined
+                    ) => {
+                      if (value && 'id' in value) {
+                        setOrganization(value);
+                        setShowAllOrganizations(false);
+                        if (value.name === 'Election') {
+                          setShowMaps(true);
+                        } else {
+                          setShowMaps(false);
                         }
-                        return options.filter(
-                          (option) =>
-                            option?.name
-                              .toLowerCase()
-                              .includes(state.inputValue.toLowerCase())
-                        );
-                      }}
-                      disableClearable
-                      blurOnSelect
-                      selectOnFocus
-                      getOptionLabel={(option) => option!.name}
-                      renderOption={(props, option) => (
-                        <li {...props}>{option!.name}</li>
-                      )}
-                      onChange={(
-                        event: any,
-                        value: Organization | { name: string } | undefined
-                      ) => {
-                        if (value && 'id' in value) {
-                          setOrganization(value);
-                          setShowAllOrganizations(false);
-                          if (value.name === 'Election') {
-                            setShowMaps(true);
-                          } else {
-                            setShowMaps(false);
-                          }
 
-                          // Check if we're on an organization page and, if so, update it to the new organization
-                          if (orgPageMatch !== null) {
-                            if (!tags.find((e) => e.id === value.id)) {
-                              history.push(`/organizations/${value.id}`);
-                            }
+                        // Check if we're on an organization page and, if so, update it to the new organization
+                        if (orgPageMatch !== null) {
+                          if (!tags.find((e) => e.id === value.id)) {
+                            history.push(`/organizations/${value.id}`);
                           }
-                        } else {
-                          setShowAllOrganizations(true);
-                          setShowMaps(false);
                         }
-                      }}
-                      renderInput={(params) => (
-                        <TextField
-                          {...params}
-                          variant="outlined"
-                          inputProps={{
-                            ...params.inputProps,
-                            id: 'autocomplete-input',
-                            autoComplete: 'new-password' // disable autocomplete and autofill
-                          }}
-                        />
-                      )}
-                    />
-                  </>
+                      } else {
+                        setShowAllOrganizations(true);
+                        setShowMaps(false);
+                      }
+                    }}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        variant="outlined"
+                        inputProps={{
+                          ...params.inputProps,
+                          id: 'autocomplete-input',
+                          autoComplete: 'new-password' // disable autocomplete and autofill
+                        }}
+                      />
+                    )}
+                  />
                 )}
                 <IconButton
                   edge="start"
@@ -379,9 +395,15 @@ const HeaderNoCtx: React.FC<ContextType> = (props) => {
         open={drawerOpen}
         onClose={toggleDrawer(false)}
         data-testid="mobilenav"
+        PaperProps={{
+          sx: {
+            backgroundColor: 'primary.main',
+            color: 'white'
+          }
+        }}
       >
         <List className={classes.mobileNav}>
-          {userItems.map(({ title, path, nested, onClick }) => (
+          {drawerItems.map(({ title, path, nested, onClick }) => (
             <React.Fragment key={title.toString()}>
               {path && (
                 <ListItem

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -74,8 +74,8 @@ const StyledScopedCssBaseline = styled(ScopedCssBaseline)(({ theme }) => ({
     position: 'relative',
     height: '100vh',
     display: 'flex',
-    flexFlow: 'column nowrap',
-    overflow: 'auto'
+    flexFlow: 'column nowrap'
+    // overflow: 'auto'
   },
 
   [`& .${classes.overrides}`]: {

diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
@@ -19,7 +19,7 @@ const Root = styled('div')(({ theme }) => ({
   [`&.${classes.wrapper}`]: {
     zIndex: 101,
     width: '100%',
-    maxWidth: 400,
+    maxWidth: 320,
     backgroundColor: theme.palette.background.paper,
     display: 'flex',
     flexFlow: 'row nowrap',
@@ -87,7 +87,7 @@ interface Props
   initialValue: string;
 }
 
-const defaultPlaceholder = 'Search for a domain, vuln type, port, service, IP';
+const defaultPlaceholder = 'Search a domain, vuln, port, service, IP';
 
 type Timer = ReturnType<typeof setTimeout>;
 

diff --git a/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/header.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Header component matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="css-ckkwiw"
+    class="css-1octzoq"
   >
     <header
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-1twrj82-MuiPaper-root-MuiAppBar-root"
@@ -54,7 +54,7 @@ exports[`Header component matches snapshot 1`] = `
             class="Header-spacing"
           />
           <div
-            class="SearchBar-wrapper css-6woq0m"
+            class="SearchBar-wrapper css-yro7sz"
           >
             <div
               class="SearchBar-inner"
@@ -73,7 +73,7 @@ exports[`Header component matches snapshot 1`] = `
               <form>
                 <input
                   class="SearchBar-inp"
-                  placeholder="Search for a domain, vuln type, port, service, IP"
+                  placeholder="Search a domain, vuln, port, service, IP"
                   value=""
                 />
               </form>

diff --git a/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Layout component matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="MuiScopedCssBaseline-root Layout-overrides css-iv8i0z-MuiScopedCssBaseline-root"
+    class="MuiScopedCssBaseline-root Layout-overrides css-dwi7y5-MuiScopedCssBaseline-root"
   >
     <div
       class="Layout-root"

diff --git a/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/searchBar.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="SearchBar-wrapper css-6woq0m"
+    class="SearchBar-wrapper css-yro7sz"
   >
     <div
       class="SearchBar-inner"
@@ -22,7 +22,7 @@ exports[`matches snapshot 1`] = `
       <form>
         <input
           class="SearchBar-inp"
-          placeholder="Search for a domain, vuln type, port, service, IP"
+          placeholder="Search a domain, vuln, port, service, IP"
           value=""
         />
       </form>