feat: sticky navbar with default to false

see #6
tomowang · Dec 15, 2023 · 9a6e99f · 9a6e99f
1 parent f764d62
commit 9a6e99f
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ For advanced usage, please refer to config directory `config/_default` and
 Some of the configuration options are:
 
  * `markup`: goldmark and options for markdown rendering
- * `params.header`: header settings (logo for now)
+ * `params.header`: header settings (logo and sticky navbar)
  * `params.footer`: footer settings (copyright years, powered by, etc.)
  * `contentTypeName`: dir name of your blog content (default is `content/posts`).
  * `params.taxonomies.icons`: icons for taxonomies (categories, tags, series, etc.).

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -1149,10 +1149,18 @@ video {
   top: 0px;
 }
 
+.top-10 {
+  top: 2.5rem;
+}
+
 .top-16 {
   top: 4rem;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-50 {
   z-index: 50;
 }

diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -14,6 +14,7 @@ showReadingTime = true
 
 [header]
   logo = "https://placehold.co/512/webp"
+  sticky = false
 
 [footer]
   since = 2023

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -20,7 +20,7 @@
   {{ partial "head.html" . }}
 </head>
 <body class="w-full bg-slate-50 dark:bg-gray-800">
-  <header class="flex flex-none justify-center">
+  <header class="flex flex-none justify-center z-10 {{- if $.Site.Params.header.sticky }} bg-slate-50 dark:bg-gray-800 sticky top-0{{ end -}}">
     {{ partial "header.html" . }}
   </header>
   <main class="flex flex-auto justify-center">

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -29,7 +29,7 @@ <h2 class="text-4xl font-semibold text-slate-800 dark:text-slate-200">
           </article>
         {{ end }}
       </section>
-      <aside class="hidden md:flex flex-col md:w-1/3 mx-3 top-0 sticky self-start">
+      <aside class="hidden md:flex flex-col md:w-1/3 mx-3 {{- if .Site.Params.header.sticky }} top-10 {{ else }} top-0 {{ end -}} sticky self-start">
         {{ partial "sidebar.html" . }}
       </aside>
     </div>