From c50aed74a97f9822d11b491023fea7835fa7e559 Mon Sep 17 00:00:00 2001
From: drusepth <drusepth@gmail.com>
Date: Mon, 9 Jan 2023 15:33:41 -0800
Subject: [PATCH] allow creating folders from content pages with modal

---
 app/controllers/content_controller.rb         |    6 +-
 .../display/_tailwind_foldered_index.html.erb | 1045 +++++++++--------
 2 files changed, 530 insertions(+), 521 deletions(-)

diff --git a/app/controllers/content_controller.rb b/app/controllers/content_controller.rb
index fd93f994..48a64f95 100644
--- a/app/controllers/content_controller.rb
+++ b/app/controllers/content_controller.rb
@@ -56,9 +56,9 @@ class ContentController < ApplicationController
 
     @content = @content.sort_by {|x| [x.favorite? ? 0 : 1, x.name] }
     @folders = current_user
-    .folders
-    .where(context: @content_type_name, parent_folder_id: nil)
-    .order('title ASC')
+      .folders
+      .where(context: @content_type_name, parent_folder_id: nil)
+      .order('title ASC')
 
     @questioned_content = @content.sample
     @attribute_field_to_question = SerendipitousService.question_for(@questioned_content)
diff --git a/app/views/content/display/_tailwind_foldered_index.html.erb b/app/views/content/display/_tailwind_foldered_index.html.erb
index bacb7cca..2896b6f2 100644
--- a/app/views/content/display/_tailwind_foldered_index.html.erb
+++ b/app/views/content/display/_tailwind_foldered_index.html.erb
@@ -11,586 +11,595 @@
   end
 %>
 
-
-<div class="h-full flex">
-  <!-- Static for desktop -->
-  <div class="flex flex-col min-w-0 flex-1 overflow-hidden">
-    <!-- mobile second header -->
-    <div class="lg:hidden">
-      <div class="flex items-center justify-between bg-gray-50 border-b border-gray-200 px-4 py-1.5">
-        <div>
-          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-pink-500.svg" alt="Workflow">
-        </div>
-        <div>
-          <button type="button" class="-mr-3 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-600">
-            <span class="sr-only">Open sidebar</span>
-            <!-- Heroicon name: outline/menu -->
-            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-          </button>
+<div 
+  x-data="{ showNewFolderModal: false }"
+>
+  <div class="h-full flex">
+    <!-- Static for desktop -->
+    <div class="flex flex-col min-w-0 flex-1 overflow-hidden">
+      <!-- mobile second header -->
+      <div class="lg:hidden">
+        <div class="flex items-center justify-between bg-gray-50 border-b border-gray-200 px-4 py-1.5">
+          <div>
+            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-pink-500.svg" alt="Workflow">
+          </div>
+          <div>
+            <button type="button" class="-mr-3 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-600">
+              <span class="sr-only">Open sidebar</span>
+              <!-- Heroicon name: outline/menu -->
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="flex-1 relative z-0 flex bg-gray-50 overflow-hidden">
-      <main class="flex-1 relative z-0 bg-gray-200 overflow-y-auto focus:outline-none xl:order-last">
+      <div class="flex-1 relative z-0 flex bg-gray-50 overflow-hidden">
+        <main class="flex-1 relative z-0 bg-gray-200 overflow-y-auto focus:outline-none xl:order-last">
 
-        <!-- content area -->
-        <div class="bg-white pb-2">
-          <div>
-            <%= image_tag asset_path(header_image), class: 'h-32 w-full object-cover lg:h-48' %>
-          </div>
+          <!-- content area -->
+          <div class="bg-white pb-2">
+            <div>
+              <%= image_tag asset_path(header_image), class: 'h-32 w-full object-cover lg:h-48' %>
+            </div>
 
-          <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
-              <div class="flex">
-                <% if @universe_scope %>
-                  <%= link_to @universe_scope do %>
-                    <%= image_tag @universe_scope.random_image_including_private(format: :hero), class: 'h-24 w-24 rounded-full ring-4 ring-purple-800 sm:h-32 sm:w-32' %>
-                  <% end %>
-                <% else %>
-                  <%= image_tag current_user.image_url, class: 'h-24 w-24 rounded-full ring-4 ring-green-800 sm:h-32 sm:w-32' %>
-                <% end %>
-              </div>
-              <div class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
-                <div class="sm:hidden md:block mt-6 min-w-0 flex-1">
-                  <h1 class="text-2xl font-bold text-gray-900 truncate">
-                    Showing <%= pluralize content.count, content_type_name.downcase %>
-                  </h1>
+            <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div class="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
+                <div class="flex">
                   <% if @universe_scope %>
-                    <div class="text-gray-400 text-sm">
-                      in <%= link_to @universe_scope.name, @universe_scope, class: Universe.text_color %>
-                    </div>
-                  <% end %>
-                </div>
-                <div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
-                  <%= link_to attribute_customization_path(content_type_name.downcase) do %>
-                    <button type="button" class="inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-                      <span>Customize template</span>
-                    </button>
-                  <% end %>
-
-                  <% if current_user.can_create?(content_type_class) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: content_type_class.name) %>
-                    <%= link_to new_polymorphic_path(content_type_class) do %>
-                      <button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white <%= content_type_class.color %> focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-                        <i class="material-icons text-sm mr-2">add</i>
-                        <span>New <%= content_type_name %></span>
-                      </button>
+                    <%= link_to @universe_scope do %>
+                      <%= image_tag @universe_scope.random_image_including_private(format: :hero), class: 'h-24 w-24 rounded-full ring-4 ring-purple-800 sm:h-32 sm:w-32' %>
                     <% end %>
                   <% else %>
