- hamburguer menu (#32)

- css tags - toggle btn switch mode
rochacbruno · Oct 17, 2024 · fd0ba05 · fd0ba05
1 parent c6dbb25
commit fd0ba05
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 65 deletions.
diff --git a/example/content/about.md b/example/content/about.md
@@ -4,6 +4,8 @@ title: about
 
 # About me
 
+Hello
+
 This page tells everything about me, the blog author!
 
 I am someone who likes to write blog posts in **markdown** format!

diff --git a/example/content/first-blog-post.md b/example/content/first-blog-post.md
@@ -2,7 +2,7 @@
 date: 2024-01-01 12:00:01
 slug: blog-post
 title: Example Blog Post
-tags: exampletag
+tags: exampletag, tag 2
 ---
 # This is the post content
 

diff --git a/example/marmite.yaml b/example/marmite.yaml
@@ -4,7 +4,7 @@
 # footer: This is an example site generated with Marmite
 # pagination: 10
 
-# list_title: Blog Posts
+list_title: Blog Posts
 # tags_title: Tags
 # archives_title: Archive
 
@@ -15,10 +15,12 @@
 # card_image: name of site card image, relative to media or absolute
 # logo_image: name of site logo image, relative to media or absolute
 
-# menu:
-#  - ["About", "about.html"]
-#  - ["Path", "/relative-path"]
-#  - ["External", "https://example.com"]
+menu:
+  - ["About", "about.html"]
+  - ["Path", "/relative-path"]
+  - ["External", "https://example.com"]
+  - ["Pages", "/pages.html"]
+
 
 # data:
 #  foo: bar
diff --git a/example/static/menu.js b/example/static/menu.js
@@ -0,0 +1,7 @@
+
+const menuToggle = document.getElementById('menu-toggle');
+const headerMenu = document.getElementById('header-menu');
+
+menuToggle.addEventListener('click', function () {
+  headerMenu.classList.toggle('active');
+});
diff --git a/example/static/style.css b/example/static/style.css
@@ -1,9 +1,105 @@
 @font-face {
-    font-family: "Atkinson Hyperlegible";
-    src: url("/static/Atkinson-Hyperlegible-Regular-102.woff");
+  font-family: "Atkinson Hyperlegible";
+  src: url("/static/Atkinson-Hyperlegible-Regular-102.woff");
 }
 /* https://picocss.com/docs */
 :root {
-    --pico-typography-spacing-vertical: 1.5rem;
-    --pico-font-family: "Atkinson Hyperlegible", sans-serif;
+  --pico-typography-spacing-vertical: 1.5rem;
+  --pico-font-family: "Atkinson Hyperlegible", sans-serif;
+  --pico-color-grey-50: #f1f1f1;
+  --pico-color-grey-700: #474747;
+  --pico-border-radius: 0.5rem;
 }
+
+*{
+    text-decoration: none;
+    background-color: 100vw;
+}
+
+/* Menu Hamburguer */
+.header-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative; 
+}
+
+.header-menu {
+    list-style: none;
+    display: flex;
+    gap: 15px;
+}
+
+.header-menu li a:hover {
+    scale: 1.1;
+    transition: .3s;
+}
+
+.hamburger {
+    font-size: 30px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: none;
+    color: var(--pico-color-grey-700);
+    position: relative; 
+}
+
+#menu-toggle:focus {
+    outline: none;
+}
+
+@media (max-width: 768px) {
+    .header-menu {
+        display: none;
+        flex-direction: column;
+        gap: 10px;
+        position: absolute;
+        top: 100px; 
+        right: 0; 
+        background-color: #fff;
+        padding: 15px;
+        border: 1px solid #ddd;
+        border-radius: var(--pico-border-radius);
+        z-index: 100; 
+    }
+
+    .header-menu.active {
+        display: flex; 
+    }
+
+    .hamburger {
+        display: block;
+    }
+}
+
+/* Tags */
+
+
+.content-tags {
+    display: flex;
+    width: auto;
+    flex-direction: row;
+    margin: 0 0;
+}
+
+.content-tags li {
+    background-color: var(--pico-color-grey-50);
+    padding: 8px 16px;
+    border-radius: var(--pico-border-radius);
+    margin: 4px 8px;
+}
+
+.content-tags li:first-child {
+    margin-left: -40px;
+}
+
+.content-tags li::marker {
+    content: '';
+}
+
+article footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/example/static/theme-switcher.js b/example/static/theme-switcher.js
@@ -4,20 +4,18 @@
  * Pico.css - https://picocss.com
  * Copyright 2019-2024 - Licensed under MIT
  */
