feat: add mobile bottom navigation bar
Replace cramped horizontal nav on mobile with a fixed bottom tab bar for thumb-friendly navigation. The header nav is now hidden on mobile (<768px) and the bottom nav provides Home, Shop, About, and Contact links with icons. - Add mobile_bottom_nav component with icon + label nav items - Active page has accent-colored background highlight and larger icon - Add shadow to lift nav visually off the page - Update all page templates with bottom padding and bottom nav - Remove CSS rule that was overriding Tailwind's hidden class - Responsive header padding (tighter on mobile) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -100,7 +100,7 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
|
||||
<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
|
||||
<SimpleshopThemeWeb.ShopComponents.skip_link />
|
||||
|
||||
<%= if @theme_settings.announcement_bar do %>
|
||||
@@ -158,6 +158,8 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
|
||||
<SimpleshopThemeWeb.ShopComponents.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
|
||||
|
||||
<SimpleshopThemeWeb.ShopComponents.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
|
||||
|
||||
<SimpleshopThemeWeb.ShopComponents.mobile_bottom_nav active_page="collection" mode={@mode} />
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user