From 4d93ddc108ec242979de80bac1f8e4ee22347bdb Mon Sep 17 00:00:00 2001
From: AasthaGithub <aasthamehta2704@gmail.com>
Date: Sun, 1 Nov 2020 00:04:47 +0530
Subject: [PATCH] Structure Init & Navbar

---
 Frontend/atrentalsapp/src/App.js              |  7 +-
 .../src/components/layout/Navbar.js           | 65 +++++++++++++++++++
 .../atrentalsapp/src/components/pages/Home.js | 12 ++++
 .../atrentalsapp/src/components/pages/Rent.js |  0
 4 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 Frontend/atrentalsapp/src/components/layout/Navbar.js
 create mode 100644 Frontend/atrentalsapp/src/components/pages/Home.js
 create mode 100644 Frontend/atrentalsapp/src/components/pages/Rent.js

diff --git a/Frontend/atrentalsapp/src/App.js b/Frontend/atrentalsapp/src/App.js
index 1ae781b..fc175d1 100644
--- a/Frontend/atrentalsapp/src/App.js
+++ b/Frontend/atrentalsapp/src/App.js
@@ -2,13 +2,12 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import Home from "./components/pages/Home";
+
 function App () {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p> Book Renting App</p>
-      </header>
+      <Home/>
     </div>
   );
 }
diff --git a/Frontend/atrentalsapp/src/components/layout/Navbar.js b/Frontend/atrentalsapp/src/components/layout/Navbar.js
new file mode 100644
index 0000000..a067cba
--- /dev/null
+++ b/Frontend/atrentalsapp/src/components/layout/Navbar.js
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  NavbarText
+} from 'reactstrap';
+
+const Example = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen(!isOpen);
+
+  return (
+    <div>
+      <Navbar color="light" light expand="md">
+        <NavbarText>@Rentals</NavbarText>
+        <NavbarToggler onClick={toggle} />
+        <Collapse isOpen={isOpen} navbar>
+          <Nav className="mr-auto" navbar>
+            <NavItem>
+              <NavLink href="/">Rent</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink href="https://github.com/">Lease/ Give</NavLink>
+            </NavItem>
+            <UncontrolledDropdown nav inNavbar>
+              <DropdownToggle nav caret>
+                Books
+              </DropdownToggle>
+              <DropdownMenu right>
+                <DropdownItem>
+                  Latest
+                </DropdownItem>
+                <DropdownItem>
+                  Trending
+                </DropdownItem>
+                <DropdownItem divider />
+                <DropdownItem>
+                  Other Categories
+                </DropdownItem>
+              </DropdownMenu>
+            </UncontrolledDropdown>
+            <NavItem>
+              <NavLink href="/">How this Works</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink href="/">Contact Us</NavLink>
+            </NavItem>
+          </Nav>          
+        </Collapse>
+      </Navbar>
+    </div>
+  );
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/Frontend/atrentalsapp/src/components/pages/Home.js b/Frontend/atrentalsapp/src/components/pages/Home.js
new file mode 100644
index 0000000..762b147
--- /dev/null
+++ b/Frontend/atrentalsapp/src/components/pages/Home.js
@@ -0,0 +1,12 @@
+import React from "react";
+import "../../App.css";
+import Navbar from "../layout/Navbar";
+
+const Home = () => {
+    return (
+      <div>
+        <Navbar />
+    </div>
+    );
+};
+export default Home;        
\ No newline at end of file
diff --git a/Frontend/atrentalsapp/src/components/pages/Rent.js b/Frontend/atrentalsapp/src/components/pages/Rent.js
new file mode 100644
index 0000000..e69de29