diff --git a/assets/css/app.css b/assets/css/app.css
index ede15d5..c753ca9 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -73,6 +73,7 @@
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
 @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
 @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
+@custom-variant sidebar (body.sidebar-layout &);
 
 /* Make LiveView wrapper divs transparent for layout */
 [data-phx-session] {
@@ -551,6 +552,7 @@ code .hljs-deletion {
     }
 }
 
+
 @media print {
     @page {
         size: A4 portrait;
diff --git a/assets/js/app.js b/assets/js/app.js
index 5f04cf7..296bc71 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -40,9 +40,24 @@ hljs.registerLanguage("javascript", javascript);
 hljs.registerLanguage("lua", lua);
 
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+
+let Hooks = {};
+Hooks.Layout = {
+  mounted() {
+    if (localStorage.getItem("layout") === "sidebar") {
+      document.body.classList.add("sidebar-layout");
+    }
+  }
+};
+
+window.addEventListener("save-layout", () => {
+  localStorage.setItem("layout", document.body.classList.contains("sidebar-layout") ? "sidebar" : "minimal");
+});
+
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
+  hooks: Hooks,
 });
 
 // Show progress bar on live navigation and form submits
diff --git a/lib/alchemy_pub_web/components/layouts.ex b/lib/alchemy_pub_web/components/layouts.ex
index eab2f20..9191d22 100644
--- a/lib/alchemy_pub_web/components/layouts.ex
+++ b/lib/alchemy_pub_web/components/layouts.ex
@@ -31,7 +31,7 @@ defmodule AlchemyPubWeb.Layouts do
 
   def app(assigns) do
     ~H"""
-    <main class="min-h-svh md:container md:mx-auto lg:flex lg:justify-center">
+    <main class="min-h-svh md:container md:mx-auto">
       <.flash_group flash={@flash} />
       {render_slot(@inner_block)}
     </main>
diff --git a/lib/alchemy_pub_web/page_live.ex b/lib/alchemy_pub_web/page_live.ex
index d81746e..d16aeac 100644
--- a/lib/alchemy_pub_web/page_live.ex
+++ b/lib/alchemy_pub_web/page_live.ex
@@ -53,7 +53,8 @@ defmodule AlchemyPubWeb.PageLive do
        mute: false,
        all_pages: false,
        has_next: false,
-       admin: admin
+       admin: admin,
+       nav_section: nil
      )
      |> stream_configure(:deck, [])
      |> stream(:deck, [])}
@@ -151,6 +152,13 @@ defmodule AlchemyPubWeb.PageLive do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("toggle_nav", %{"section" => section}, socket) do
+    section = String.to_existing_atom(section)
+    nav_section = if socket.assigns.nav_section == section, do: nil, else: section
+    {:noreply, assign(socket, nav_section: nav_section)}
+  end
+
   @impl true
   def handle_info({:add, _title}, socket) do
     {:noreply, socket |> rebuild(socket.assigns.params)}
@@ -268,7 +276,20 @@ defmodule AlchemyPubWeb.PageLive do
            visible_pages |> filter_rank(:deck)}
       end
 
-    socket |> assign(posts: posts, pages: pages, decks: decks, tags: tags, params: params)
+    title = socket.assigns[:title]
+    tag = socket.assigns[:tag]
+
+    natural_section =
+      cond do
+        tag != nil -> :tags
+        Enum.any?(posts, fn [t | _] -> t == title end) -> :articles
+        Enum.any?(decks, fn [t | _] -> t == title end) -> :decks
+        true -> nil
+      end
+
+    nav_section = natural_section
+
+    socket |> assign(posts: posts, pages: pages, decks: decks, tags: tags, params: params, nav_section: nav_section)
   end
 
   defp build_deck(socket, params, {title, meta, content}) do
diff --git a/lib/alchemy_pub_web/page_live.html.heex b/lib/alchemy_pub_web/page_live.html.heex
index de786ec..736f691 100644
--- a/lib/alchemy_pub_web/page_live.html.heex
+++ b/lib/alchemy_pub_web/page_live.html.heex
@@ -1,129 +1,237 @@
 <Layouts.app flash={@flash}>
-  <div class="flex flex-col gap-0.5 min-h-svh p-1">
-    <div class="flex flex-col gap-0.5 grow md:flex-row justify-start">
-      <div class="collapse collapse-plus md:collapse-open w-full md:w-64 print:hidden bg-base-100 rounded-lg">
-        <input id="menu-open" type="checkbox" class="md:hidden" phx-update="ignore" />
-        <div class="collapse-title md:hidden font-semibold text-sm content-center bg-base-200 rounded-lg">
-          {raw(@page_title)}
-        </div>
-        <div class="collapse-content p-0">
-          <div class="menu menu-vertical w-full py-4">
-            <li :for={{[title, _, _date, meta], i} <- @pages |> Enum.with_index()}>
+  <div id="app-root" phx-hook="Layout" class="flex flex-col min-h-svh p-1">
+    <nav class="sidebar:hidden print:hidden flex flex-row flex-wrap items-center px-1 py-1 gap-x-0.5">
+      <.link
+        :for={{[title, _, _date, meta], i} <- @pages |> Enum.with_index()}
+        class={[
+          "px-2 py-1 text-sm",
+          @title == title && "font-semibold underline underline-offset-4"
+        ]}
+        patch={(i == 0 && "/") || "/#{title}"}
+      >
+        {raw(meta["title"])}
+      </.link>
+
+      <button
+        :for={
+          {label, key, items} <-
+            [
+              {"Articles", :articles, @posts},
+              {"Decks", :decks, @decks},
+              {"Tags", :tags, @tags}
+            ]
+        }
+        :if={items != []}
+        class={[
+          "px-2 py-1 text-sm cursor-pointer",
+          if(@nav_section == key, do: "font-semibold", else: "opacity-50 hover:opacity-100")
+        ]}
+        phx-click="toggle_nav"
+        phx-value-section={key}
+      >
+        {label}
+      </button>
+
+      <div class="ml-auto flex items-center gap-3 text-xs opacity-50">
+        <span :if={@admin} class="text-warning font-semibold">admin</span>
+        <span>{@viewers}</span>
+        <button
+          class="btn btn-xs btn-ghost"
+          title="Toggle sidebar layout"
+          phx-click={
+            JS.toggle_class("sidebar-layout", to: "body")
+            |> JS.dispatch("save-layout", to: "body")
+          }
+        >
+          ⌞ ⌝
+        </button>
+      </div>
+    </nav>
+
+    <div class={[
+      "sidebar:hidden print:hidden overflow-hidden transition-all duration-200 border-t",
+      if(@nav_section != nil, do: "max-h-40 py-1", else: "max-h-0 py-0 border-t-transparent")
+    ]}>
+      <div class={[
+        "flex w-[300%] transition-transform duration-200",
+        case @nav_section do
+          :decks -> "-translate-x-1/3"
+          :tags -> "-translate-x-2/3"
+          _ -> "translate-x-0"
+        end
+      ]}>
+        <div class="w-1/3 flex flex-row flex-wrap items-baseline gap-x-0.5 px-1 text-sm">
+          <%= for {{year, _}, posts} <- Enum.group_by(@posts, fn [_, _, date | _] -> Date.year_of_era(date) end) |> Enum.sort(:desc) do %>
+            <span class="text-xs opacity-30 px-1">{year}</span>
+            <%= for [title, _, date, meta] <- posts do %>
               <.link
-                class={(@title == title && active_class()) || ""}
-                patch={(i == 0 && "/") || "/#{title}"}
-                phx-click={JS.dispatch("click", to: "#menu-open")}
+                class={["px-2 py-0.5", @title == title && "font-semibold underline underline-offset-4"]}
+                patch={"/#{date}/#{title}"}
               >
-                <.icon
-                  name={"hero-" <> Map.get(meta, "icon", i == 0 && "home-modern" || "document")}
-                  class="size-5"
-                />
                 {raw(meta["title"])}
-                <span
-                  :if={
-                    Map.get(meta, "tags", []) |> Enum.any?(fn t -> Engine.urlify(t) == @tag end)
-                  }
-                  class="badge badge-xs badge-info"
-                />
               </.link>
-            </li>
-            <li>
-              <%= for {{year, _}, posts} <- Enum.group_by(@posts, fn [_, _, date | _] -> Date.year_of_era(date) end)
-                  |> Enum.sort(:desc) do %>
+            <% end %>
+          <% end %>
+        </div>
+        <div class="w-1/3 flex flex-row flex-wrap items-center gap-x-0.5 px-1 text-sm">
+          <.link
+            :for={[title, _, _, meta] <- @decks}
+            class={["px-2 py-0.5", @title == title && "font-semibold underline underline-offset-4"]}
+            patch={"/#{title}"}
+          >
+            {raw(meta["title"])}
+          </.link>
+        </div>
+        <div class="w-1/3 flex flex-row flex-wrap items-center gap-x-0.5 px-1 text-sm">
+          <.link
+            :for={{tag, title} <- @tags}
+            class={["px-2 py-0.5", @tag == tag && "font-semibold underline underline-offset-4"]}
+            patch={"/tag/#{tag}"}
+          >
+            {title}
+          </.link>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-wrapper flex grow gap-0.5 min-w-0">
+      <div class="hidden sidebar:flex flex-col print:hidden bg-base-100 rounded-lg shrink-0 sidebar:w-64">
+        <div class="collapse collapse-plus md:collapse-open w-full">
+          <input id="menu-open" type="checkbox" class="md:hidden" phx-update="ignore" />
+          <div class="collapse-title md:hidden font-semibold text-sm content-center bg-base-200 rounded-lg">
+            {raw(@page_title)}
+          </div>
+          <div class="collapse-content p-0">
+            <div class="menu menu-vertical w-full py-4">
+              <li :for={{[title, _, _date, meta], i} <- @pages |> Enum.with_index()}>
+                <.link
+                  class={(@title == title && active_class()) || ""}
+                  patch={(i == 0 && "/") || "/#{title}"}
+                  phx-click={JS.dispatch("click", to: "#menu-open")}
+                >
+                  <.icon
+                    name={"hero-" <> Map.get(meta, "icon", i == 0 && "home-modern" || "document")}
+                    class="size-5"
+                  />
+                  {raw(meta["title"])}
+                  <span
+                    :if={
+                      Map.get(meta, "tags", []) |> Enum.any?(fn t -> Engine.urlify(t) == @tag end)
+                    }
+                    class="badge badge-xs badge-info"
+                  />
+                </.link>
+              </li>
+              <li>
+                <%= for {{year, _}, posts} <- Enum.group_by(@posts, fn [_, _, date | _] -> Date.year_of_era(date) end)
+                    |> Enum.sort(:desc) do %>
+                  <div class="menu-title">
+                    <.icon name="hero-calendar" class="size-5 mr-2 mb-1" />{year}
+                  </div>
+                  <ul>
+                    <%= for [title, _, date, meta] <- posts do %>
+                      <li>
+                        <.link
+                          class={(@title == title && active_class()) || ""}
+                          patch={"/#{date}/#{title}"}
+                          phx-click={JS.dispatch("click", to: "#menu-open")}
+                        >
+                          {raw(meta["title"])}
+                          <%= if Map.get(meta, "tags", []) |> Enum.any?(fn t -> Engine.urlify(t) == @tag end) do %>
+                            <span class="badge badge-xs badge-info" />
+                          <% end %>
+                        </.link>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% end %>
+              </li>
+              <li :if={@decks != []}>
+                <div class="menu-title">
+                  <.icon name="hero-presentation-chart-bar" class="size-5 mr-2 mb-1" />Decks
+                </div>
+                <ul>
+                  <li :for={[title, _, _, meta] <- @decks}>
+                    <.link
+                      class={(@title == title && active_class()) || ""}
+                      patch={"/#{title}"}
+                      phx-click={JS.dispatch("click", to: "#menu-open")}
+                    >
+                      {raw(meta["title"])}
+                      <span
+                        :if={
+                          Map.get(meta, "tags", [])
+                          |> Enum.any?(fn t -> Engine.urlify(t) == @tag end)
+                        }
+                        class="badge badge-xs badge-info"
+                      />
+                    </.link>
+                  </li>
+                </ul>
+              </li>
+              <li>
                 <div class="menu-title">
-                  <.icon name="hero-calendar" class="size-5 mr-2 mb-1" />{year}
+                  <.icon name="hero-tag" class="size-5 mr-2 mb-1" />Tags
                 </div>
                 <ul>
-                  <%= for [title, _, date, meta] <- posts do %>
+                  <%= for {tag, title} <- @tags do %>
                     <li>
                       <.link
-                        class={(@title == title && active_class()) || ""}
-                        patch={"/#{date}/#{title}"}
+                        class={(@tag == tag && active_class()) || ""}
+                        patch={"/tag/#{tag}"}
                         phx-click={JS.dispatch("click", to: "#menu-open")}
                       >
-                        {raw(meta["title"])}
-                        <%= if Map.get(meta, "tags" , []) |> Enum.any?(fn t -> Engine.urlify(t) == @tag end) do %>
+                        {title}
+                        <%= if Map.get(@meta, "tags", []) |> Enum.any?(fn t -> Engine.urlify(t) == tag end) do %>
                           <span class="badge badge-xs badge-info" />
                         <% end %>
                       </.link>
                     </li>
                   <% end %>
                 </ul>
-              <% end %>
-            </li>
-            <li :if={@decks != []}>
-              <div class="menu-title">
-                <.icon name="hero-presentation-chart-bar" class="size-5 mr-2 mb-1" />Decks
-              </div>
-              <ul>
-                <li :for={[title, _, _, meta] <- @decks}>
-                  <.link
-                    class={(@title == title && active_class()) || ""}
-                    patch={"/#{title}"}
-                    phx-click={JS.dispatch("click", to: "#menu-open")}
-                  >
-                    {raw(meta["title"])}
-                    <span
-                      :if={
-                        Map.get(meta, "tags", [])
-                        |> Enum.any?(fn t -> Engine.urlify(t) == @tag end)
-                      }
-                      class="badge badge-xs badge-info"
-                    />
-                  </.link>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <div class="menu-title">
-                <.icon name="hero-tag" class="size-5 mr-2 mb-1" />Tags
-              </div>
-              <ul>
-                <%= for {tag, title} <- @tags do %>
-                  <li>
-                    <.link
-                      class={(@tag == tag && active_class()) || ""}
-                      patch={"/tag/#{tag}"}
-                      phx-click={JS.dispatch("click", to: "#menu-open")}
-                    >
-                      {title}
-                      <%= if Map.get(@meta, "tags" , []) |> Enum.any?(fn t -> Engine.urlify(t) == tag end) do %>
-                        <span class="badge badge-xs badge-info" />
-                      <% end %>
-                    </.link>
+              </li>
+              <li>
+                <div class="menu-title">
+                  <.icon name="hero-chart-bar" class="size-5 mr-2 mb-1" />Stats
+                </div>
+                <ul>
+                  <li class="menu-title">
+                    <div class="flex flex-row justify-between">
+                      Online: <span :if={@admin} class="badge badge-sm badge-warning">Admin</span>
+                      <span class="badge badge-sm badge-success">{@viewers}</span>
+                    </div>
                   </li>
-                <% end %>
-              </ul>
-            </li>
-            <li>
-              <div class="menu-title">
-                <.icon name="hero-chart-bar" class="size-5 mr-2 mb-1" />Stats
+                </ul>
+              </li>
+            </div>
+            <div :if={@meta["qr"]} class="p-2 content-center">
+              <div class="rounded-box border">
+                <div
+                  class="bg-contain aspect-square w-full mix-blend-difference invert"
+                  style={"background-image:url('/qr?path=#{@url}');"}
+                >
+                </div>
               </div>
-              <ul>
-                <li class="menu-title">
-                  <div class="flex flex-row justify-between">
-                    Online: <span :if={@admin} class="badge badge-sm badge-warning">Admin</span>
-                    <span class="badge badge-sm badge-success">{@viewers}</span>
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </div>
-          <div :if={@meta["qr"]} class="p-2 content-center">
-            <div class="rounded-box border">
-              <div
-                class="bg-contain aspect-square w-full mix-blend-difference invert"
-                style={"background-image:url('/qr?path=#{@url}');"}
+            </div>
+            <div class="p-2 pt-0">
+              <button
+                class="btn btn-xs btn-ghost w-full"
+                phx-click={
+                  JS.toggle_class("sidebar-layout", to: "body")
+                  |> JS.dispatch("save-layout", to: "body")
+                }
               >
-              </div>
+                minimal view
+              </button>
             </div>
           </div>
         </div>
       </div>
+
       <div id="top" class="flex flex-col gap-0.5 grow min-w-0">
         <div
           :if={Map.get(@meta, "header", @meta["rank"] != nil)}
-          class="flex flex-row gap-2 p-2 justify-end content-center bg-base-200 rounded-lg print:hidden"
+          class="flex flex-row gap-2 p-2 justify-end content-center border-base-100 border-b print:hidden"
         >
           <div class="text-xl font-extrabold content-center">{@page_title}</div>
           <img
@@ -174,20 +282,20 @@
         >
           {raw(@content)}
         </div>
-        <div :if={@meta["rank"] == :deck}>
+        <div :if={@meta["rank"] == :deck} class="flex flex-col">
           <div
             id="deck"
             phx-update="stream"
             class={
               cond do
                 @all_pages ->
-                  "flex flex-col md:w-136 lg:min-w-2xl print:min-w-200 deck"
+                  "flex flex-col w-full md:w-136 lg:min-w-2xl print:min-w-200 deck mx-auto"
 
                 @fullscreen ->
                   "absolute top-0 left-0 w-full h-full z-1 deck overflow-hidden"
 
                 true ->
-                  "relative md:w-136 lg:min-w-2xl print:min-w-200 aspect-video deck"
+                  "relative w-full md:w-136 lg:min-w-2xl print:min-w-200 aspect-video deck mx-auto"
               end
             }
             phx-window-keyup="key"
@@ -232,7 +340,7 @@
               </div>
             </div>
           </div>
-          <div :if={!@all_pages} class="flex flex-row justify-between">
+          <div :if={!@all_pages} class="flex flex-row justify-between w-full md:w-136 lg:min-w-2xl mx-auto">
             <div class="btn btn-ghost" phx-click="key" phx-value-key="ArrowLeft">Prev</div>
             <div :if={!@admin} class="btn btn-ghost" phx-click="key" phx-value-key="End">
               Follow
@@ -260,7 +368,8 @@
         </div>
       </div>
     </div>
-    <footer class="footer sm:footer-horizontal footer-center bg-base-200 rounded-lg text-base-content p-4 print:hidden">
+
+    <footer class="footer sm:footer-horizontal footer-center border-base-100 border-t text-base-content p-4 print:hidden">
       <aside>
         <p>Copyright © {Date.utc_today() |> Date.to_erl() |> elem(0)} {@copyright.name}.</p>
         <p>
diff --git a/priv/pages/Frontmatter.md b/priv/pages/Frontmatter.md
new file mode 100644
index 0000000..be728b2
--- /dev/null
+++ b/priv/pages/Frontmatter.md
@@ -0,0 +1,6 @@
+---
+date: 2025-01-01
+title: Frontmatter
+---
+
+Articles with a frontmatter can set the date when they have been published. Otherwise, the last modification date is used.
diff --git a/priv/pages/Onesheet.md b/priv/pages/Onesheet.md
index 3ae8bcc..bbb1873 100644
--- a/priv/pages/Onesheet.md
+++ b/priv/pages/Onesheet.md
@@ -2,7 +2,7 @@
 onesheet: true
 header: false
 rank: 98
-title: Onesheet Example
+title: Onesheet
 ---
 
 # Onesheet Example