mobile menu

web/app/static/src/main.css

 }
 
 .fade-right::after {
-    @apply absolute top-0 right-0 w-12 lg:w-40 h-full pointer-events-none;
+    @apply absolute top-0 right-0 w-16 lg:w-40 h-full pointer-events-none;
 
     content: '';
     background-image: linear-gradient(to left,#fff 0%, #fff 5%, rgba(255,255,255,0) 100%);

web/app/static/styles/main.css

 .left-0 {
   left: 0px;
 }
+.right-0 {
+  right: 0px;
+}
 .right-10 {
   right: 2.5rem;
 }
 .w-5 {
   width: 1.25rem;
 }
+.w-\[20rem\] {
+  width: 20rem;
+}
 .w-\[25rem\] {
   width: 25rem;
 }
-.w-\[28vw\] {
-  width: 28vw;
-}
-.w-\[30rem\] {
-  width: 30rem;
-}
 .w-\[35rem\] {
   width: 35rem;
 }
 .w-\[4rem\] {
   width: 4rem;
 }
+.w-\[calc\(100\%-2rem\)\] {
+  width: calc(100% - 2rem);
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
 .w-full {
   width: 100%;
 }
+.w-\[20\] {
+  width: 20;
+}
 .min-w-\[5rem\] {
   min-width: 5rem;
 }
 .p-4 {
   padding: 1rem;
 }
+.p-8 {
+  padding: 2rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   top: 0px;
   right: 0px;
   height: 100%;
-  width: 3rem;
+  width: 4rem;
 }
 
 @media (min-width: 1024px) {
     width: 12rem;
   }
 
+  .lg\:w-\[30rem\] {
+    width: 30rem;
+  }
+
   .lg\:w-\[32rem\] {
     width: 32rem;
   }
 
+  .lg\:w-\[35rem\] {
+    width: 35rem;
+  }
+
+  .lg\:w-\[25rem\] {
+    width: 25rem;
+  }
+
   .lg\:max-w-\[30rem\] {
     max-width: 30rem;
   }

web/app/templates/base.html

 
 {% endmacro %}
 
-{% macro menu() %}
+{% macro menu(type) %}
+    <a 
+        class="block menuitem  w-48 " 
+        href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"
+        @click="menuOpen = false"
+    ><span>Experimental Publishing Compendium <span class="ml-3  inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span>
+    </a>
+
     <a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title hidden lg:block">
+        class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title  {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
+        @click="menuOpen = false"
+        >
         Tools
+        
     </a>
 
     <a href="{{ url_for('practice.get_practices') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title  hidden lg:block">
+        class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title   {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
+        @click="menuOpen = false"
+        >
         Practices
+        
     </a>
 
     <a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book  hidden lg:block">
+        class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book block   {% if type=='top' %} hidden lg:block {% else %} block {% endif %} "
+        @click="menuOpen = false"
+        >
         Books
+        
     </a>
 
     <a href="{{ url_for('main.about') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto  hidden lg:block">
+        class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto    {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
+        @click="menuOpen = false"
+        >
         About / <br> Contact
+        
     </a>
 
     <!-- <div class="ml-auto mr-2">
                     <p class="capitalize">{{ resource['type'] }}</p>
                     {% endif %}
                 </div>
-                <div class="cell w-[28vw] lg:w-[32rem] row-start-1 lg:row-span-3">
+                <div class="cell w-[20rem] lg:w-[32rem] row-start-1 lg:row-span-3">
                     {{ resource_lead(resource) }}
                 </div>
     
                         Related<br>Tools
                     </div>
                     {% for tool in resource.tools %}
-                    <div class="cell w-[30rem]">
+                    <div class="cell w-[20rem] lg:w-[30rem]">
                         {{ resource_lead(tool,size=2) }}
                     </div>
                     {% endfor %}
                         Related<br>Books
                     </div>
                     {% for book in resource.books %}
-                    <div class="cell w-[35rem]">
+                    <div class="cell w-[20] lg:w-[35rem]">
                         {{ resource_lead(book,size=2) }}
                     </div>
                     {% endfor %}
                         Related<br>Practices
                     </div>
                     {% for practice in resource.practices %}
-                    <div class="cell w-[25rem]">
+                    <div class="cell w-[20rem] lg:w-[25rem]">
                         {{ resource_lead(practice,size=2) }}
                     </div>
                     {% endfor %}
 
     <div id="all">
         <header class="sticky top-0 z-10 bg-white  border-b-[2px] border-black flex justify-between w-full">
-            <nav class=" lg:flex justify-center items-stretch w-full">
-                <a class="block menuitem  w-48 " href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"><span>Experimental Publishing Compendium <span class="ml-3  inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span></a>
-                {{ menu() }}
+            <nav class=" lg:flex justify-center items-stretch w-full ">
+                
+                {{ menu('top') }}
+                
             </nav>
-            <div class="burger h-14 cursor-pointer block lg:hidden p-4">
+            <div class="burger h-14 cursor-pointer block lg:hidden p-4" @click="menuOpen = true">
                 <svg width="100%" height="100%" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M1 4H19" stroke="black" stroke-width="1.5" />
                     <path d="M19 9H1" stroke="black" stroke-width="1.5" />
 
             </div>
         </header>
+
+        <menu 
+            class="fixed top-0 right-0 z-20 p-8 bg-white w-[calc(100%-2rem)] max-w-[30rem] h-screen"
+            x-show="menuOpen"
+            style="box-shadow: 0 0 2rem rgb(0,0,0,0.2);"
+            @click.outside = "menuOpen = false"
+            >
+            {{ menu('side') }}
+        </menu>
+
+
     
         <!-- Begin page content -->
         <main>