Merge pull request #44 from TartejBrothers/Updates

Updated: Expertise

src/components/designs.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import "./styles/designs.css";
 import left1 from "./assests/designs/left1.png";
 import left2 from "./assests/designs/left2.png";

src/components/home.jsx

@@ -1,11 +1,25 @@
-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import "./styles/home.css";
 import "./styles/style.css";
+import "./styles/dropdown.css";
 import logo from "./assests/icons/logo.png";
 import arrow from "./assests/icons/arrow.png";
 import griplines from "./assests/icons/griplines.svg";
+import cross from "./assests/icons/cross.svg";
+import home from "./assests/icons/home.svg";
+import info from "./assests/icons/info.svg";
+import mic from "./assests/icons/mic.svg";
+import portfolionav from "./assests/icons/portfolionav.svg";
+import reviewsnav from "./assests/icons/reviewsnav.svg";
+import servicesnav from "./assests/icons/servicesrocket.svg";
 
 export default function Home() {
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+
+  const toggleDropdown = () => {
+    setDropdownVisible(!dropdownVisible);
+  };
+
   return (
     <div>
       <div className="homemain">
@@ -28,11 +42,52 @@ export default function Home() {
               </li>
             </ul>
           </div>
-          <div className="navrightmobile">
+          <div className="navrightmobile" onClick={toggleDropdown}>
             <img src={griplines} alt="Open Menu" />
           </div>
         </div>
 
+        <div className={dropdownVisible ? "dropdown show" : "dropdown"}>
+          <div className="navbar">
+            <div className="navleft">
+              <img src={logo} alt="logo" />
+              <p>
+                <span className="colorChange">ADVAL</span> STUDIOS
+              </p>
+            </div>
+
+            <div className="navrightmobile" onClick={toggleDropdown}>
+              <img src={cross} alt="Open Menu" />
+            </div>
+          </div>
+          <ul className="navrightmobiledrop">
+            <li>
+              <img src={home} alt="Navigation Items" />
+              Home
+            </li>
+            <li>
+              <img src={servicesnav} alt="Navigation Items" />
+              Services
+            </li>
+            <li>
+              <img src={portfolionav} alt="Navigation Items" />
+              Portfolio
+            </li>
+            <li>
+              <img src={reviewsnav} alt="Navigation Items" />
+              Reviews
+            </li>
+            <li>
+              <img src={mic} alt="Navigation Items" />
+              About
+            </li>
+            <li>
+              <img src={info} alt="Navigation Items" />
+              About
+            </li>
+          </ul>
+        </div>
+
         <div className="homecenter">
           <h1 className="desktoponly">
             Building <span className="colorYellow">Your Brand</span> with You,

src/components/styles/dropdown.css

@@ -0,0 +1,43 @@
+.dropdown {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  padding: 20px;
+  background-color: black;
+  color: white;
+  z-index: 10;
+  transition: transform 0.5s ease-in-out;
+  transform: translateY(-100%);
+}
+
+.dropdown.show {
+  transform: translateY(0);
+}
+
+.dropdown .navbar {
+  height: 10vh;
+}
+
+.navrightmobiledrop {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 10vh);
+}
+.navrightmobiledrop li {
+  display: flex;
+  gap: 20px;
+  font-size: 20px;
+  padding: 20px;
+
+  width: 100%;
+}
+
+@media screen and (min-width: 1000px) {
+  .dropdown {
+    display: none;
+  }
+}

src/components/styles/expertisecomponent.css

@@ -51,7 +51,7 @@
 }
 .rightexpertisebottom {
   position: absolute;
-  top: -20px;
+  top: -40px;
   left: calc(80% - 180px);
   width: 100%;
   font-weight: 800;