Added: dropdown menu

sanjayrathva091 · Sep 29, 2022 · 2203da7 · 2203da7
1 parent 2332aea
commit 2203da7
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 23 deletions.
diff --git a/optimizely-cloned-project/src/App.css b/optimizely-cloned-project/src/App.css
@@ -1,33 +1,37 @@
 .App {
   text-align: center;
+  margin: 0;
+  padding: 0;
 }
 /* * navbar styles * */
 .main-navbar {
   padding: 21px 100px;
-  font-size: 15px;
+  font-size: 14px;
   font-family: 'Raleway', sans-serif;
   box-sizing: border-box;
 }
 
 .menu01, .menu02 {
   height: 32px;
+  list-style: none;
+  padding: 0;
 }
 
-.menu01 > div+div {
+.menu01 > li+li {
   display: flex;
   align-items: center;
   height: 100%;
   padding: 20px 0;
 }
 
-.menu01 > div+div:hover {
+.menu01 > li+li:hover {
   color: blue;
   border-top: 4px solid white;
   border-bottom: 4px solid blue;
   cursor: pointer;
 }
 
-.menu02 > div:first-child:hover {
+.menu02 > li:first-child:hover {
   color: blue;
   cursor: pointer;
 }
@@ -41,6 +45,7 @@
 
 .login-style, .search-style {
   padding: 20px 0;
+  position: relative;
 }
 
 .search-style > span, .login-style > span {
@@ -50,6 +55,39 @@
   align-items: center;
 }
 
+.login-style > ul {
+  position: absolute;
+  top: 67px;
+  right: 0;
+  left: -180px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  list-style: none;
+  text-align: start;
+  flex-direction: column;
+  padding: 10px 20px;
+  color: black;
+}
+
+.login-style > ul li {
+  padding: 13px 5px;
+  font-family: 'Raleway', sans-serif;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  transition: all 0.2s linear;
+}
+
+.login-style > ul li+li {
+  font-weight: bold;
+  font-size: 16px;
+  color: blue;
+}
+
+.login-style > ul li+li:hover {
+  color: black;
+  gap: 35px;
+}
+
 .menu02 button {
   width: 140px;
   height: 45px;

diff --git a/optimizely-cloned-project/src/components/Navbar.jsx b/optimizely-cloned-project/src/components/Navbar.jsx
@@ -1,35 +1,71 @@
+import { useEffect, useState } from "react";
+
 const Navbar = () => {
+  const [drop, setDrop] = useState(false);
+
+  const handleLoginStyle = () => {
+    setDrop(!drop);
+  };
+
+  useEffect(() => {
+    if (drop) {
+      document.querySelector(".login-style ul").style.display = "flex";
+    } else {
+      document.querySelector(".login-style ul").style.display = "none";
+    }
+  }, [drop]);
+
   return (
     <div>
       <div className="main-navbar">
-        <div className="menu01">
-          <div className="main-logo">
+        <ul className="menu01">
+          <li className="main-logo">
             <img
               src="https://www.optimizely.com/globalassets/02.-global-images/navigation/optimizely_logo_navigation.svg"
               alt="main-logo"
             />
-          </div>
-          <div>Products</div>
-          <div>Plans</div>
-          <div>Resources</div>
-          <div>Partners</div>
-        </div>
-        <div className="menu02">
-          <div>Support</div>
-          <div className="search-style">
+          </li>
+          <li>Products</li>
+          <li>Plans</li>
+          <li>Resources</li>
+          <li>Partners</li>
+        </ul>
+        <ul className="menu02">
+          <li>Support</li>
+          <li className="search-style">
             <span>
-              <span class="material-symbols-rounded">search</span>Search
+              <span className="material-symbols-rounded">search</span>Search
             </span>
-          </div>
-          <div className="login-style">
+          </li>
+          <li className="login-style" onClick={handleLoginStyle}>
             <span>
-              <span class="material-symbols-rounded">account_circle</span>Login
+              <span className="material-symbols-rounded">account_circle</span>
+              Login
             </span>
-          </div>
-          <div>
+            <ul>
+              <li>Where to?</li>
+              <li>
+                Experimentation{" "}
+                <span class="material-symbols-rounded">east</span>
+              </li>
+              <li>
+                Welcome<span class="material-symbols-rounded">east</span>
+              </li>
+              <li>
+                Email Campaign<span class="material-symbols-rounded">east</span>
+              </li>
+              <li>
+                Data Problem<span class="material-symbols-rounded">east</span>
+              </li>
+              <li>
+                Partners<span class="material-symbols-rounded">east</span>
+              </li>
+            </ul>
+          </li>
+          <li>
             <button>Get started</button>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
     </div>
   );