willfore
Reputation: 170
TailwindCSS + Alpine mobile navbar not working
I have everything working with one of the examples found on the website but for some reason I cannot seem to get the mobile navbar to show when clicking. Can someone take a peek and tell me what I'm missing please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<div>
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= img_tag(Routes.static_path(@conn, "/images/logo.png")) %>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div @click.away="open = false" class="ml-3 relative" x-data="{open: false }">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</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">
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical">
<a href="#" class="user-menu" role="menuitem">Your Profile</a>
<a href="#" class="user-menu" role="menuitem">Settings</a>
<a href="#" class="user-menu" role="menuitem">Sign out</a>
</div>
</div>
</div>
</div>
</div>
<!-- code that is displayed when viewing mobile screens -->
<div class="-mr-2 flex md:hidden">
<button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div :class="{ 'block': open, 'hidden md:hidden': !open }" @click.away="open = false" x-data="{open: false}" x-show="open">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">[email protected]</div>
</div>
</div>
<div class="mt-3 px-2">
<a href="#" class="user-menu">Your Profile</a>
<a href="#" class="user-menu">Settings</a>
<a href="#" class="user-menu">Sign out</a>
</div>
</div>
</div>
<!-- end mobile screens -->
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</div>
</main>
</div>
</html>
I am working on getting this whole example in codepen to help things out and will update with that as soon as I have it working.
Upvotes: 0
Views: 4407
Answers (2)
willfore
Reputation: 170
I figured it out. I never registered a state for the navbar and so it didn't fire the click event. The nav tag should be as:
<nav class="bg-gray-900 x-data="{ open: false }">
Upvotes: 1
Hugo
Reputation: 3888
I've got the mobile header working with the following code, I noticed that open doesn't get toggled on the mobile version so maybe this doesn't event need to be an Alpine.js component.
If this isn't exactly what you were looking for, feel free to leave a comment clarifying the behaviour you're after for the mobile navigation (currently I guess it just display everything on mobile breakpoints).
Note the I've gotten rid of x-show and the :class binding in favour of always applying the md:hidden class since I couldn't find where you wanted to toggle open from.
<div class="md:hidden" @click.away="open = false" x-data="{open: false}">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">[email protected]</div>
</div>
</div>
<div class="mt-3 px-2">
<a href="#" class="user-menu">Your Profile</a>
<a href="#" class="user-menu">Settings</a>
<a href="#" class="user-menu">Sign out</a>
</div>
</div>
</div>
Above example is viewable/editable in this CodePen.
Upvotes: 0
Related Questions
- Does Tailwind CSS provide JavaScript by default?
- Tailwind CSS Fixed NavBar
- Tailwind configuration not working after setup
- Issue with alpinejs' x-cloak
- React + Tailwindcss Navbar Mobile not working
- RTL side navigation tailwindcss alpinejs
- Tailwind CSS & Alpine JS transition out issue
- My html navbar not working well in phone screen
- how to created a responsive menu using tailwindCss and alpinejs
- Tailwind CSS Navbar