From 7b480c51ca74d7dcf89f002c87b1a779d28dd176 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Piku=C5=82a?= <marek@serenitycode.dev>
Date: Sun, 2 Jun 2024 20:46:59 +0200
Subject: [PATCH 1/3] Add optional navbar separator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It cleanly separates the home page sections from the main menu.

Signed-off-by: Marek Pikuła <marek@serenitycode.dev>
---
 exampleSite/config.yaml               | 1 +
 layouts/partials/sections/header.html | 4 ++++
 static/css/header.css                 | 4 ++++
 3 files changed, 9 insertions(+)

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index abfb0e0fb..474b06530 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -112,6 +112,7 @@ params:
     stickyNavBar:
       enable : true
       showOnScrollUp : true
+    enableSeparator: false
     menus:
       disableAbout: false
       disableExperience: false
diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index 72e73b33a..8f5447908 100644
--- a/layouts/partials/sections/header.html
+++ b/layouts/partials/sections/header.html
@@ -139,6 +139,10 @@
                     </li>
                     {{ end }}
 
+                    {{ if and .Site.Menus.main (.Site.Params.navbar.enableSeparator | default false) }}
+                        <li class="nav-item navbar-text"><div class="nav-link nav-link-sep"></div></li>
+                    {{ end }}
+
                     <!-- custom menus from the user -->
                     {{ range .Site.Menus.main }}
                     {{ if .HasChildren }}
diff --git a/static/css/header.css b/static/css/header.css
index 735608b02..32a64b5ec 100644
--- a/static/css/header.css
+++ b/static/css/header.css
@@ -45,6 +45,10 @@ header .nav-link{
 .navbar .nav-link:hover {
     color: var(--primary-color) !important;
 }
+.nav-link.nav-link-sep:after {
+    content: "|";
+    color: var(--text-color) !important;
+}
 
 li > .dropdown-toggle:focus{
     color: var(--primary-color) !important;

From 89597da9a8a86fa78d619d2711cccd3e2697b79a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Piku=C5=82a?= <marek@serenitycode.dev>
Date: Fri, 7 Jun 2024 14:01:38 +0200
Subject: [PATCH 2/3] Fix navbar separator on mobile sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before, the separator stayed as vertical line in mobile orientation.
Now, it's replaced with dropdown separator (i.e., horizontal line).

Signed-off-by: Marek Pikuła <marek@serenitycode.dev>
---
 layouts/partials/sections/header.html | 3 ++-
 static/css/header.css                 | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index 8f5447908..304605758 100644
--- a/layouts/partials/sections/header.html
+++ b/layouts/partials/sections/header.html
@@ -140,7 +140,8 @@
                     {{ end }}
 
                     {{ if and .Site.Menus.main (.Site.Params.navbar.enableSeparator | default false) }}
-                        <li class="nav-item navbar-text"><div class="nav-link nav-link-sep"></div></li>
+                        <li class="nav-item navbar-text d-none d-lg-block d-xl-block"><div class="nav-link nav-link-sep"></div></li>
+                        <div class="dropdown-divider"></div>
                     {{ end }}
 
                     <!-- custom menus from the user -->
diff --git a/static/css/header.css b/static/css/header.css
index 32a64b5ec..0edd6ef59 100644
--- a/static/css/header.css
+++ b/static/css/header.css
@@ -69,6 +69,10 @@ li > .dropdown-toggle:focus{
     background-color: var(--secondary-color) !important;
 }
 
+.dropdown-divider {
+	border-top: 1px solid var(--lt-color-border-dark);
+}
+
 #search {
     border-radius: 1rem !important;
     background-color: var(--secondary-color);

From 08ac7bf6cfeabf1be2002be22216c92e33c7483e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Piku=C5=82a?= <marek@serenitycode.dev>
Date: Fri, 7 Jun 2024 14:03:13 +0200
Subject: [PATCH 3/3] Don't wrap navbar item text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It prevents from separator misalignment in certain screen sizes.

Signed-off-by: Marek Pikuła <marek@serenitycode.dev>
---
 static/css/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/css/header.css b/static/css/header.css
index 0edd6ef59..a1e3439d6 100644
--- a/static/css/header.css
+++ b/static/css/header.css
@@ -34,6 +34,7 @@ header .navbar .navbar-nav a {
 .navbar-text {
     font-size: 16px !important;
     opacity: 0.95;
+    white-space: nowrap;
 }
 header .nav-link{
     transition: none !important;