-                    <%= link_to subscription_path do %>
-                      <button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-gray-400 hover:bg-notebook-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-                        <span>Upgrade</span>
-                      </button>
-                    <% end %>
+                    <%= image_tag current_user.image_url, class: 'h-24 w-24 rounded-full ring-4 ring-green-800 sm:h-32 sm:w-32' %>
                   <% end %>
                 </div>
-              </div>
-            </div>
-            <div class="hidden sm:block md:hidden mt-6 min-w-0 flex-1">
-              <h1 class="text-2xl font-bold text-gray-900 truncate">Ricardo Cooper</h1>
-            </div>
-          </div>
-        </div>
-
-        <!--  new filter bar -->
-        <div class="bg-white mb-4">
-          <!--
-            Mobile filter dialog
-
-            Off-canvas filters for mobile, show/hide based on off-canvas filters state.
-          -->
-          <div class="fixed inset-0 flex z-40 sm:hidden" role="dialog" aria-modal="true">
-            <!--
-              Off-canvas menu overlay, show/hide based on off-canvas menu state.
-
-              Entering: "transition-opacity ease-linear duration-300"
-                From: "opacity-0"
-                To: "opacity-100"
-              Leaving: "transition-opacity ease-linear duration-300"
-                From: "opacity-100"
-                To: "opacity-0"
-            -->
-            <div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>
-
-            <!--
-              Off-canvas menu, show/hide based on off-canvas menu state.
-
-              Entering: "transition ease-in-out duration-300 transform"
-                From: "translate-x-full"
-                To: "translate-x-0"
-              Leaving: "transition ease-in-out duration-300 transform"
-                From: "translate-x-0"
-                To: "translate-x-full"
-            -->
-            <div class="ml-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto">
-              <div class="px-4 flex items-center justify-between">
-                <h2 class="text-lg font-medium text-gray-900">Filters</h2>
-                <button type="button" class="-mr-2 w-10 h-10 bg-white p-2 rounded-md flex items-center justify-center text-gray-400">
-                  <span class="sr-only">Close menu</span>
-                  <!-- Heroicon name: outline/x -->
-                  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-
-              <!-- Filters -->
-              <form class="mt-4">
-                <div class="border-t border-gray-200 px-4 py-6">
-                  <h3 class="-mx-2 -my-3 flow-root">
-                    <!-- Expand/collapse section button -->
-                    <button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-0" aria-expanded="false">
-                      <span class="font-medium text-gray-900"> Tag </span>
-                      <span class="ml-6 flex items-center">
-                        <!--
-                          Expand/collapse icon, toggle classes based on section open state.
-
-                          Heroicon name: solid/chevron-down
-
-                          Open: "-rotate-180", Closed: "rotate-0"
-                        -->
-                        <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                        </svg>
-                      </span>
-                    </button>
-                  </h3>
-                  <!-- Filter section, show/hide based on section state. -->
-                  <div class="pt-6" id="filter-section-0">
-                    <div class="space-y-6">
-                      <div class="flex items-center">
-                        <input id="filter-mobile-category-0" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-category-0" class="ml-3 text-sm text-gray-500"> All New Arrivals </label>
+                <div class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
+                  <div class="sm:hidden md:block mt-6 min-w-0 flex-1">
+                    <h1 class="text-2xl font-bold text-gray-900 truncate">
+                      Showing <%= pluralize content.count, content_type_name.downcase %>
+                    </h1>
+                    <% if @universe_scope %>
+                      <div class="text-gray-400 text-sm">
+                        in <%= link_to @universe_scope.name, @universe_scope, class: Universe.text_color %>
                       </div>
-
-                      <div class="flex items-center">
-                        <input id="filter-mobile-category-1" name="category[]" value="tees" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-category-1" class="ml-3 text-sm text-gray-500"> Tees </label>
-                      </div>
-
-                      <div class="flex items-center">
-                        <input id="filter-mobile-category-2" name="category[]" value="objects" type="checkbox" checked class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-category-2" class="ml-3 text-sm text-gray-500"> Objects </label>
-                      </div>
-                    </div>
+                    <% end %>
                   </div>
-                </div>
+                  <div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
+                    <%= link_to attribute_customization_path(content_type_name.downcase) do %>
+                      <button type="button" class="inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
+                        <span>Customize template</span>
+                      </button>
+                    <% end %>
 