-
 const themeSwitcher = {
   // Config
   _scheme: "auto",
-  menuTarget: "details.dropdown",
-  buttonsTarget: "a[data-theme-switcher]",
-  buttonAttribute: "data-theme-switcher",
+  toggleButton: document.getElementById("theme-toggle"),
   rootAttribute: "data-theme",
   localStorageKey: "picoPreferredColorScheme",
 
   // Init
   init() {
     this.scheme = this.schemeFromLocalStorage;
-    this.initSwitchers();
+    this.initToggle();
+    this.updateIcon();
   },
 
   // Get color scheme from local storage
@@ -30,22 +28,18 @@ const themeSwitcher = {
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   },
 
-  // Init switchers
-  initSwitchers() {
-    const buttons = document.querySelectorAll(this.buttonsTarget);
-    buttons.forEach((button) => {
-      button.addEventListener(
-        "click",
-        (event) => {
-          event.preventDefault();
-          // Set scheme
-          this.scheme = button.getAttribute(this.buttonAttribute);
-          // Close dropdown
-          document.querySelector(this.menuTarget)?.removeAttribute("open");
-        },
-        false
-      );
-    });
+  // Init toggle
+  initToggle() {
+    this.toggleButton.addEventListener(
+      "click",
+      (event) => {
+        event.preventDefault();
+        // Toggle scheme
+        this.scheme = this.scheme === "dark" ? "light" : "dark";
+        this.updateIcon();
+      },
+      false
+    );
   },
 
   // Set scheme
@@ -73,7 +67,16 @@ const themeSwitcher = {
   schemeToLocalStorage() {
     window.localStorage?.setItem(this.localStorageKey, this.scheme);
   },
+
+  // Update icon based on the current scheme
+  updateIcon() {
+    if (this.scheme === "dark") {
+      this.toggleButton.innerHTML = "&#9788;"; // Sun icon for light mode
+    } else {
+      this.toggleButton.innerHTML = "&#9789;"; // Moon icon for dark mode
+    }
+  },
 };
 
 // Init
-themeSwitcher.init();
+themeSwitcher.init();
diff --git a/example/templates/base.html b/example/templates/base.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="light">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,40 +9,45 @@
     <link rel="stylesheet" type="text/css" href="/static/style.css">
     <title>{{ site.name }} | {{ title }}</title>
 </head>
+
 <body>
     <main class="container">
-    <header class="header-content">
-        <nav class="header-nav">
-        <ul class="header-name">
-            <li>
-                <hgroup>
-                <h2><a href="/" class="contrast">{{ site.name }}</a></h2>
-                <p>{{ site.tagline }}</p>
-                </hgroup>
-            </li>
-        </ul>
-        <ul class="header-menu">
-            {% for item in menu %}
-            <li><a href="{{ item.1 | safe }}" class="secondary">{{ item.0 | safe }}</a></li>
-            {% endfor %}
-        </ul>
-        </nav>
-    </header>
-    <section class="main-content">
-        {% block main -%}{%- endblock %}
-    </section>
-    <footer class="footer-content">
-        <nav>
-           <ul>
-                <li>{{ site.footer | safe }}</li>
-           </ul>
-           <ul>
-                <li><a href="#" data-theme-switcher="dark" class="secondary">&#9789;</a></li>
-                <li><a href="#" data-theme-switcher="light" class="secondary">&#9788;</a></li>
-           </ul>
-        </nav>
-    </footer>
+        <header class="header-content">
+            <nav class="header-nav">
+                <ul class="header-name">
+                    <li>
+                        <hgroup>
+                            <h2><a href="/" class="contrast">{{ site.name }}</a></h2>
+                            <p>{{ site.tagline }}</p>
+                        </hgroup>
+                    </li>
+                </ul>
+                <button id="menu-toggle" class="hamburger">&#9776;</button>
+
+                <ul class="header-menu" id="header-menu">
+                    {% for item in menu %}
+                    <li><a href="{{ item.1 | safe }}" class="secondary">{{ item.0 | safe }}</a></li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </header>
+        <section class="main-content">
+            {% block main -%}{%- endblock %}
+        </section>
+        <footer class="footer-content">
+            <nav>
+                <ul>
+                    <li>{{ site.footer | safe }}</li>
+                </ul>
+                <ul>
+                    <li><a href="#" id="theme-toggle" class="secondary">&#9789;</a></li>
+                </ul>
+            </nav>
+        </footer>
     </main>
     <script src="/static/theme-switcher.js"></script>
+    <script src="/static/menu.js"></script>
+
 </body>
-</html>
+
+</html>
diff --git a/example/templates/list.html b/example/templates/list.html
@@ -9,7 +9,7 @@
                 <h2 class="content-title"><a href="/{{ content.slug }}.html">{{ content.title | capitalize }}</a></h2>
                 <p class="content-excerpt">{{ content.html | striptags | truncate(length=100, end="...") }}</p>
                 {% if content.date -%}
-                <footer>
+                <footer class="">
                     <span class="content-date">{{ content.date | date(format="%v") }}</span>
                     {% if content.tags -%}
                     <ul class="content-tags">
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,8 @@ title: about @@
     # About me
+    Hello
     This page tells everything about me, the blog author!
     I am someone who likes to write blog posts in **markdown** format!
@@ Expand Down @@