feat: add responsive navigation

src/App.tsx

@@ -1,17 +1,18 @@
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
-import { Header } from './components/Header';
-import { Todos } from './components/Todos';
+import { Todos, Header, BottomNavigation } from './components';
 
 const queryClient = new QueryClient();
 
 const App = (): JSX.Element => (
-  <QueryClientProvider client={queryClient}>
+  <div>
     <Header />
-    <Todos />
-
-    <ReactQueryDevtools />
-  </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <Todos />
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+    <BottomNavigation />
+  </div>
 );
 
 export { App };

src/components/BottomNavigation/index.tsx

@@ -0,0 +1,31 @@
+import { ClipboardListIcon, ChartSquareBarIcon, AdjustmentsIcon } from '@heroicons/react/outline';
+
+const BottomNavigation = (): JSX.Element => {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 flex justify-between text-xs text-blue-900 bg-blue-100 md:hidden">
+      <button
+        type="button"
+        className="w-full p-3 text-center transition duration-300 hover:bg-blue-200 hover:text-blue-800"
+      >
+        <ClipboardListIcon className="w-6 h-6 mx-auto mb-1" />
+        Tasks
+      </button>
+      <button
+        type="button"
+        className="w-full p-3 text-center transition duration-300 hover:bg-blue-200 hover:text-blue-800"
+      >
+        <ChartSquareBarIcon className="w-6 h-6 mx-auto mb-1" />
+        Analytics
+      </button>
+      <button
+        type="button"
+        className="w-full p-3 text-center transition duration-300 hover:bg-blue-200 hover:text-blue-800"
+      >
+        <AdjustmentsIcon className="w-6 h-6 mx-auto mb-1" />
+        Settings
+      </button>
+    </nav>
+  );
+};
+
+export { BottomNavigation };

src/components/Header/index.tsx

@@ -1,23 +1,40 @@
-import { SearchIcon } from '@heroicons/react/outline';
-
 const Header = (): JSX.Element => {
   return (
-    <>
-      <h1 className="p-2 font-mono text-center text-white l-0 bg-sky-700">Todo App</h1>
-      <div className="sticky top-0 z-10 flex justify-center bg-sky-700">
-        <div className="relative w-full xs:w-2/3 lg:w-1/2 my-3 mx-1.5">
-          <input
-            className="w-full h-12 px-5 pr-16 text-lg text-black transition border-2 rounded-md focus:outline-none"
-            type="search"
-            name="search"
-            placeholder="Search"
-          />
-          <button type="submit" className="absolute mr-4 right-2 top-3">
-            <SearchIcon className="w-6 h-6 text-black" />
-          </button>
-        </div>
+    <header className="sticky top-0 z-10 bg-sky-700">
+      <div className="flex items-center justify-between p-4">
+        <a className="flex-none mr-auto" href="/">
+          <span className="text-xl font-semibold text-white">Todo App</span>
+        </a>
+
+        <nav className="flex md:items-center md:w-auto">
+          <div className="hidden md:flex">
+            <a className="block mr-4 md:text-white" href="/tasks">
+              Tasks
+            </a>
+            <a className="block mr-4 md:text-white" href="/analytics">
+              Analytics
+            </a>
+            <a className="block mr-4 md:text-white" href="/settings">
+              Settings
+            </a>
+          </div>
+          <div className="flex text-sm">
+            <a
+              className="p-2 ml-2 font-semibold leading-none bg-white border border-gray-100 rounded text-sky-500 hover:border-transparent hover:bg-gray-100"
+              href="/login"
+            >
+              Login
+            </a>
+            <a
+              className="p-2 ml-2 font-semibold leading-none text-gray-100 border rounded border-sky-600 bg-sky-500 hover:border-transparent hover:bg-sky-400"
+              href="/login"
+            >
+              Sign up
+            </a>
+          </div>
+        </nav>
       </div>
-    </>
+    </header>
   );
 };
 

src/components/Todos/index.tsx

@@ -17,7 +17,7 @@ const Todos = (): JSX.Element => {
           page.todos?.map((todo) => (
             <li
               key={todo?.id}
-              className="w-full p-3 mb-3 border rounded-lg xs:w-56 md:w-60 bg-blue-50 border-slate-300"
+              className="w-full p-3 mb-3 border rounded-lg last:mb-20 xs:w-56 md:w-60 bg-blue-50 border-slate-300"
             >
               <h3>Lorem Ipsum</h3>
               <p>{todo?.id}</p>

src/components/index.ts

@@ -0,0 +1,3 @@
+export { Todos } from './Todos';
+export { Header } from './Header';
+export { BottomNavigation } from './BottomNavigation';