-                <div class="border-t border-gray-200 px-4 py-6">
-                  <h3 class="-mx-2 -my-3 flow-root">
-                    <!-- Expand/collapse section button -->
-                    <button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-1" aria-expanded="false">
-                      <span class="font-medium text-gray-900"> Color </span>
-                      <span class="ml-6 flex items-center">
-                        <!--
-                          Expand/collapse icon, toggle classes based on section open state.
-
-                          Heroicon name: solid/chevron-down
-
-                          Open: "-rotate-180", Closed: "rotate-0"
-                        -->
-                        <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                        </svg>
-                      </span>
-                    </button>
-                  </h3>
-                  <!-- Filter section, show/hide based on section state. -->
-                  <div class="pt-6" id="filter-section-1">
-                    <div class="space-y-6">
-                      <div class="flex items-center">
-                        <input id="filter-mobile-color-0" name="color[]" value="white" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-color-0" class="ml-3 text-sm text-gray-500"> White </label>
-                      </div>
-
-                      <div class="flex items-center">
-                        <input id="filter-mobile-color-1" name="color[]" value="beige" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-color-1" class="ml-3 text-sm text-gray-500"> Beige </label>
-                      </div>
-
-                      <div class="flex items-center">
-                        <input id="filter-mobile-color-2" name="color[]" value="blue" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-color-2" class="ml-3 text-sm text-gray-500"> Blue </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="border-t border-gray-200 px-4 py-6">
-                  <h3 class="-mx-2 -my-3 flow-root">
-                    <!-- Expand/collapse section button -->
-                    <button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-2" aria-expanded="false">
-                      <span class="font-medium text-gray-900"> Sizes </span>
-                      <span class="ml-6 flex items-center">
-                        <!--
-                          Expand/collapse icon, toggle classes based on section open state.
-
-                          Heroicon name: solid/chevron-down
-
-                          Open: "-rotate-180", Closed: "rotate-0"
-                        -->
-                        <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                        </svg>
-                      </span>
-                    </button>
-                  </h3>
-                  <!-- Filter section, show/hide based on section state. -->
-                  <div class="pt-6" id="filter-section-2">
-                    <div class="space-y-6">
-                      <div class="flex items-center">
-                        <input id="filter-mobile-sizes-0" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-sizes-0" class="ml-3 text-sm text-gray-500"> S </label>
-                      </div>
-
-                      <div class="flex items-center">
-                        <input id="filter-mobile-sizes-1" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-sizes-1" class="ml-3 text-sm text-gray-500"> M </label>
-                      </div>
-
-                      <div class="flex items-center">
-                        <input id="filter-mobile-sizes-2" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                        <label for="filter-mobile-sizes-2" class="ml-3 text-sm text-gray-500"> L </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-
-          <!-- Filters -->
-          <section aria-labelledby="filter-heading">
-            <h2 id="filter-heading" class="sr-only">Filters</h2>
-
-            <div class="relative z-10 bg-white border-b border-gray-200 pb-4">
-              <div class="max-w-7xl mx-auto px-4 flex items-center justify-between sm:px-6 lg:px-8">
-                <div data-controller="dropdown" class="relative inline-block text-left">
-                  <div>
-                    <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
-                      Sort <%= chevron_down %>
-                    </button>
-                  </div>
-
-                  <div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
-                    <div class="py-1" role="none">
-                      <!--
-                        Active: "bg-gray-100", Not Active: ""
-
-                        Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
-                      -->
-                      <a href="#" data-action="dropdown#toggle" class="font-medium text-gray-900 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">Favorites First</a>
-                      <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">Alphabetical</a>
-                      <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Recently-edited</a>
-                      <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Order created</a>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Mobile filter dialog toggle, controls the 'mobileFiltersOpen' state. -->
-                <button type="button" class="inline-block text-sm font-medium text-gray-700 hover:text-gray-900 sm:hidden">Filters</button>
-
-                <div class="hidden sm:block">
-                  <div class="flow-root">
-                    <div class="-mx-4 flex items-center divide-x divide-gray-200">
-                      <div data-controller="dropdown" class="px-4 relative inline-block text-left">
-                        <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900 active:bg-white" aria-expanded="false">
-                          <span>Tagged</span>
-                          <span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-100 text-xs font-semibold text-gray-700 tabular-nums">
-                            <%= filtered_page_tags.try(:count) || 0 %>
-                          </span>
-                          <%= chevron_down %>
+                    <% if current_user.can_create?(content_type_class) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: content_type_class.name) %>
+                      <%= link_to new_polymorphic_path(content_type_class) do %>
+                        <button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white <%= content_type_class.color %> focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
+                          <i class="material-icons text-sm mr-2">add</i>
+                          <span>New <%= content_type_name %></span>
                         </button>
+                      <% end %>
+                    <% else %>
+                      <%= link_to subscription_path do %>
+                        <button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-gray-400 hover:bg-notebook-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
+                          <span>Upgrade</span>
+                        </button>
+                      <% end %>
+                    <% end %>
+                  </div>
+                </div>
+              </div>
+              <div class="hidden sm:block md:hidden mt-6 min-w-0 flex-1">
+                <h1 class="text-2xl font-bold text-gray-900 truncate">Ricardo Cooper</h1>
+              </div>
+            </div>
+          </div>
 
-                        <div data-dropdown-target="menu" class="w-64 origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
-                          <form class="space-y-4">
-                            <% page_tags.each do |page_tag| %>
-                              <div class="flex items-center">
-                                <input id="filter-tag-<%= page_tag.id %>" name="slug[]" <%= 'checked' if filtered_page_tags.map(&:slug).include?(page_tag.slug) %> value="<%= page_tag.slug %>" type="checkbox" class="h-4 w-4 border-gray-300 rounded <%= content_type_class.text_color %> focus:ring-notebook-blue">
-                                <label for="filter-tag-<%= page_tag.id %>" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"><%= page_tag.tag %></label>
-                              </div>
-                            <% end %>
+          <!--  new filter bar -->
+          <div class="bg-white mb-4">
+            <!--
+              Mobile filter dialog
 
