Sliding drawer Search results on Mobile


      app/assets/images/icons/handle.svg

diff --git a/app/assets/images/icons/handle.svg b/app/assets/images/icons/handle.svg
new file mode 100644
index 0000000..9eeba31
--- /dev/null
+++ b/app/assets/images/icons/handle.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" stroke-width="3.0" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="0" y1="12" x2="24" y2="12" />
+</svg>


      app/javascript/controllers/sliding_drawer_controller.js

diff --git a/app/javascript/controllers/sliding_drawer_controller.js b/app/javascript/controllers/sliding_drawer_controller.js
new file mode 100644
index 0000000..3f91dcf
--- /dev/null
+++ b/app/javascript/controllers/sliding_drawer_controller.js
@@ -0,0 +1,33 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static classes = [ "active" ]
+  static targets = [ "draggable" ]
+  static values = { maximumHeight: Number, offsetHeight: Number }
+
+  offsetHeightValueChanged(offsetHeight) {
+    if (offsetHeight) {
+      this.element.style.setProperty("--top-offset", `${offsetHeight}vh`)
+    }
+  }
+
+  activate({ currentTarget } ) {
+    if (this.hasActiveClass) currentTarget.classList.add(this.activeClass)
+  }
+
+  drag(event) {
+    event.preventDefault()
+
+    const [ latestTouch ] = event.changedTouches
+    const { height } = window.visualViewport
+    const offsetPercent = latestTouch.pageY / height
+    const minimumPercent = this.element.parentElement.offsetTop / height
+    const minimumHeightValue = Math.max(offsetPercent, minimumPercent) * 100
+
+    this.offsetHeightValue = Math.min(minimumHeightValue, this.maximumHeightValue)
+  }
+
+  deactivate({ currentTarget } ) {
+    if (this.hasActiveClass) currentTarget.classList.remove(this.activeClass)
+  }
+}


      app/javascript/packs/application.css

diff --git a/app/javascript/packs/application.css b/app/javascript/packs/application.css
index 0c78c11..d46d9bc 100644
--- a/app/javascript/packs/application.css
+++ b/app/javascript/packs/application.css
@@ -2,27 +2,25 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-summary::-webkit-details-marker {
-  display: none;
-}
-
 :root {
   --header-height: 0px;
 }
 
