feat: improve website header layout (#425)

Author: f-hollow

config/_default/languages.cs.toml

@@ -8,8 +8,6 @@ title = "Developer Portal"
   isoCode = "cs"
   rtl = false
   dateFormat = "2 January 2006"
-  logo = "img/espressif_logo_contour.png"
-  # secondaryLogo = "PATH"
   description = "The developer resources in just one place!"
   # copyright = "Copy, _right?_ :thinking_face:"
 
@@ -25,4 +23,4 @@ title = "Developer Portal"
     { facebook = "https://www.facebook.com/espressif/" },
     { linkedin = "https://www.linkedin.com/company/espressif-systems/" },
     { github = "https://github.com/espressif" },
-  ]
+  ]

config/_default/languages.en.toml

@@ -1,15 +1,13 @@
 languageCode = "en"
 languageName = "English"
 weight = 1
-title = "Espressif Developer Portal"
+title = "Developer Portal"
 
 [params]
   displayName = "EN"
   isoCode = "en"
   rtl = false
   dateFormat = "2 January 2006"
-  logo = "img/espressif_logo_contour.png"
-  # secondaryLogo = "PATH"
   description = "The developer resources in just one place!"
   # copyright = "Copy, _right?_ :thinking_face:"
 

config/_default/params.toml

@@ -17,6 +17,7 @@ mainSections = ["blog"]
 
 disableImageOptimization = false
 disableTextInHeader = false
+logo = "img/espressif_logo_contour.png"
 
 # defaultBackgroundImage = "/img/ocean.jpg"
 # defaultFeaturedImage = "/img/ocean.jpg"

layouts/partials/header/basic.html

@@ -1,5 +1,6 @@
 <div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
-    class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+    class="main-menu flex flex-wrap items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+
     {{ if .Site.Params.Logo }}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
@@ -18,7 +19,8 @@
     </div>
     {{ end }}
     {{- end }}
-    <div class="flex flex-1 items-center justify-between">
+
+    <div class="flex flex-1 items-center justify-between w-full md:w-auto">
         <nav class="flex space-x-3">
 
             {{ if not .Site.Params.disableTextInHeader | default true }}
@@ -62,9 +64,10 @@
             {{ end }}
 
         </nav>
-        <div class="flex md:hidden items-center space-x-5 md:ml-12">
+    </div>
 
-            <span></span>
+    <div class="w-full flex flex-wrap justify-between md:hidden mt-2 space-y-2">
+        <div class="flex items-center space-x-5 ml-auto">
 
             {{ partial "translations.html" . }}
 
@@ -87,63 +90,59 @@
             </button>
             {{ end }}
 
-        </div>
-    </div>
-    <div class="-my-2 -mr-2 md:hidden">
-
-        <label id="menu-button" class="block">
-            {{ if .Site.Menus.main }}
-            <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
-                {{ partial "icon.html" "bars" }}
-            </div>
-            <div id="menu-wrapper" style="padding-top:5px;"
-                class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
-                <ul
-                    class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl menu-ul">
-
-                    <li id="menu-close-button">
-                        <span
-                            class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400 menu-close">{{
-                            partial
-                            "icon.html"
-                            "xmark" }}</span>
-                    </li>
-
-                    {{ range .Site.Menus.main }}
-
-                    {{ partial "header/header-mobile-option.html" . }}
-
-                    {{ end }}
-
-                </ul>
-                {{ if .Site.Menus.subnavigation }}
-                <hr>
-                <ul
-                    class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
-
-
-                    {{ range .Site.Menus.subnavigation }}
-                    <li class="mb-1">
-                        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-                            ) }} target="_blank" {{ end }} class="flex items-center">
-                            {{ if .Pre }}
-                            <span {{ if and .Pre .Name}} class="mr-3" {{ end }}>
-                                {{ partial "icon.html" .Pre }}
+            <label id="menu-button" class="block">
+                {{ if .Site.Menus.main }}
+                <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+                    {{ partial "icon.html" "bars" }}
+                </div>
+                <div id="menu-wrapper" style="padding-top:5px;"
+                    class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
+                    <ul
+                        class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl menu-ul">
+
+                        <li id="menu-close-button">
+                            <span
+                                class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400 menu-close">{{
+                                partial "icon.html" "xmark" }}
                             </span>
-                            {{ end }}
-                            <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
-                                {{ .Name | markdownify | emojify }}
-                            </p>
-                        </a>
-                    </li>
+                        </li>
+
+                        {{ range .Site.Menus.main }}
+
+                        {{ partial "header/header-mobile-option.html" . }}
+
+                        {{ end }}
+
+                    </ul>
+                    {{ if .Site.Menus.subnavigation }}
+                    <hr>
+                    <ul
+                        class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+
+
+                        {{ range .Site.Menus.subnavigation }}
+                        <li class="mb-1">
+                            <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+                                ) }} target="_blank" {{ end }} class="flex items-center">
+                                {{ if .Pre }}
+                                <span {{ if and .Pre .Name}} class="mr-3" {{ end }}>
+                                    {{ partial "icon.html" .Pre }}
+                                </span>
+                                {{ end }}
+                                <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                                    {{ .Name | markdownify | emojify }}
+                                </p>
+                            </a>
+                        </li>
+                        {{ end }}
+
+                    </ul>
+                    {{ end }}
                     {{ end }}
 
-                </ul>
-                {{ end }}
-                {{ end }}
-
-            </div>
-        </label>
+                </div>
+            </label>
+        </div>
     </div>
 </div>