-                            <% if page_tags.any? %>
-                              <div class="flex text-right">
-                                <button data-action="dropdown#toggle" class="bg-notebook-blue hover:bg-blue-500 text-white rounded w-full px-2 py-1">
-                                  Filter
-                                </button>
-                              </div>
-                            <% else %>
-                              <div class="bg-blue-50 p-4">
-                                Add tags to your <%= content_type_name %> pages to be able to filter them here. 
-                              </div>
-                            <% end %>
-                          </form>
+              Off-canvas filters for mobile, show/hide based on off-canvas filters state.
+            -->
+            <div class="fixed inset-0 flex z-40 sm:hidden" role="dialog" aria-modal="true">
+              <!--
+                Off-canvas menu overlay, show/hide based on off-canvas menu state.
+
+                Entering: "transition-opacity ease-linear duration-300"
+                  From: "opacity-0"
+                  To: "opacity-100"
+                Leaving: "transition-opacity ease-linear duration-300"
+                  From: "opacity-100"
+                  To: "opacity-0"
+              -->
+              <div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>
+
+              <!--
+                Off-canvas menu, show/hide based on off-canvas menu state.
+
+                Entering: "transition ease-in-out duration-300 transform"
+                  From: "translate-x-full"
+                  To: "translate-x-0"
+                Leaving: "transition ease-in-out duration-300 transform"
+                  From: "translate-x-0"
+                  To: "translate-x-full"
+              -->
+              <div class="ml-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto">
+                <div class="px-4 flex items-center justify-between">
+                  <h2 class="text-lg font-medium text-gray-900">Filters</h2>
+                  <button type="button" class="-mr-2 w-10 h-10 bg-white p-2 rounded-md flex items-center justify-center text-gray-400">
+                    <span class="sr-only">Close menu</span>
+                    <!-- Heroicon name: outline/x -->
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+
+                <!-- Filters -->
+                <form class="mt-4">
+                  <div class="border-t border-gray-200 px-4 py-6">
+                    <h3 class="-mx-2 -my-3 flow-root">
+                      <!-- Expand/collapse section button -->
+                      <button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-0" aria-expanded="false">
+                        <span class="font-medium text-gray-900"> Tag </span>
+                        <span class="ml-6 flex items-center">
+                          <!--
+                            Expand/collapse icon, toggle classes based on section open state.
+
+                            Heroicon name: solid/chevron-down
+
+                            Open: "-rotate-180", Closed: "rotate-0"
+                          -->
+                          <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                          </svg>
+                        </span>
+                      </button>
+                    </h3>
+                    <!-- Filter section, show/hide based on section state. -->
+                    <div class="pt-6" id="filter-section-0">
+                      <div class="space-y-6">
+                        <div class="flex items-center">
+                          <input id="filter-mobile-category-0" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-category-0" class="ml-3 text-sm text-gray-500"> All New Arrivals </label>
+                        </div>
+
+                        <div class="flex items-center">
+                          <input id="filter-mobile-category-1" name="category[]" value="tees" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-category-1" class="ml-3 text-sm text-gray-500"> Tees </label>
+                        </div>
+
+                        <div class="flex items-center">
+                          <input id="filter-mobile-category-2" name="category[]" value="objects" type="checkbox" checked class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-category-2" class="ml-3 text-sm text-gray-500"> Objects </label>
                         </div>
                       </div>
-
                     </div>
                   </div>
-                </div>
-              </div>
-            </div>
 
-            <!-- Active filters -->
-            <% if filtered_page_tags.any? %>
-              <div class="bg-gray-100">
-                <div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
-                  <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
-                    Showing only <%= content_type_name.pluralize %> with <%= 'tag'.pluralize(filtered_page_tags.count) %> 
-                    <span class="sr-only">, active</span>
-                  </h3>
+                  <div class="border-t border-gray-200 px-4 py-6">
+                    <h3 class="-mx-2 -my-3 flow-root">
+                      <!-- Expand/collapse section button -->
+                      <button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-1" aria-expanded="false">
+                        <span class="font-medium text-gray-900"> Color </span>
+                        <span class="ml-6 flex items-center">
+                          <!--
+                            Expand/collapse icon, toggle classes based on section open state.
 
-                  <div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
+                            Heroicon name: solid/chevron-down
 
-                  <div class="mt-2 sm:mt-0 sm:ml-4">
-                    <div class="-m-1 flex flex-wrap items-center">
-                      <% filtered_page_tags.each do |page_tag| %>
-                        <span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
-                          <span><%= page_tag.tag %></span>
-                          <%= link_to(polymorphic_path(content_type_class, { slug: params.fetch(:slug, []) - [page_tag.slug] })) do %>
-                            <button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
-                              <span class="sr-only">Remove filter for <%= page_tag.tag %></span>
-                              <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-                                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
-                              </svg>
-                            </button>
-                          <% end %>
+                            Open: "-rotate-180", Closed: "rotate-0"
+                          -->
+                          <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                          </svg>
                         </span>
