Merge pull request #644 from Utsavladia/navbar-mobile

Fixed the navbar for mobile sccreen
SUGAM-ARORA · Aug 2, 2024 · 7cf52e5 · 7cf52e5
2 parents 6d2f14e + dd6ab8a
commit 7cf52e5
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 23 deletions.
diff --git a/src/Components/Container.css b/src/Components/Container.css
@@ -30,9 +30,6 @@
   padding-right: 20px;
 }
 .searchbtn{
-  position: absolute;
-  top: 15px;
-  left: 10px;
   color: white;
   font-size: 22px;
   cursor: pointer;

diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
@@ -11,8 +11,8 @@
   color: white; /* Optional: Change text color for better contrast */
 }
 .navbar {
-  width: 1533px;
-  height: 60px;
+  width: 100%;
+  height: auto;
   background: #19162c;
   display: flex;
   flex-direction: row;
@@ -54,7 +54,24 @@
 
 .inputBox {
   position: relative;
-  margin-top: -10px;
+}
+
+.o1 { order: 1; }
+.o2 { order: 2; }
+.o3 { order: 3; }
+
+.input-div{
+  display: flex;
+  width: 100%;
+  justify-content: start;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.container .inputBox input{
+  padding: 0.5rem 2rem;
+
+
 }
 
 @media screen and (max-width: 1500px) {
@@ -73,10 +90,6 @@
 }
 
 .searchbtn {
-  position: absolute;
-  top: 70%;
-  right: 10px;
-  transform: translateY(-50%);
   color: #757380;
   font-size: 1.5rem;
 }
@@ -197,10 +210,47 @@
   }
 }
 
-@media (max-width: 525px) {
-  .navbar {
-    flex-direction: column;
+
+
+@media (max-width: 525px){
+  .navbar{
+    flex-direction: row;
+    flex-wrap: wrap;
     height: min-content;
-    gap: 20px;
+    gap: 1rem;
+    margin-left: 0;
+    border-radius: 1rem;
+    padding: 1rem;
+    width: 100%;
+  }
+  .o1 { order: 1; }
+  .o2 { order: 3; }
+  .o3 { order: 2; }
+
+  .topContainer .inputBox{
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding: 0px;
+  }
+  .container .inputBox input{
+    padding: 0.5rem;
+
+
+  }
+  .profileContainer .go-pro-btn{
+    padding: 0.5rem 1rem;
+  }
+  .bars{
+    padding: 1rem;
+  }
+
+
+  .searchbtn{
+    position: relative;
+    width: auto;
+
   }
 }
diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
@@ -121,7 +121,7 @@ function TopContainer() {
           <li className="nav-item" style={{ marginRight: "10px" }}><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>
         </ul>
 
-        <div className="mobview">
+        <div className="mobview o1">
           <div className="bars" onClick={toggleMenu}><FontAwesomeIcon icon={faBars} /></div>
           <div id="shortview" className={mobMenu ? 'show' : ''}>
             <ul className="open">
@@ -138,16 +138,21 @@ function TopContainer() {
           </div>
         </div>
 
-        <div className="inputBox" style={{ marginRight: "30px" }}>
+        <div className="inputBox o2">
+          <div className="input-div">
+          <i style={{ cursor: isMobile ? 'pointer' : 'default' }} onClick={searchbtnclick} className="searchbtn">
+            <BiSearchAlt />
+          </i>
+
           <input
             ref={searchbar}
             type="text"
             placeholder="Search projects, users"
             onChange={(e) => setInput(e.target.value)}
           />
-          <i style={{ cursor: isMobile ? 'pointer' : 'default' }} onClick={searchbtnclick} className="searchbtn">
-            <BiSearchAlt />
-          </i>
+          </div>
+
+
           {searchResult ? (
             <div id="search_results">
               {searchResult.map((item, index) => (
@@ -164,10 +169,11 @@ function TopContainer() {
           ) : null}
         </div>
 
-        <div className="profileContainer" >
-        <a href="/pricing">
-    <button className="go-pro-btn" style={{ marginRight: "55px" }}>Go Pro</button>
-  </a>
+        <div className="profileContainer o3" >
+          <a href="/pricing">
+            <button className="go-pro-btn">Go Pro</button>
+          </a>
+
 
           <div className="notification-container"  style={{ gap: "10px" }} ref={dropdownRef}>
             <div className="profileIcon" onClick={toggleDropdown}>