From 910889fb4177ffcfd2283911985421ff2ed1727b Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Tue, 8 Aug 2023 18:40:58 +0500
Subject: [PATCH] nav-menu: improve mobile screen styling

---
 parts/nav-menu.html | 10 ++++----
 style.css           | 58 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/parts/nav-menu.html b/parts/nav-menu.html
index 048f143..9a7d591 100644
--- a/parts/nav-menu.html
+++ b/parts/nav-menu.html
@@ -1,11 +1,11 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"30%"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-top:0px;padding-right:30%">
-  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"88px","left":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
-  <div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:88px;padding-left:0">
+<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"className":"nav-menu","layout":{"type":"default"}} -->
+<div class="wp-block-group nav-menu">
+  <!-- wp:group {"className":"logo-wrapper","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+  <div class="wp-block-group logo-wrapper">
     <!-- wp:image {"id":411,"width":64,"sizeSlug":"full","linkDestination":"none"} -->
     <figure class="wp-block-image size-full is-resized"><img
         src="https://autonomic.zone/wp-content/uploads/2023/05/monsterpink.png" alt="" class="wp-image-411"
-        width="64" /></figure>
+        style="width:64px" width="64" /></figure>
     <!-- /wp:image -->
   </div>
   <!-- /wp:group -->
diff --git a/style.css b/style.css
index 8ee5922..1cd9038 100644
--- a/style.css
+++ b/style.css
@@ -91,4 +91,62 @@ html, body {
 
 .wp-site-blocks .footer {
   height: 100%;
+}
+
+.nav-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo-wrapper {
+  width: 32px;
+}
+
+.wp-site-blocks .wp-block-group:nth-child(1) .nav-menu {
+  padding-top: 0 !important;
+}
+
+.wp-site-blocks .wp-block-group:nth-child(1) .logo-wrapper {
+  padding-top: 0 !important;
+}
+
+@media screen and (max-width: 782px){
+  .nav-menu {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .wp-site-blocks .wp-block-group:nth-child(1) {
+    padding-top: 24px !important;
+  }
+}
+
+@media screen and (min-width: 600px){
+  .nav-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+    display: none;
+  }
+  
+  .nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
+    display: inherit;
+  }
+}
+
+@media screen and (min-width: 782px){
+  .nav-menu {
+    display: block;
+    padding-right: 30%;
+  }
+  .nav-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
+    display: block;
+  }
+
+  .nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
+    display: none;
+  }
+
+  .logo-wrapper {
+    padding-bottom: 88px;
+    width: inherit;
+  }
 }
\ No newline at end of file