-                      <% end %>
+                      </button>
+                    </h3>
+                    <!-- Filter section, show/hide based on section state. -->
+                    <div class="pt-6" id="filter-section-1">
+                      <div class="space-y-6">
+                        <div class="flex items-center">
+                          <input id="filter-mobile-color-0" name="color[]" value="white" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-color-0" class="ml-3 text-sm text-gray-500"> White </label>
+                        </div>
+
+                        <div class="flex items-center">
+                          <input id="filter-mobile-color-1" name="color[]" value="beige" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-color-1" class="ml-3 text-sm text-gray-500"> Beige </label>
+                        </div>
+
+                        <div class="flex items-center">
+                          <input id="filter-mobile-color-2" name="color[]" value="blue" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-color-2" class="ml-3 text-sm text-gray-500"> Blue </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="border-t border-gray-200 px-4 py-6">
+                    <h3 class="-mx-2 -my-3 flow-root">
+                      <!-- Expand/collapse section button -->
+                      <button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-2" aria-expanded="false">
+                        <span class="font-medium text-gray-900"> Sizes </span>
+                        <span class="ml-6 flex items-center">
+                          <!--
+                            Expand/collapse icon, toggle classes based on section open state.
+
+                            Heroicon name: solid/chevron-down
+
+                            Open: "-rotate-180", Closed: "rotate-0"
+                          -->
+                          <svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                          </svg>
+                        </span>
+                      </button>
+                    </h3>
+                    <!-- Filter section, show/hide based on section state. -->
+                    <div class="pt-6" id="filter-section-2">
+                      <div class="space-y-6">
+                        <div class="flex items-center">
+                          <input id="filter-mobile-sizes-0" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-sizes-0" class="ml-3 text-sm text-gray-500"> S </label>
+                        </div>
+
+                        <div class="flex items-center">
+                          <input id="filter-mobile-sizes-1" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-sizes-1" class="ml-3 text-sm text-gray-500"> M </label>
+                        </div>
+
+                        <div class="flex items-center">
+                          <input id="filter-mobile-sizes-2" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
+                          <label for="filter-mobile-sizes-2" class="ml-3 text-sm text-gray-500"> L </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+
+            <!-- Filters -->
+            <section aria-labelledby="filter-heading">
+              <h2 id="filter-heading" class="sr-only">Filters</h2>
+
+              <div class="relative z-10 bg-white border-b border-gray-200 pb-4">
+                <div class="max-w-7xl mx-auto px-4 flex items-center justify-between sm:px-6 lg:px-8">
+                  <div data-controller="dropdown" class="relative inline-block text-left">
+                    <div>
+                      <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
+                        Sort <%= chevron_down %>
+                      </button>
+                    </div>
+
+                    <div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                      <div class="py-1" role="none">
+                        <!--
+                          Active: "bg-gray-100", Not Active: ""
+
+                          Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
+                        -->
+                        <a href="#" data-action="dropdown#toggle" class="font-medium text-gray-900 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">Favorites First</a>
+                        <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">Alphabetical</a>
+                        <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Recently-edited</a>
+                        <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Order created</a>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Mobile filter dialog toggle, controls the 'mobileFiltersOpen' state. -->
+                  <button type="button" class="inline-block text-sm font-medium text-gray-700 hover:text-gray-900 sm:hidden">Filters</button>
+
+                  <div class="hidden sm:block">
+                    <div class="flow-root">
+                      <div class="-mx-4 flex items-center divide-x divide-gray-200">
+                        <div data-controller="dropdown" class="px-4 relative inline-block text-left">
+                          <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900 active:bg-white" aria-expanded="false">
+                            <span>Tagged</span>
+                            <span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-100 text-xs font-semibold text-gray-700 tabular-nums">
+                              <%= filtered_page_tags.try(:count) || 0 %>
+                            </span>
+                            <%= chevron_down %>
+                          </button>
+
+                          <div data-dropdown-target="menu" class="w-64 origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            <form class="space-y-4">
+                              <% page_tags.each do |page_tag| %>
+                                <div class="flex items-center">
+                                  <input id="filter-tag-<%= page_tag.id %>" name="slug[]" <%= 'checked' if filtered_page_tags.map(&:slug).include?(page_tag.slug) %> value="<%= page_tag.slug %>" type="checkbox" class="h-4 w-4 border-gray-300 rounded <%= content_type_class.text_color %> focus:ring-notebook-blue">
+                                  <label for="filter-tag-<%= page_tag.id %>" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"><%= page_tag.tag %></label>
+                                </div>
+                              <% end %>
+
+                              <% if page_tags.any? %>
+                                <div class="flex text-right">
+                                  <button data-action="dropdown#toggle" class="bg-notebook-blue hover:bg-blue-500 text-white rounded w-full px-2 py-1">
+                                    Filter
+                                  </button>
+                                </div>
+                              <% else %>
+                                <div class="bg-blue-50 p-4">
+                                  Add tags to your <%= content_type_name %> pages to be able to filter them here. 
+                                </div>
+                              <% end %>
+                            </form>
+                          </div>
+                        </div>
+
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            <% end %>
-          </section>
-        </div>
 
-        <%# render partial: 'content/components/list_filter_bar', locals: { content_type: content_type_class } %>
+              <!-- Active filters -->
+              <% if filtered_page_tags.any? %>
+                <div class="bg-gray-100">
+                  <div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
+                    <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                      Showing only <%= content_type_name.pluralize %> with <%= 'tag'.pluralize(filtered_page_tags.count) %> 
+                      <span class="sr-only">, active</span>
+                    </h3>
 
-        <%# to be made into new card list partial? %>
-        <% if content.any? %>
-          <%= render partial: content_display_partial, locals: { content: content } %>
-        <% end %>
+                    <div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
 
-        <% if content.empty? %>
-          <div class="container mx-auto flex">
-            <div class="w-1/2 text-center p-6">
-              <button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                <i class="material-icons text-6xl <%= content_type_class.text_color %>">list</i>
-                <div class="mt-2 block text-sm font-medium text-gray-900 mb-1">
-                  Customize your <%= content_type_name.downcase %> page template
+                    <div class="mt-2 sm:mt-0 sm:ml-4">
+                      <div class="-m-1 flex flex-wrap items-center">
+                        <% filtered_page_tags.each do |page_tag| %>
+                          <span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
+                            <span><%= page_tag.tag %></span>
+                            <%= link_to(polymorphic_path(content_type_class, { slug: params.fetch(:slug, []) - [page_tag.slug] })) do %>
+                              <button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
+                                <span class="sr-only">Remove filter for <%= page_tag.tag %></span>
+                                <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                                  <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                                </svg>
+                              </button>
+                            <% end %>
+                          </span>
+                        <% end %>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-                <span class="rounded bg-notebook-blue text-white px-2 py-1 text-xs">
-                  recommended before creating your first <%= content_type_name.downcase %>
-                </span>
-              </button>
-            </div>
-            <div class="w-1/2 text-center p-6">
-              <button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                <i class="material-icons text-6xl <%= content_type_class.text_color %>"><%= content_type_class.icon %></i>
-                <span class="mt-2 block text-sm font-medium text-gray-900">Create your first <%= content_type_name.downcase %></span>
-              </button>
-            </div>
+              <% end %>
+            </section>
           </div>