-@responsive {
-  [open] .open\:flex {
-    display: flex;
-  }
+.top-offset {
+  --top-offset: var(--header-height);
 
-  [open] .open\:hidden {
-    display: none;
-  }
+  top: calc(var(--top-offset) - var(--header-height));
+}
 
+@responsive {
   .h-screen-minus-header {
     height: calc(100vh - var(--header-height));
   }
 
+  .h-3\/4-screen-minus-header {
+    height: calc(75vh - var(--header-height));
+  }
+
   .min-h-screen-minus-header {
     min-height: calc(100vh - var(--header-height));
   }


      app/javascript/packs/application.js

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index fbfa33a..38dafb0 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -17,3 +17,5 @@ require("channels")
 // const imagePath = (name) => images(name, true)
 
 import "controllers"
+
+import "visual-viewport/polyfill/visualViewport"


      app/views/application/_sidebar.html.erb

diff --git a/app/views/application/_sidebar.html.erb b/app/views/application/_sidebar.html.erb
index 18f7b71..122bb06 100644
--- a/app/views/application/_sidebar.html.erb
+++ b/app/views/application/_sidebar.html.erb
@@ -1,45 +1,50 @@
-<details class="md:w-1/2 lg:w-1/4 z-10" open>
-  <summary class="
-    bg-cream
-    bg-opacity-75
-    border-2
-    border-clementine
-    bottom-0
-    cursor-pointer
-    fixed
-    flex
-    flex-row
-    focus:shadow-outline
-    h-8
-    hover:shadow-outline
-    items-center
-    justify-center
-    left-1/2
-    list-none
-    mb-8
-    md:hidden
-    outline-none
-    rounded-full
-    text-sm
-    transform
-    -translate-x-1/2
-  ">
-    <div class="hidden open:flex items-center">
-      <%= safe_join [
-        tag.span("List", class: "bg-clementine text-cream rounded-l-full px-5 py-1"),
-        tag.span("Map", class: "text-clementine rounded-r-full px-5 py-1"),
-      ] %>
-    </div>
-
-    <div class="open:hidden flex items-center">
-      <%= safe_join [
-        tag.span("List", class: "text-clementine rounded-l-full px-5 py-1"),
-        tag.span("Map", class: "bg-clementine text-cream rounded-r-full px-5 py-1"),
-      ] %>
-    </div>
-  </summary>
-
-  <section class="bg-cream-lighter p-4 pb-24 md:pb-auto min-h-screen-minus-header overflow-y-auto">
-    <%= yield %>
+<%= tag.section(
+  "data-controller": "sliding-drawer",
+  "data-sliding-drawer-active-class": "shadow-outline",
+  "data-sliding-drawer-maximum-height-value": 75,
+  "class": "
+    absolute
+    bg-cream-lighter
+    inset-0
+    lg:w-1/4
+    md:relative
+    md:top-auto
+    md:w-1/2
+    md:overflow-y-auto
+    p-4
+    top-offset
+    z-10
+  ",
+  **local_assigns
+) do %>
+  <div class="flex justify-center">
+    <%= tag.button \
+      class: "
+        bg-cream
+        border-2
+        cursor-ns-resize
+        cursor-pointer
+        flex
+        flex-row
+        focus:shadow-outline
+        h-8
+        hover:shadow-outline
+        items-center
+        justify-center
+        list-none
+        md:hidden
+        outline-none
+        rounded-full
+      ",
+      "data-sliding-drawer-target": "draggable",
+      "data-action": "
+        touchstart->sliding-drawer#activate
+        touchmove->sliding-drawer#drag
+        touchend->sliding-drawer#deactivate
+      " do %>
+      <%= inline_svg_tag "icons/handle.svg", class: "h-6 w-24 border-brown text-brown-lighter rounded-full", title: "Drag to resize" %>
+    <% end %>
   </div>
-</details>
+
+  <%= yield %>
+<% end %>


      app/views/layouts/application.html.erb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index c1f7928..0e4ac4c 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,7 +13,7 @@
   <body class="bg-cream-lighter flex flex-col items-stretch min-h-screen">
     <%= render "header" %>
 
-    <main class="flex flex-col md:flex-row flex-grow relative">
+    <main class="flex flex-col md:flex-row relative h-screen-minus-header">
       <%= yield %>
     </main>
   </body>


      app/views/locations/index.html.erb

diff --git a/app/views/locations/index.html.erb b/app/views/locations/index.html.erb
index 5551153..a70f38c 100644
--- a/app/views/locations/index.html.erb
+++ b/app/views/locations/index.html.erb
@@ -1,4 +1,6 @@
-<%= render "sidebar" do %>
+<%= render "sidebar", "data-sliding-drawer-offset-height-value": 75 do %>
+  <h1 class="sr-only">Search results in the area</h1>
+
   <p class="mb-4"><%= pluralize locations.size, "result"  %></p>
 
   <ul class="space-y-2">


      app/views/locations/show.html.erb

diff --git a/app/views/locations/show.html.erb b/app/views/locations/show.html.erb
index f5a7f19..31c682b 100644
--- a/app/views/locations/show.html.erb
+++ b/app/views/locations/show.html.erb
@@ -1,7 +1,7 @@
 <% content_for(:document_title, location.name) %>
 
-<%= render "sidebar" do %>
-  <div class="mb-4">
+<%= render "sidebar", "data-sliding-drawer-offset-height-value": 50 do %>
+  <div class="flex items-center justify-between mb-4">
     <h1 class="font-bold text-brown text-2xl"><%= location.name %></h1>
   </div>


      app/views/users/show.html.erb

diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index c1bd54a..059e651 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,6 +1,6 @@
 <% content_for(:document_title, user.name) %>
 
-<%= render "sidebar" do %>
+<%= render "sidebar", "data-sliding-drawer-offset-height-value": 0 do %>
   <div class="grid grid-cols-2 mb-4">
     <h1 class="font-bold text-brown text-2xl"><%= user.name %></h1>
     <%= render "avatar", avatar: user.avatar, class: "place-self-end w-16", width: 64, height: 64 %>


      package.json

diff --git a/package.json b/package.json
index e7e00b7..aa1f369 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "@rails/webpacker": "5.1.1",
     "stimulus": "https://github.com/stimulusjs/dev-builds/archive/b8cc8c4/stimulus.tar.gz",
     "tailwindcss": "^1.8.9",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "visual-viewport": "WICG/visual-viewport"
   },
   "version": "0.1.0",
   "devDependencies": {


      tailwind.config.js

diff --git a/tailwind.config.js b/tailwind.config.js
index 1b2c111..96244e8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,9 +17,9 @@ module.exports = {
           darker: "#ecdbc6",
         }
       },
-      inset: {
-        "1/2": "50%",
-      }
+      cursor: {
+        "ns-resize": "ns-resize",
+      },
     }
   }
 }


      yarn.lock

diff --git a/yarn.lock b/yarn.lock
index 34b2f84..63b3a96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7506,6 +7506,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+visual-viewport@WICG/visual-viewport:
+  version "0.0.0"
+  resolved "https://codeload.github.com/WICG/visual-viewport/tar.gz/f3512eecd59027be5a434bb2c2d3addb95efe20d"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"