Fix Navbar responsiveness

recipes/src/components/Navbar/index.tsx

@@ -5,7 +5,7 @@ import '@rmwc/button/styles';
 import './styles.scss';
 
 type NavbarProps = {
-  title: string,
+  title?: string,
   actions?: {
     label: string,
     onClick: () => void,
@@ -16,9 +16,11 @@ type NavbarProps = {
 export default function Navbar(props: NavbarProps){
   return (
     <div className='cbk-navbar'>
-      <div>
-        <h4>{props.title}</h4>
-      </div>
+      {props.title && (
+        <div>
+          <h4>{props.title}</h4>
+        </div>
+      )}
       {
         props.actions ? (
           <div>

recipes/src/components/Navbar/styles.scss

@@ -5,12 +5,13 @@
   margin: $spacing-regular 0;
   padding: $spacing-regular;
   display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 
   &__content {
-    flex-basis: 75%;
+    flex: 1 1 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -19,4 +20,14 @@
       margin-right: $spacing-regular;
     }
   }
+
+  @media screen and (max-width: 592px) {
+    flex-direction: column;
+    padding: 1rem;
+    margin: 0;
+
+    &__content {
+      width: 100%;
+    }
+  }
 }

recipes/src/containers/Recipes/List/index.tsx

@@ -168,32 +168,34 @@ class RecipeList extends Component<RecipeListProps, RecipeListState> {
     const {data, selectedRecipe, isFetching, changeLayout } = this.props;
     return(
       <div className='cbk-recipes-list'>
-        <Navbar
-          title="Recipes"
-        >
-          <Input
-            value={this.state.search}
-            label='search'
-            onChange={(e) => this.changeQuery(e.currentTarget.value)}
-            button={{
-              icon: 'clear',
-              onClick: () => this.changeQuery('')
-            }}
-            className='cbk-recipes-list__search'
-          />
-          <Link to='/recipes/create'>
-            <Button unelevated>
-              Create Recipe
-            </Button>
-          </Link>
-          <div style={{display: 'flex'}}>
-            {
-              this.layoutButtons.map(({icon, layout}) => {
-                return (
-                  <Button icon={icon} key={icon} onClick={() => {changeLayout(layout)} } active={layout === this.props.layout}></Button>
-                );
-              })
-            }
+        <Navbar>
+          <div className='cbk-recipes-list__navbar'>
+            <div className='cbk-recipes-list__navbar__actions'>
+              <Input
+                value={this.state.search}
+                label='search'
+                onChange={(e) => this.changeQuery(e.currentTarget.value)}
+                button={{
+                  icon: 'clear',
+                  onClick: () => this.changeQuery('')
+                }}
+                className='cbk-recipes-list__navbar__actions__search'
+              />
+            </div>
+            <div className='cbk-recipes-list__navbar__layout'>
+              {
+                this.layoutButtons.map(({icon, layout}) => {
+                  return (
+                    <Button icon={icon} key={icon} onClick={() => {changeLayout(layout)} } active={layout === this.props.layout}></Button>
+                  );
+                })
+              }
+              <Link to='/recipes/create'  className='cbk-recipes-list__navbar__actions__create'>
+                <Button unelevated>
+                  Create Recipe
+                </Button>
+              </Link>
+            </div>
           </div>
         </Navbar>
         {

recipes/src/containers/Recipes/List/styles.scss

@@ -1,12 +1,28 @@
 @import 'styles/_variables.scss';
 
 .cbk-recipes-list {
-  .cbk-navbar {
-    padding: $spacing-small $spacing-large;
-  }
-  &__search {
-    flex-basis: 30%;
-    padding-right: $spacing-regular;
+
+  &__navbar {
+    display: flex;
+    flex-direction:  column;
+    flex: 1 1 auto;
+
+    &__actions {
+      display: flex;
+      gap: 1rem;
+
+      .cbk-light-input {
+        margin-bottom: 0.5rem;
+      }
+    }
+    &__layout {
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 100%;
+    }
+
   }
   
   .cbk-recipes-list__results {