mobile navbar improvements

src/components/Navbar/Navbar.style.tsx

@@ -1,9 +1,11 @@
 import styled from '@emotion/styled'
 
-import { Searchbar, Icon } from '@/shared/components'
+import { Icon, Searchbar } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
 import { ReactComponent as UnstyledLogo } from '@/assets/logo.svg'
 
+const BREAKPOINT = '600px'
+
 type NavbarStyleProps = {
   hasFocus: boolean
 }
@@ -16,18 +18,28 @@ export const Logo = styled(UnstyledLogo)`
 export const NavigationContainer = styled.div`
   display: flex;
   align-items: center;
+  margin-right: ${sizes.b3}px;
+
   > * + * {
-    margin-left: ${sizes.b6}px;
+    margin-left: ${sizes.b3}px;
+    @media screen and (min-width: ${BREAKPOINT}) {
+      margin-left: ${sizes.b6}px;
+    }
   }
 `
 
 export const StyledSearchbar = styled(Searchbar)`
-  transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  will-change: width;
+  transition: max-width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  will-change: max-width;
 `
 export const SearchbarContainer = styled.div`
   display: flex;
   justify-content: center;
+  align-items: center;
+
+  justify-self: center;
+  width: 100%;
+  max-width: 1156px;
 `
 export const StyledIcon = styled(Icon)`
   color: ${colors.gray[300]};
@@ -39,14 +51,20 @@ export const StyledIcon = styled(Icon)`
 
 export const Header = styled.header<NavbarStyleProps>`
   display: grid;
-  grid-template-columns: 1fr 3fr 1fr;
   width: 100%;
-  padding: ${(props) => (props.hasFocus ? `${sizes.b2}px` : `${sizes.b3}px ${sizes.b8}px`)};
+
+  grid-template-columns: ${({ hasFocus }) => (hasFocus ? '1fr' : '1fr 2fr')};
+  padding: ${(props) => (props.hasFocus ? `${sizes.b2}px` : `${sizes.b2}px ${sizes.b4}px`)};
+  @media screen and (min-width: ${BREAKPOINT}) {
+    grid-template-columns: ${({ hasFocus }) => (hasFocus ? '1fr' : '1fr 2fr 1fr')};
+    padding: ${(props) => (props.hasFocus ? `${sizes.b2}px` : `${sizes.b3}px ${sizes.b8}px`)};
+  }
   border-bottom: 1px solid ${colors.gray[800]};
   background-color: ${(props) => (props.hasFocus ? colors.gray[900] : colors.black)};
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 
   ${StyledSearchbar} {
-    width: ${(props) => (props.hasFocus ? '1156px' : '385px')};
+    width: 100%;
+    max-width: ${(props) => (props.hasFocus ? '100%' : '385px')};
   }
 `

src/components/Navbar/Navbar.tsx

@@ -36,21 +36,19 @@ const Navbar: React.FC<NavbarProps> = () => {
   }
   return (
     <Header hasFocus={isFocused}>
-      <div>
-        {!isFocused && (
-          <NavigationContainer>
-            <Link to="/">
-              <Logo />
-            </Link>
-            <Link to="/">
-              <StyledIcon name="home" />
-            </Link>
-            <Link to={routes.browse()}>
-              <StyledIcon name="binocular" />
-            </Link>
-          </NavigationContainer>
-        )}
-      </div>
+      {!isFocused && (
+        <NavigationContainer>
+          <Link to="/">
+            <Logo />
+          </Link>
+          <Link to="/">
+            <StyledIcon name="home" />
+          </Link>
+          <Link to={routes.browse()}>
+            <StyledIcon name="binocular" />
+          </Link>
+        </NavigationContainer>
+      )}
       <SearchbarContainer>
         <StyledSearchbar
           placeholder="Search..."
@@ -59,6 +57,7 @@ const Navbar: React.FC<NavbarProps> = () => {
           onKeyDown={handleKeyPress}
           onFocus={handleFocus}
           onCancel={handleCancel}
+          showCancelButton={isFocused}
           controlled
         />
       </SearchbarContainer>

src/shared/components/Searchbar/Searchbar.style.tsx

@@ -4,11 +4,16 @@ import Button from '../Button'
 
 export const Input = styled.input`
   width: 100%;
+  height: 100%;
   border: unset;
   padding: 14px ${sizes.b3}px;
-  height: ${sizes.b12}px;
   background-color: ${colors.gray[800]};
   color: ${colors.white};
+
+  // override mobile Safari user agent styling
+  border-radius: 0;
+  -webkit-appearance: none;
+
   ::placeholder {
     color: ${colors.gray[400]};
   }

src/shared/components/Searchbar/Searchbar.tsx

@@ -4,6 +4,7 @@ import { Input, CancelButton, Container } from './Searchbar.style'
 type SearchbarProps = {
   value: string
   onCancel?: () => void
+  showCancelButton?: boolean
   controlled?: boolean
 } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement>
 const Searchbar: React.FC<SearchbarProps> = ({
@@ -11,10 +12,12 @@ const Searchbar: React.FC<SearchbarProps> = ({
   onChange,
   onFocus,
   onCancel,
+  showCancelButton = false,
   controlled = false,
   value: externalValue,
   onBlur,
   onSubmit,
+  className,
   ...htmlProps
 }) => {
   const [value, setValue] = useState('')
@@ -36,9 +39,8 @@ const Searchbar: React.FC<SearchbarProps> = ({
     }
   }
 
-  const hasValue = value !== '' || externalValue !== ''
   return (
-    <Container>
+    <Container className={className}>
       <Input
         value={controlled ? externalValue : value}
         placeholder={placeholder}
@@ -50,7 +52,7 @@ const Searchbar: React.FC<SearchbarProps> = ({
         onSubmit={onSubmit}
         {...htmlProps}
       />
-      {hasValue && <CancelButton onClick={handleCancel} variant="tertiary" icon="times" size="smaller" />}
+      {showCancelButton && <CancelButton onClick={handleCancel} variant="tertiary" icon="times" size="smaller" />}
     </Container>
   )
 }