feat: ✨ #1 working on nav-bar

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.4.5",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.0",
+    "node": "16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^2.1.3",
@@ -35,5 +37,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   }
 }

src/App.js

@@ -5,6 +5,8 @@ import Footer from './components/footer/Footer';
 import Carousel from './components/Carousel';
 import CardContainer from './components/CardContainer';
 import RowContainer from './components/RowContainer';
+import NavBar from './components/NavBar';
+import SearchBar from './components/SearchBar';
 
 function App() {
 
@@ -23,6 +25,8 @@ function App() {
 
   return (
     <div>
+      <SearchBar/>
+      <NavBar/>
       <Carousel />
       <CardContainer />
       <RowContainer heading="Top Sellers in Books for you" imgUrls={booksImgUrls} />

src/components/NavBar.js

@@ -1,7 +1,34 @@
 import React from 'react'
+import '../styles/navbar.css'
 
 export default function NavBar() {
     return (
-        <div>NavBar</div>
+        <div className='nav-bar-container'>
+        <ul className='nav-bar'>
+            <li className='nav-bar-item' >
+                <a href='#' style = {{display: 'flex'}}>
+                    <div>
+                        <i className='ti-menu' style = {{paddingRight: '6px'}}></i>
+                    </div>
+                    All
+                </a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Today's Deals</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Customer Service</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Registry</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Gift Cards</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Sell</a>
+            </li>
+        </ul>
+        </div>
     )
 }

src/index.css

@@ -1,3 +1,10 @@
+@import '/styles/navbar.css';
+@import '/styles/searchbar.css';
+
+@import './styles/themify-icons/themify-icons.css';
+
+
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +18,5 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+

src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>

src/index.scss

@@ -0,0 +1 @@
+@import './styles/navbar.scss';

src/styles/navbar.css

@@ -0,0 +1,40 @@
+.nav-bar-container {
+    background-color: #232f3e;
+    height: 39px;
+    width: 100%;
+
+}
+
+.nav-bar {
+    height: 100%;
+    padding-left: 15px;
+
+    display: flex;
+    flex-direction: row;
+
+    list-style: none;
+
+    font-size: 14px;
+}
+
+.nav-bar-item {
+    align-self: center;
+    display: block;
+
+}
+
+.nav-bar-item a {
+    display: inline-block;
+    color: #fff;
+    text-decoration: none;
+
+    padding: 2px 11px;
+    margin : 5px 0 6px;
+
+}
+
+.nav-bar-item a:hover {
+    border: solid 1px #fff;
+}
+
+