From f7507ccaea0d9beb614fddd645d39b3d523d6ee3 Mon Sep 17 00:00:00 2001
From: dev sp <dev@siliconpin.com>
Date: Fri, 13 Jan 2023 07:34:38 +0000
Subject: [PATCH] menu responsive dropdown

---
 src/components/MainHeader.astro | 140 ++++++++++++++++++++++++++------
 1 file changed, 115 insertions(+), 25 deletions(-)

diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro
index fa075b8..529680d 100644
--- a/src/components/MainHeader.astro
+++ b/src/components/MainHeader.astro
@@ -1,31 +1,50 @@
-
-<div class="topnav">
-  <a href="#home" class="active">Logo</a>
-  <div id="mobileMenu" class="hidden">
+<div class="hidden md:block">
+  <div class="navbar ">
+    <a href="#home">Home</a>
     <a href="#news">News</a>
-    <a href="#contact">Contact</a>
-    <div class="dropdown">
-      <button class="dropbtn">Dropdown 
-        <i class="fa fa-caret-down"></i>
+    <div class="dropdownDesktop">
+      <button class="dropbtnDesktop">Dropdown 
+        <i class="fa fa-caret-downDesktop"></i>
       </button>
-      <div class="dropdown-content">
+      <div class="dropdown-contentDesktop">
         <a href="#">Link 1</a>
         <a href="#">Link 2</a>
         <a href="#">Link 3</a>
       </div>
     </div> 
-
-    <a href="#about">About</a>
-    <a href="#about">About</a>
-    <a href="#about">About</a>
-    <a href="#about">About</a>
-    
   </div>
-  <a  class="icon" onclick="openMobileMenu()">
-    &#9776;
-  </a>
+</div>  
+
+<div class="mobileTopMenu block md:hidden">
+  <div class="topnavMobile">
+    <a href="#home" class="active">Logo</a>
+    <div id="mobileMenu" class="hidden">
+      <a href="#news">News</a>
+      <a href="#contact">Contact</a>
+      <div class="dropdown">
+        <button class="dropbtn">Dropdown 
+          &#8964
+        </button>
+        <div class="dropdown-content">
+          <a href="#">Link 1</a>
+          <a href="#">Link 2Link 2Link 2</a>
+          <a href="#">Link 3</a>
+        </div>
+      </div> 
+  
+      <a href="#about">About</a>
+      <a href="#about">About</a>
+      <a href="#about">About</a>
+      <a href="#about">About</a>
+      
+    </div>
+    <a  class="icon" onclick="openMobileMenu()">
+      &#9776;
+    </a>
+  </div>
 </div>
 
+
 <script is:inline>
   function openMobileMenu() {
     var element = document.getElementById("mobileMenu");
@@ -34,7 +53,79 @@
 
 </script>
 <style>
- 
+  .navbar {
+  overflow: hidden;
+  background-color: #333;
+  /* position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0; */
+}
+
+.navbar a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdownDesktop {
+  float: left;
+  overflow: hidden;
+}
+
+.dropdownDesktop .dropbtnDesktop {
+  font-size: 16px;  
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
+  background-color: red;
+}
+
+.dropdown-contentDesktop {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-contentDesktop a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-contentDesktop a:hover {
+  background-color: #ddd;
+}
+
+.dropdownDesktop:hover .dropdown-contentDesktop {
+  display: block;
+}
+
+
+
+
+ /* .mobileTopMenu{
+  position: absolute;
+  top:0;
+  left:0;
+  width:100%;
+ } */
 .dropdown:hover .dropdown-content {
   display: block;
   background-color: #ddd;
@@ -45,7 +136,6 @@
 .dropdown-content {
   display: none;
   position: absolute;
-
   z-index: 1;
 }
 
@@ -60,14 +150,14 @@
 
 
 
-.topnav {
+.topnavMobile {
   overflow: hidden;
   background-color: #333;
   position: relative;
 }
 
 
-.topnav a {
+.topnavMobile a, .topnavMobile >div > div {
   color: white;
   padding: 14px 16px;
   text-decoration: none;
@@ -75,7 +165,7 @@
   display: block;
 }
 
-.topnav a.icon {
+.topnavMobile a.icon {
   background: black;
   display: block;
   position: absolute;
@@ -83,13 +173,13 @@
   top: 0;
 }
 
-.topnav a:hover {
+.topnavMobile a:hover {
   background-color: #ddd;
   color: black;
 }
 
 .active {
-  background-color: #04AA6D;
+  background-color: #aa6204;
   color: white;
 }