Add bottom navigation for standalone mode

app/controllers/users_controller.rb

@@ -1,5 +1,5 @@
 class UsersController < ApplicationController
-  before_action :authenticate_user!, only: [:edit, :update]
+  before_action :authenticate_user!, only: [:edit, :update, :profile]
 
   def show
     @user = User.find_by!(username: params[:id])
@@ -27,6 +27,10 @@ def show
     @check_in_months = check_in_range.map { |date| date.strftime("%B") }.uniq
   end
 
+  def profile
+    @user = current_user
+  end
+
   def edit
     @user = current_user
   end

app/views/home/_homepage_actions.html.erb

@@ -7,15 +7,13 @@
         <%= render "components/icons/filter" %>
       </span>
       Filters
-
       <span
         data-home-filters-target="counter"
         class="inline-flex items-center justify-center w-4 h-4 ml-2 text-xs font-semibold text-white bg-brown-200 rounded-full <%= filter_counter > 0 ? "" : "hidden" %>">
         <%= filter_counter %>
       </span>
     <% end %>
   </span>
-
   <span data-controller="pwa-install" class="relative inline-flex ml-2 standalone:hidden">
     <%= button_tag type: "button",
       data: {
@@ -30,15 +28,13 @@
       Install
     <% end %>
   </span>
-
-  <span class="relative inline-flex ml-2 md:hidden">
+  <span class="relative inline-flex ml-2 md:hidden standalone:hidden">
     <%= link_to map_path, "data-turbo": false, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 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-brown-500" do %>
       <span class="w-6 mr-2">
         <%= render "components/icons/map" %>
       </span>
       Live Map
     <% end %>
-
     <span class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
       <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
       <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>

app/views/layouts/_bottom_nav.html.erb

@@ -0,0 +1,36 @@
+<div class="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-brown-200 rounded-t-3xl bottom-0 left-1/2 dark:bg-brown-700 dark:border-brown-600 browser:hidden md:hidden">
+  <div class="grid h-full max-w-lg grid-cols-5 mx-auto">
+    <a href="/" class="inline-flex flex-col items-center justify-center px-5 rounded-tl-3xl hover:bg-brown-50 dark:hover:bg-brown-800 group">
+      <svg class="w-5 h-5 mb-1 text-brown-500 dark:text-brown-400 group-hover:text-brown-400 dark:group-hover:text-brown-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
+      </svg>
+      <span class="sr-only">Home</span>
+    </a>
+    <a href="/map" class="inline-flex flex-col items-center justify-center px-5 hover:bg-brown-50 dark:hover:bg-brown-800 group">
+      <svg class="w-6 h-6 mb-1 text-brown-500 dark:text-brown-400 group-hover:text-brown-400 dark:group-hover:text-brown-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+      </svg>
+      <span class="sr-only">Wallet</span>
+    </a>
+    <div class="flex items-center justify-center">
+      <a href="/new" data-turbo="false" class="inline-flex items-center justify-center w-10 h-10 font-medium bg-brown-600 rounded-full hover:bg-brown-700 group focus:ring-4 focus:ring-brown-300 focus:outline-none dark:focus:ring-brown-800">
+        <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+        </svg>
+        <span class="sr-only">New item</span>
+      </a>
+    </div>
+    <a href="/about" class="inline-flex flex-col items-center justify-center px-5 hover:bg-brown-50 dark:hover:bg-brown-800 group">
+      <svg class="w-7 h-7 mb-1 text-brown-500 dark:text-brown-400 group-hover:text-brown-400 dark:group-hover:text-brown-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.6-8.5h0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+      </svg>
+      <span class="sr-only">About</span>
+    </a>
+    <a  href="/u/profile" class="inline-flex flex-col items-center justify-center px-5 rounded-tr-3xl hover:bg-brown-50 dark:hover:bg-brown-800 group">
+      <svg class="w-5 h-5 mb-1 text-brown-500 dark:text-brown-400 group-hover:text-brown-400 dark:group-hover:text-brown-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+      </svg>
+      <span class="sr-only">Profile</span>
+    </a>
+  </div>
+</div>

app/views/layouts/_header.html.erb

@@ -1,5 +1,5 @@
 <% unless (controller_path == "coffee_shops" && action_name == "show") %>
-  <div class="relative bg-white" x-data="Components.popover({ open: false, focus: false })" x-init="init()" @keydown.escape="onEscape" @close-popover-group.window="onClosePopoverGroup">
+  <div class="relative bg-white standalone:sticky top-0 z-20" x-data="Components.popover({ open: false, focus: false })" x-init="init()" @keydown.escape="onEscape" @close-popover-group.window="onClosePopoverGroup">
     <div class="absolute inset-0 shadow z-20 pointer-events-none" aria-hidden="true"></div>
     <div class="relative z-20">
       <div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-8">
@@ -8,7 +8,10 @@
             <%= image_tag "logo.svg", class: "h-8 w-auto sm:h-10", alt: "petakopi", width: "40px", height: "40px" %>
           <% end %>
         </div>
-        <div class="-mr-2 -my-2 md:hidden">
+        <div class="rounded-md text-base text-brown-600 font-medium hover:text-gray-900 browser:hidden md:hidden">
+          <%= render "layouts/menu/directories" %>
+        </div>
+        <div class="-mr-2 -my-2 md:hidden standalone:hidden">
           <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brown-500" @click="toggle" @mousedown="if (open) $event.preventDefault()" aria-expanded="true" :aria-expanded="open.toString()">
             <span class="sr-only">Open menu</span>
             <svg class="h-6 w-6" x-description="Heroicon name: outline/menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -30,7 +33,6 @@
               <%= link_to "Admin", admin_coffee_shops_path, class: "text-base font-medium text-red-500 hover:text-red-900" %>
             <% end %>
           </nav>
-
           <% if current_user %>
             <div x-data="Components.menu({ open: false })" x-init="init()" @keydown.escape.stop="open = false; focusButton()" @click.away="onClickAway($event)" class="ml-3 relative">
               <div>
@@ -46,14 +48,12 @@
                   <% end %>
                 </button>
               </div>
-
               <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" x-ref="menu-items" x-description="Dropdown menu, show/hide based on menu state." x-bind:aria-activedescendant="activeDescendant" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" @keydown.arrow-up.prevent="onArrowUp()" @keydown.arrow-down.prevent="onArrowDown()" @keydown.tab="open = false" @keydown.enter.prevent="open = false; focusButton()" @keyup.space.prevent="open = false; focusButton()" style="display: none;">
                 <a href="<%= user_path(id: current_user.username) %>" class="block px-4 py-2 text-sm text-gray-700" x-state:on="Active" x-state:off="Not Active" :class="{ 'bg-gray-100': activeIndex === 0 }" role="menuitem" tabindex="-1" id="user-menu-item-0" @mouseenter="activeIndex = 0" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Your Profile</a>
                 <a href="<%= edit_user_path(id: current_user.username) %>" class="block px-4 py-2 text-sm text-gray-700" x-state:on="Active" x-state:off="Not Active" :class="{ 'bg-gray-100': activeIndex === 1 }" role="menuitem" tabindex="-1" id="user-menu-item-1" @mouseenter="activeIndex = 1" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Your Account</a>
                 <a href="<%= coffee_shops_path %>" class="block px-4 py-2 text-sm text-gray-700" :class="{ 'bg-gray-100': activeIndex === 2 }" role="menuitem" tabindex="-1" id="user-menu-item-2" @mouseenter="activeIndex = 2" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Your Coffee Shops</a>
                 <a href="<%= destroy_user_session_path %>" data-turbo-method="delete" class="block px-4 py-2 text-sm text-gray-700" :class="{ 'bg-gray-100': activeIndex === 3 }" role="menuitem" tabindex="-1" id="user-menu-item-3" @mouseenter="activeIndex = 3" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Sign out</a>
               </div>
-
             </div>
           <% else %>
             <div class="flex items-center md:ml-12">
@@ -64,7 +64,6 @@
         </div>
       </div>
     </div>
-
     <div x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-description="Mobile menu, show/hide based on mobile menu state." class="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden" x-ref="panel" @click.away="open = false" style="display: none">
       <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
         <div class="pt-5 pb-6 px-5 sm:pb-8">
@@ -81,7 +80,6 @@
               </button>
             </div>
           </div>
-
         </div>
         <div class="py-6 px-5">
           <div class="grid grid-cols-1 gap-4">
@@ -97,24 +95,22 @@
               <%= link_to "Admin", admin_coffee_shops_path, class: "rounded-md text-base font-medium text-red-500 hover:text-red-900" %>
             <% end %>
           </div>
-
           <% if current_user %>
             <div class="mt-3 relative" x-data="Components.popover({ open: false, focus: false })" x-init="init()" @keydown.escape="onEscape" @close-popover-group.window="onClosePopoverGroup">
               <button type="button" x-state:on="Item active" x-state:off="Item inactive" class="group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500 text-gray-900" :class="{ 'text-gray-900': open, 'text-gray-500': !(open) }" @click="toggle" @mousedown="if (open) $event.preventDefault()" aria-expanded="true" :aria-expanded="open.toString()">
-                  <% if current_user.avatar.attached? %>
-                    <%= image_tag rails_public_blob_url(current_user.avatar), class: "h-10 w-10 rounded-full border border-brown" %>
-                  <% else %>
-                    <span class="h-8 w-8 rounded-full">
-                      <svg class="text-brown-500 group-hover:text-brown-500 flex-shrink-0 -ml-1 mr-3 h-8 w-8" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </span>
-                  <% end %>
+                <% if current_user.avatar.attached? %>
+                  <%= image_tag rails_public_blob_url(current_user.avatar), class: "h-10 w-10 rounded-full border border-brown" %>
+                <% else %>
+                  <span class="h-8 w-8 rounded-full">
+                    <svg class="text-brown-500 group-hover:text-brown-500 flex-shrink-0 -ml-1 mr-3 h-8 w-8" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </span>
+                <% end %>
                 <svg x-state:on="Item active" x-state:off="Item inactive" class="ml-2 h-5 w-5 group-hover:text-gray-500 transition ease-in-out duration-150 text-gray-600" :class="{ 'text-gray-600': open, 'text-gray-400': !(open) }" x-description="Heroicon name: solid/chevron-down" 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"></path>
                 </svg>
               </button>
-
               <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" x-description="Flyout menu, show/hide based on flyout menu state." class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0 lg:max-w-3xl" x-ref="panel" @click.away="open = false" style="display: none">
                 <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                   <div class="relative bg-white grid grid-cols-1 gap-4 px-5 py-6">

app/views/layouts/application.html.erb

@@ -1,20 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <%= render "layouts/head" %>
-
-  <body class="bg-brown-100 bg-opacity-5">
+  <body class="bg-brown-100 bg-opacity-5 standalone:pb-10">
     <%= render "layouts/header" unless turbo_native_app? %>
-
     <div class="mx-auto lg:max-w-7xl px-4 lg:px-8">
       <div class"mt-2 text-center text-sm text-gray-600">
         <%= render "components/alert", alerts: alert if alert %>
         <%= render "components/notice", alerts: notice if notice %>
       </div>
-
       <div class="min-h-full flex flex-col justify-center mb-12 mt-4 lg:mt-6">
         <%= yield %>
       </div>
     </div>
+    <%= render "layouts/bottom_nav" %>
     <%= yield(:js) if content_for?(:js) %>
   </body>
 </html>

app/views/layouts/menu/_directories.html.erb

@@ -5,10 +5,9 @@
       <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"></path>
     </svg>
   </button>
-
-  <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" x-description="Flyout menu, show/hide based on flyout menu state." class="absolute z-10 left-1/2 lg:left-[250%] transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0 lg:max-w-3xl" x-ref="panel" @click.away="open = false" style="display: none">
+  <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" x-description="Flyout menu, show/hide based on flyout menu state." class="absolute z-10 left-1/2 lg:left-[250%] transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0 lg:max-w-3xl standalone:-translate-x-full" x-ref="panel" @click.away="open = false" style="display: none">
     <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
-      <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-3">
+      <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-3 standalone:grid-cols-2">
         <%= render partial: "layouts/menu/directory",
           collection: GoogleLocation.all.pluck(:administrative_area_level_1).compact.uniq.sort,
           as: :state,

app/views/map/index.html.erb

@@ -3,17 +3,14 @@
 <%= content_for :extra_styles do %>
   <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
 <% end %>
-
-<div class="pr-4 py-5 sm:py-6 sm:pr-6">
+<div class="pr-4 py-5 sm:py-6 sm:pr-6 absolute top-16 z-10">
   <% Tag.all.order(:position).each do |tag| %>
     <%= link_to map_path(tags: tag.slug), data: { turbo: false } do %>
       <%= render partial: "shared/tags/#{tag.slug.underscore}", locals: { name: tag.name } %>
     <% end %>
   <% end %>
 </div>
-
-<div id="map" style="<%= turbo_native_app? ? "position: absolute; top: 0; bottom: 0; width: 100%" : "height: 500px" %>"></div>
-
+<div id="map" style="position: absolute; left: 0; bottom: 0; height: calc(100vh - 4.5rem); width: 100%"></div>
 <%= content_for :js do %>
   <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
   <script>
@@ -171,5 +168,4 @@
       setTimeout(() => this.map.resize(), 0);
     })
   </script>
-
 <% end %>