-        <% end %>
 
+          <%# render partial: 'content/components/list_filter_bar', locals: { content_type: content_type_class } %>
 
+          <%# to be made into new card list partial? %>
+          <% if content.any? %>
+            <%= render partial: content_display_partial, locals: { content: content } %>
+          <% end %>
 
-
-
-      </main>
-
-      <!-- second sidebar -->
-      <aside class="hidden xl:order-first xl:flex xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 min-h-screen">
-        <div class="px-6 pt-4 pb-4 bg-white">
-          <h2 class="text-lg font-medium text-gray-900">
-            <i class="material-icons float-left <%= content_type_class.text_color %> text-xl mr-2"><%= content_type_class.icon %></i>
-            Your <%= content_type_name.pluralize %>
-          </h2>
-
-          <p class="mt-4 text-xs tracking-wider font-bold text-gray-500">
-            Showing <%= pluralize content.count, 'page' %>
-          </p>
-          <ul class="mt-1 text-gray-600">
-            <% content_counts_per_type.each do |content_type, count| %>
-              <li>
-                <i class="material-icons float-left mr-2 <%= content_class_from_name(content_type).text_color %>">
-                  <%= content_class_from_name(content_type).icon %>
-                </i>
-                <span class="text-sm">
-                  <%= number_with_delimiter count %>
-                  <%= content_type.downcase.pluralize count %>
-                </span>
-              </li>
-            <% end %>
-          </ul>
-          
-          <!-- todo put filter/search bar here -->
-          <!--
-          <form class="mt-6 flex space-x-4" action="#">
-            <div class="flex-1 min-w-0">
-              <label for="search" class="sr-only">Search</label>
-              <div class="relative rounded-md shadow-sm">
-                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-                  </svg>
-                </div>
-                <input type="search" name="search" id="search" class="focus:ring-pink-500 focus:border-pink-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search">
+          <% if content.empty? %>
+            <div class="container mx-auto flex">
+              <div class="w-1/2 text-center p-6">
+                <button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                  <i class="material-icons text-6xl <%= content_type_class.text_color %>">list</i>
+                  <div class="mt-2 block text-sm font-medium text-gray-900 mb-1">
+                    Customize your <%= content_type_name.downcase %> page template
+                  </div>
+                  <span class="rounded bg-notebook-blue text-white px-2 py-1 text-xs">
+                    recommended before creating your first <%= content_type_name.downcase %>
+                  </span>
+                </button>
+              </div>
+              <div class="w-1/2 text-center p-6">
+                <button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                  <i class="material-icons text-6xl <%= content_type_class.text_color %>"><%= content_type_class.icon %></i>
+                  <span class="mt-2 block text-sm font-medium text-gray-900">Create your first <%= content_type_name.downcase %></span>
+                </button>
               </div>
             </div>
-            <button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">Search</span>
-            </button>
-          </form>
-          -->
+          <% end %>
 
-          <!--
-          <form class="mt-6 flex space-x-2" action="#">
-            <button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-              <i class="material-icons float-left mr-2 text-sm <%= Folder.text_color %>"><%= Folder.icon %></i>
-              New Folder
-            </button>
-            <button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-              <i class="material-icons float-left mr-2 text-sm <%= Document.text_color %>"><%= Document.icon %></i>
-              New <%= content_type_name %>
-            </button>
-          </form>
-          -->
-        </div>
 
-        <!-- Folder & stats -->
-        <nav class="flex-1 min-h-0 overflow-y-auto" aria-label="Directory">
-          <div class="relative">
-            <div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-100 px-6 py-1 text-sm font-medium text-gray-500">
-              <h3>
-                <i class="material-icons float-left text-sm mr-1 <%= Folder.text_color %>"><%= Folder.icon %></i>
-                Folders
-                <span class="float-right bg-gray-100 rounded px-1 text-xs mt-0.5">
-                  <%= folders.count %>
-                </span>
-              </h3>
-            </div>
-            <ul role="list" class="relative z-0 divide-y divide-gray-200">
-              <% folders.each do |folder| %>
+
+
+
+        </main>
+
+        <!-- second sidebar -->
+        <aside class="hidden xl:order-first xl:flex xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 min-h-screen">
+          <div class="px-6 pt-4 pb-4 bg-white">
+            <h2 class="text-lg font-medium text-gray-900">
+              <i class="material-icons float-left <%= content_type_class.text_color %> text-xl mr-2"><%= content_type_class.icon %></i>
+              Your <%= content_type_name.pluralize %>
+            </h2>
+
+            <p class="mt-4 text-xs tracking-wider font-bold text-gray-500">
+              Showing <%= pluralize content.count, 'page' %>
+            </p>
+            <ul class="mt-1 text-gray-600">
+              <% content_counts_per_type.each do |content_type, count| %>
                 <li>
