Merge pull request #689 from Ayushmaanagarwal1211/main

Created a responsive hamburger menu , added animation to it , fixed width , added cross button
SUGAM-ARORA · Aug 8, 2024 · 8e5ad81 · 8e5ad81
2 parents 0791dfa + bc9fb4e
commit 8e5ad81
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/Components/Container.css b/src/Components/Container.css
@@ -105,6 +105,7 @@
 }
 
 .profileContainer {
+  flex-wrap: wrap;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
@@ -211,16 +211,30 @@
   .largeview {
     display: none;
   }
+  @keyframes shortvi {
+      from{
+        height: 0px;
+        opacity: 0;
+      }to{
+        height: 350px;
+        opacity: 0.9;
+      }
+  }
 
   .mobview #shortview {
-    position: absolute;
-    right: 100%;
-    top: 60px;
-    background: rgba(0, 0, 0, 0.8);
+    position: fixed !important;
+  left: 0px;
+  width: 100vw;
+  top: 103px;
+backdrop-filter: blur(100px) !important;
+    overflow: hidden;
+    background: #030022;
+    animation: shortvi 0.4s forwards;
     border-radius: 10px;
     width: 200px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
     z-index: 100000;
+    width: 100vw;
     display: none;
     transition: transform 0.3s cubic-bezier(0.17, 0.81, 0.38, 1.39);
   }
@@ -232,7 +246,6 @@
     height: 10px;
     background: hsl(190, 85%, 40%);
     top: -5px;
-    right: 20px;
     transform: rotate(45deg);
     z-index: 100000;
   }

diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { BiSearchAlt } from "react-icons/bi";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBars, faHome, faInfoCircle, faWrench, faBriefcase, faStar, faUsers, faEnvelope, faQuestionCircle, faNewspaper } from '@fortawesome/fontawesome-free-solid';
+import { faBars, faHome, faInfoCircle, faWrench, faBriefcase, faStar, faUsers, faEnvelope, faQuestionCircle, faNewspaper, faTimes } from '@fortawesome/fontawesome-free-solid';
 import { Link } from 'react-router-dom';
 import { FaBell, FaChevronDown } from "react-icons/fa";
 import women from "../img/women.jpg";
@@ -109,7 +109,7 @@ function TopContainer() {
     <div className="topContainer">
       <div className="navbar">
         <div className="mobview ">
-          <div className="bars" onClick={toggleMenu}><FontAwesomeIcon icon={faBars} /></div>
+          <div className="bars" onClick={toggleMenu}>{mobMenu?<FontAwesomeIcon icon={faTimes}/>:<FontAwesomeIcon icon={faBars} />}</div>
           <div id="shortview" className={mobMenu ? 'show' : ''}>
             <ul className={`${mobMenu ? "open" : "largeview"}`}>
               <li className="nav-item"><a href='/'><FontAwesomeIcon icon={faHome} /> Home</a></li>