From 5a189b1ea9a843d09e3c0d6ee114bbb19b88a6c7 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Thu, 8 Aug 2024 22:45:05 +0530
Subject: [PATCH] Fixed Responsive

---
 src/Components/Container.css    |  1 +
 src/Components/TopContainer.css | 23 ++++++++++++++++++-----
 src/Components/TopContainer.js  |  4 ++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/Components/Container.css b/src/Components/Container.css
index 40da8878..b2913400 100644
--- 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
index 38b05b03..5770eda3 100644
--- 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
index 96c933d8..473fe4a3 100644
--- 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>