-                  <div class="relative px-6 py-2 flex items-center space-x-3 hover:bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-500">
+                  <i class="material-icons float-left mr-2 <%= content_class_from_name(content_type).text_color %>">
+                    <%= content_class_from_name(content_type).icon %>
+                  </i>
+                  <span class="text-sm">
+                    <%= number_with_delimiter count %>
+                    <%= content_type.downcase.pluralize count %>
+                  </span>
+                </li>
+              <% end %>
+            </ul>
+            
+            <!-- todo put filter/search bar here -->
+            <!--
+            <form class="mt-6 flex space-x-4" action="#">
+              <div class="flex-1 min-w-0">
+                <label for="search" class="sr-only">Search</label>
+                <div class="relative rounded-md shadow-sm">
+                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                    </svg>
+                  </div>
+                  <input type="search" name="search" id="search" class="focus:ring-pink-500 focus:border-pink-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search">
+                </div>
+              </div>
+              <button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
+                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Search</span>
+              </button>
+            </form>
+            -->
+
+            <!--
+            <form class="mt-6 flex space-x-2" action="#">
+              <button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
+                <i class="material-icons float-left mr-2 text-sm <%= Folder.text_color %>"><%= Folder.icon %></i>
+                New Folder
+              </button>
+              <button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
+                <i class="material-icons float-left mr-2 text-sm <%= Document.text_color %>"><%= Document.icon %></i>
+                New <%= content_type_name %>
+              </button>
+            </form>
+            -->
+          </div>
+
+          <!-- Folder & stats -->
+          <nav class="flex-1 min-h-0 overflow-y-auto" aria-label="Directory">
+            <div class="relative">
+              <div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-100 px-6 py-1 text-sm font-medium text-gray-500">
+                <h3>
+                  <i class="material-icons float-left text-sm mr-1 <%= Folder.text_color %>"><%= Folder.icon %></i>
+                  Folders
+                  <span class="float-right bg-gray-100 rounded px-1 text-xs mt-0.5">
+                    <%= folders.count %>
+                  </span>
+                </h3>
+              </div>
+              <ul role="list" class="relative z-0 divide-y divide-gray-200">
+                <% folders.each do |folder| %>
+                  <li>
+                    <div class="relative px-6 py-2 flex items-center space-x-3 hover:bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-500">
+                      <div class="flex-shrink-0">
+                        <i class="material-icons pt-1 text-4xl <%= Folder.text_color %>"><%= Folder.icon %></i>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <%= link_to folder, class: 'focus:outline-none' do %>
+                          <!-- Extend touch target to entire panel -->
+                          <span class="absolute inset-0" aria-hidden="true"></span>
+                          <p class="text-sm font-medium text-gray-900 w-48"><%= folder.title %></p>
+                        <% end %>
+                      </div>
+                    </div>
+                  </li>
+                <% end %>
+                <li>
+                  <div class="relative cursor-pointer select-none px-6 flex items-center space-x-3 hover:bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-500"
+                     @click="showNewFolderModal=true"
+                  >
                     <div class="flex-shrink-0">
-                      <i class="material-icons pt-4 text-4xl <%= Folder.text_color %>"><%= Folder.icon %></i>
+                      <i class="material-icons pt-1 text-4xl <%= Folder.text_color %>">add</i>
                     </div>
                     <div class="flex-1 min-w-0">
-                      <%= link_to folder, class: 'focus:outline-none' do %>
-                        <!-- Extend touch target to entire panel -->
-                        <span class="absolute inset-0" aria-hidden="true"></span>
-                        <p class="text-sm font-medium text-gray-900 w-48"><%= folder.title %></p>
-                      <% end %>
+                      <p class="text-sm font-medium text-gray-900">Add a folder</p>
                     </div>
                   </div>
                 </li>
-              <% end %>
-              <li>
-                <div class="relative px-6 flex items-center space-x-3 hover:bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-500">
-                  <div class="flex-shrink-0">
-                    <i class="material-icons pt-1 text-4xl <%= Folder.text_color %>">add</i>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <%= link_to '', class: 'focus:outline-none' do %>
-                      <!-- Extend touch target to entire panel -->
-                      <span class="absolute inset-0" aria-hidden="true"></span>
-                      <p class="text-sm font-medium text-gray-900">Add a folder</p>
-                    <% end %>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div class="relative pb-8">
-            <div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-100 px-6 py-1 text-sm font-medium text-gray-500">
-              <h3>
-                <i class="material-icons float-left text-sm mr-1 <%= DocumentAnalysis.text_color %>"><%= DocumentAnalysis.icon %></i>
-                Stats
-              </h3>
+              </ul>
             </div>
-            <div class="px-6 leading-relaxed pt-4">
-              <!--
-              <% content_counts_per_type.each do |content_type, count| %>
-                <div class="inline-block mr-4 mb-2">
-                  <i class="material-icons float-left mr-1 <%= content_class_from_name(content_type).text_color %>"><%= content_class_from_name(content_type).icon %></i>
-                  <span class="text-sm">
-                    <span class="font-bold text-gray-700"><%= count %></span>
-                    <%= content_type.pluralize count %>
-                  </span>
-                </div>
-              <% end %>
-              -->
 
