Complete responsive navbar React

Dockerfile

@@ -0,0 +1,13 @@
+FROM docker.io/library/node:14.18.1
+
+RUN mkdir /app
+COPY . /app
+WORKDIR /app
+
+RUN npm i jquery --save
+RUN npm install react-screen-orientation --save
+RUN npm install
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

README.md

@@ -2,6 +2,10 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+Add some librabry needed, you need run:
+### `npm i jquery --save`
+### `npm install react-screen-orientation --save`
+
 ## Available Scripts
 
 In the project directory, you can run:

src/Components/Footer/Footer.css

@@ -76,3 +76,18 @@
   width: 100%;
   height: 200px;
 }
+
+/* Mobile: width < 740px */
+@media only screen and (max-width: 46.1875em) {
+  .navbar__right__box__left{
+    color: red;
+  }
+}
+
+/* Tablet: width >= 740px and width < 1024px */
+@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
+  .navbar__right__box__left{
+    color: green;
+  }
+}
+

src/Components/Footer/Footer.js

@@ -33,13 +33,13 @@ function Footer() {
       <div className="Footer_Right">
         <div>
           <span className="Footer_Icon">
-            <i class="fab fa-twitter"></i>
+            <i className="fab fa-twitter"></i>
           </span>
           <span className="Footer_Icon">
-            <i class="fab fa-facebook-square"></i>
+            <i className="fab fa-facebook-square"></i>
           </span>
           <span className="Footer_Icon">
-            <i class="fab fa-linkedin"></i>
+            <i className="fab fa-linkedin"></i>
           </span>
         </div>
         <h3 className="Heading">Subscribe to our Newsletter</h3>

src/Components/Navbar/Navbar.css

@@ -1,11 +1,22 @@
 /* Write your CSS here */
-.Navbar {
+/* .Navbar {
   width: 100%;
   background-color: var(--primary-color);
   height: 120px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+} */
+
+.Navbar{
+  display: flex;
+  width: 100%;
+  /* height:  7.5em; */
+  background-color: var(--primary-color);
+  padding: 10px 0px;
+  justify-content: space-between;
+  align-items: center;
+  /* height: 120px; */
 }
 .logo {
   font-size: 30px;
@@ -50,3 +61,101 @@
   -ms-border-radius: 50px;
   -o-border-radius: 50px;
 }
+
+/* For respositive navbar */
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+}
+
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.topnav a.active {
+  background-color: #04AA6D;
+  color: white;
+}
+
+.topnav .icon {
+  display: none;
+}
+
+/* Mobile & Tablet */
+@media only screen and (max-width: 63.9375em) {
+  .topnav a:not(:first-child) {display: none;}
+  .topnav a.icon {
+    float: right;
+    display: block;
+  }
+
+  .topnav.responsive {
+      position: relative;
+      padding-bottom: 5px;
+  }
+  .topnav.responsive .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+
+}
+/* Mobile: width < 740px */
+@media only screen and (max-width: 46.1875em) {
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: center;
+  }
+
+  .navbar__right__box__right input{
+      padding: 10px 20px;
+  }
+}
+
+/* Tablet: width >= 740px and width < 1024px */
+@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: center;
+  }
+}
+
+@media only screen and (min-width: 46.25em) and (max-width: 63.9375em){
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: center;
+  }
+}
+
+@media only screen and (width: 1024px){
+  .responsive{
+      display: flex;
+      padding: 5px 0px;
+      align-items: center;
+  }
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: center;
+  }
+}

src/Components/Navbar/Navbar.js

@@ -1,26 +1,44 @@
 import React, { Fragment } from "react";
+import { Component } from "react";
 
 import "./Navbar.css";
+import $ from 'jquery'; 
 
-function Navbar() {
-  return (
-    /* Write you HTML components/tags here. */
-    <div className="Navbar">
-      <div className="logo navbar__left">Elixir</div>
-      <div className="navbar_right">
-        <div className="navbar__right__box__left">
-          <div className="link">Home</div>
-          <div className="link">Event</div>
-          <div className="link">Blogs</div>
-          <div className="link">About</div>
-          <div className="link">Contact</div>
-        </div>
-        <div className="navbar__right__box__right">
-          <input type="search" placeholder="search" />
-        </div>
+class Navbar extends Component {
+  hideMenu() {
+    var x = document.getElementById("myTopnav");
+    if (x.className === "topnav Navbar") {
+      x.className = "topnav";
+      x.className += " responsive";
+      $(".navbar__right__box__right").css({"width": "100%"});
+      $(".navbar__right__box__right input").css({"width": "50%"});
+    } else {
+      x.className = "topnav Navbar";
+      $(".navbar__right__box__right").css({"width": "40%"});
+      $(".navbar__right__box__right input").css({"width": "80%"});
+    }
+  }
+  render() {
+    window.screen.orientation.onchange = function(e) { console.log('hello') }
+    return (
+      <div className="topnav Navbar" id="myTopnav">
+          <div className="logo navbar__left">Elixir</div>
+          <a href="#home" className="active link">Home</a>
+          <a href="#event" className="link">Event</a>
+          <a href="#blogs" className="link">Blogs</a>
+          <a href="#about" className="link">About</a>
+          <a href="#contact" className="link">Contact</a>
+          <a href="#" className="icon" onClick={this.hideMenu}>
+            <i className="fa fa-bars"></i>
+          </a>
+          <div className="navbar__right__box__right">
+             <input type="search" placeholder="search" />
+          </div>
       </div>
-    </div>
-  );
+
+    );
+  }
+
 }
 
 export default Navbar;