Add menu to show links to feeds

hongquan · Sep 2, 2023 · 3c2c824 · 3c2c824
1 parent aa05b10
commit 3c2c824
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/minijinja/feeds_menu.jinja b/minijinja/feeds_menu.jinja
@@ -0,0 +1,9 @@
+<div x-data='{feedOptionsShown: false}' class='relative {{ extra_class|default('') }}'>
+  <button x-on:mouseover='feedOptionsShown = true' x-on:touchend='feedOptionsShown = true'>
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M6.25 3A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h11.5A3.25 3.25 0 0 0 21 17.75V6.25A3.25 3.25 0 0 0 17.75 3H6.25Zm.5 4.5c-.405 0-.75-.317-.75-.722v-.055c0-.393.305-.721.698-.723h.052C12.963 6 18 11.037 18 17.25v.052a.711.711 0 0 1-.723.698h-.055c-.405 0-.722-.345-.722-.75A9.75 9.75 0 0 0 6.75 7.5ZM13.294 18h-.09c-.399 0-.704-.351-.704-.75a5.75 5.75 0 0 0-5.75-5.75c-.399 0-.75-.305-.75-.704v-.09c0-.38.287-.701.666-.705L6.75 10A7.25 7.25 0 0 1 14 17.334c-.005.379-.327.666-.706.666ZM7.5 18a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3Z'/></svg>
+  </button>
+  <ul x-cloak class='absolute end-0 top-0 border p-1 bg-white dark:bg-slate-900 transition-opacity duration-500 delay-100' x-show='feedOptionsShown' x-on:click.outside='feedOptionsShown = false'>
+    <li><a href='/feeds.atom' class='block hover:bg-amber-500 p-1'>Atom</a></li>
+    <li><a href='/feeds.json' class='block hover:bg-amber-500 p-1'>JSONFeed</a></li>
+  </ul>
+</div>
diff --git a/minijinja/navbar.jinja b/minijinja/navbar.jinja
@@ -3,9 +3,12 @@
     <div class='flex flex-row items-center'>
       <a href='/' class='title-font font-medium items-center text-white md:mb-0 text-4xl'>Quân</a>
       <div class='grow'></div>
-      <form class='text-right md:hidden mr-4' method='post' action='/api/set-lang'>
+      <form class='text-right md:hidden me-3' method='post' action='/api/set-lang'>
         {% include 'lang_switcher.jinja' %}
       </form>
+      {% with extra_class='md:hidden me-3' %}
+        {% include 'feeds_menu.jinja' %}
+      {% endwith %}
       <button class='md:hidden rounded-lg focus:outline-none focus:shadow-outline hover:text-red-200' x-on:click='mobileMenuShown = !mobileMenuShown'>
         <svg fill='currentColor' viewBox='0 0 20 20' class='w-6 h-6'>
           <path x-show='!mobileMenuShown' fill-rule='evenodd' d='M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z' clip-rule='evenodd'></path>
@@ -51,9 +54,12 @@
     </ul>
 
     <div class='grow'></div>
-    <form class='text-right hidden md:block' method='post' action='/api/set-lang'>
+    <form class='text-right hidden md:block me-3' method='post' action='/api/set-lang'>
       {% include 'lang_switcher.jinja' %}
     </form>
+    {% with extra_class='hidden md:block me-3' %}
+      {% include 'feeds_menu.jinja' %}
+    {% endwith %}
 
   </nav>
 </div>