-              <div class="inline-block mr-4">
-                <i class="material-icons float-left mr-1 <%= DocumentAnalysis.text_color %>">spellcheck</i>
-                <% total_word_count = content.map(&:cached_word_count).reject(&:nil?).sum %>
-                <span class="text-sm">
-                  <strong class="font-bold text-gray-700"><%= number_with_delimiter total_word_count %></strong>
-                  <%= 'total word'.pluralize(total_word_count) %>
-                </span>
+            <div class="relative pb-8">
+              <div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-100 px-6 py-1 text-sm font-medium text-gray-500">
+                <h3>
+                  <i class="material-icons float-left text-sm mr-1 <%= DocumentAnalysis.text_color %>"><%= DocumentAnalysis.icon %></i>
+                  Stats
+                </h3>
               </div>
-
-              <% if false && content.any? { |content_page| content_page.page_type != Universe.name } %>
-                <div class="whitespace-nowrap inline-block">
-                  in
-                  <div class="inline-block mr-4">
-                    <i class="material-icons float-left mr-0.5 <%= Universe.text_color %>"><%= Universe.icon %></i>
-                    <%# todo this is broken because we don't actually set universe on ContentPage imports %>
-                    <% total_universe_count = content.reject { |page| page.universe.nil? }.count %>
+              <div class="px-6 leading-relaxed pt-4">
+                <!--
+                <% content_counts_per_type.each do |content_type, count| %>
+                  <div class="inline-block mr-4 mb-2">
+                    <i class="material-icons float-left mr-1 <%= content_class_from_name(content_type).text_color %>"><%= content_class_from_name(content_type).icon %></i>
                     <span class="text-sm">
-                      <strong class="font-bold text-gray-700"><%= number_with_delimiter total_universe_count %></strong>
-                      <%= 'universe'.pluralize(total_universe_count) %>
+                      <span class="font-bold text-gray-700"><%= count %></span>
+                      <%= content_type.pluralize count %>
                     </span>
                   </div>
+                <% end %>
+                -->
+
+                <div class="inline-block mr-4">
+                  <i class="material-icons float-left mr-1 <%= DocumentAnalysis.text_color %>">spellcheck</i>
+                  <% total_word_count = content.map(&:cached_word_count).reject(&:nil?).sum %>
+                  <span class="text-sm">
+                    <strong class="font-bold text-gray-700"><%= number_with_delimiter total_word_count %></strong>
+                    <%= 'total word'.pluralize(total_word_count) %>
+                  </span>
                 </div>
-              <% end %>
+
+                <% if false && content.any? { |content_page| content_page.page_type != Universe.name } %>
+                  <div class="whitespace-nowrap inline-block">
+                    in
+                    <div class="inline-block mr-4">
+                      <i class="material-icons float-left mr-0.5 <%= Universe.text_color %>"><%= Universe.icon %></i>
+                      <%# todo this is broken because we don't actually set universe on ContentPage imports %>
+                      <% total_universe_count = content.reject { |page| page.universe.nil? }.count %>
+                      <span class="text-sm">
+                        <strong class="font-bold text-gray-700"><%= number_with_delimiter total_universe_count %></strong>
+                        <%= 'universe'.pluralize(total_universe_count) %>
+                      </span>
+                    </div>
+                  </div>
+                <% end %>
+              </div>
             </div>
-          </div>
-        </nav>
-      </aside>
+          </nav>
+        </aside>
+      </div>
     </div>
   </div>
-</div>
 
-<!-- New folder modal -->
-<div class="fixed z-10 inset-0 overflow-y-auto" role="dialog" aria-modal="true">
-  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
-    <!-- This element is to trick the browser into centering the modal contents. -->
-    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+  <!-- New folder modal -->
+  <div class="fixed z-10 inset-0 overflow-y-auto" role="dialog" aria-modal="true"
+    x-show="showNewFolderModal"
+    @click.away="showNewFolderModal=false"
+    x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90"
+  >
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+      <!-- This element is to trick the browser into centering the modal contents. -->
+      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-    <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-      <%= form_for Folder.new do |f| %>
-        <%= f.hidden_field :context, value: content_type_name %>
-        <%= f.hidden_field :parent_folder_id, value: @parent_folder %>
+      <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <%= form_for Folder.new do |f| %>
+          <%= f.hidden_field :context, value: content_type_name %>
+          <%= f.hidden_field :parent_folder_id, value: @parent_folder %>
 
-        <div>
-          <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
-            <i class="material-icons <%= Folder.text_color %> h-6 w-6"><%= Folder.icon %></i>
-          </div>
-          <div class="mt-3 text-center sm:mt-5">
-            <h3 class="text-lg leading-6 font-medium text-gray-900">Create a folder</h3>
+          <div>
+            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+              <i class="material-icons <%= Folder.text_color %> h-6 w-6"><%= Folder.icon %></i>
+            </div>
+            <div class="mt-3 text-center sm:mt-5">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">Create a folder</h3>
 
-            <div class="mt-2 text-left">
-              <label for="title" class="block text-sm font-medium text-gray-700">Folder name</label>
-              <%= f.text_field :title, placeholder: "New Folder", value: "", class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
+              <div class="mt-2 text-left">
+                <label for="title" class="block text-sm font-medium text-gray-700">Folder name</label>
+                <%= f.text_field :title, placeholder: "New Folder", value: "", class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" %>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
-          <%= f.submit 'Create folder', class: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 #{Folder.color} text-base font-medium text-white hover:bg-notebook-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm cursor-pointer" %>
-          <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">Cancel</button>
-        </div>
-      <% end %>
+          <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+            <%= f.submit 'Create folder', class: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 #{Folder.color} text-base font-medium text-white hover:bg-notebook-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm cursor-pointer" %>
+            <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+              @click="showNewFolderModal=false"
+            >
+              Cancel
+            </button>
+          </div>
+        <% end %>
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file