Sidebar with alpine.js isn't properly collapsing - javascript
I have a laravel project using alpine.js and I'm trying to create a sidebar and topbar/nav that work together so that if the sidebar is open then the hamburger menu shows in the top bar (the hamburger menu is used to open and close the sidebar). If the Sidebar is closed then the top bar should reach all the way across the width of the screen.
Currently the functionality is backwards (sidebar open hides hamburger menu, but closed shows the menu and a big space where the sidebar should be)
I've tried swapping out my relative/absolute conditionally bound classes but it's still not working. AM I just missing something obvious here?
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
</head>
<body class="font-sans antialiased">
<div class="relative min-h-screen md:flex" x-data=" {open : true}">
<!--sidebar-->
<div :class="open ? '' : '-translate-x-full relative'" class="z-10 bg-blue-800 text-blue-100 w-64 px-2 py-4 absolute inset-y-0 left-0 transform overflow-y-auto transition ease-in-out duration-200 shadow-lg">
<!--Logo-->
<div class="flex items-center justify-between px-2">
<div class="flex items-center space-x-2">
<a href="">
<x-application-logo class="block h-10 w-auto fill-current text-blue-100" />
</a>
<span class="text-2xl font-extrabold">Admin</span>
</div>
<button type="button" #click="open = !open" class=" inline-flex p-2 items-center justify-center rounded-md text-blue-100 hover:bg-blue-700 focus:outline-none ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!--Nav links-->
<nav>
<x-side-nav-link href="{{ route('dashboard') }}">
Dashboard
</x-side-nav-link>
</nav>
</div>
<!--Main Content-->
<main class="flex-1 bg-gray-100 h-screen" :class="open ? '' : 'relative'">
<!--top bar-->
<nav class="bg-blue-900 shadow-lg">
<div class="mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between md:justify-end h-16">
<div class="absolute inset-y-0 left-0 flex items-center ">
<a href="">
<x-application-logo class="block h-10 w-auto fill-current text-blue-100" />
</a>
<!--mobile button-->
<button type="button" x-on:click="open = !open" class="inline-flex items-center justify-center p-4 rounded-md text-blue-100 hover:bg-blue-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<div>
{{ $slot }}
</div>
</main>
</div>
</body>
Related
Trying to create a global Footer component and importing into my Vue.js file
I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!
So I have initially created a Footer Component in ./components/Footer.vue. Here is the code for that specific component (Footer component) -
<template>
<section>
<div class="skew skew-top mr-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
</svg>
</div>
<div class="skew skew-top ml-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
</svg>
</div>
<div class="py-20 bg-gray-900 radius-for-skewed">
<div class="container mx-auto px-4">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/3 mb-16 lg:mb-0">
<a class="inline-block mb-3 text-white text-3xl font-bold leading-none" href="#">
<img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
</a>
<p class="mb-4 max-w-sm text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
<div>
<a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/facebook-purple.svg">
</a>
<a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/twitter-purple.svg">
</a>
<a class="inline-block w-10 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/instagram-purple.svg">
</a>
</div>
</div>
<div class="w-full lg:w-2/3 lg:pl-16 flex flex-wrap justify-between">
<div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Products</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Services</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">News and Stories</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Important Links</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Organization Team</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Our Journeys</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Pricing Plans</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Terms & Conditions</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 lg:w-auto">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Company</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Jobs</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Press</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<p class="lg:text-center text-sm text-gray-400 border-t border-gray-800 pt-12 mt-16">© 2021. All rights reserved.</p>
</div>
</div>
<div class="skew skew-bottom mr-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
</svg>
</div>
<div class="skew skew-bottom ml-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
</svg>
</div>
</section>
</template>
<script>
export default {}
</script>```
**And here is the contents of my App.vue -**
```<script>
import { createApp } from 'vue'
import Footer from './components/Footer.vue'
const globalComponents = createApp({})
globalComponents.component(
// the registered name
'Footer',
)
app
.component('Footer', Footer)
</script>
<template>
<h1 class="text-[100px] text-center m-auto text-red underline"> Hello Vue JS </h1>
</template>
<Footer />
<style scoped>
</style>```
However, when I run npm run dev everything opens and the local server but just shows a blank page, not even then <template><h1>Hello Vue JS</h1><template/>
Not only this but the footer doesnt appear at all and is highlighted grey in my IDE which is assume means its not being imported correctly.
I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!**
Put footer inside <template> Code is here I don't think you need createApp simply put like this <Footer /> in your App.vue inside the <templete> tag <template> Hello World! <Footer /> </template> Hello World! is your main content, Footer is your footer content or breadcrumb content Same way you can add header if you have Header.vue <template> <Header /> Hello World! <Footer /> </template>
The tailwind menu in mobile should be closed when clicked outside
I made the Navbar using Tailwind and Apline. The toggle menu does not close when clicking outside on mobile.
<nav
class="flex flex-wrap items-center justify-between w-full py-2 px-4 text-xl text-gray-700 navbar-bg fixed z-20 top-0">
<div>
<a href="#">
<img class="w-1/2"
src="./assets/images/whers-logo-2021_mobile2.png">
<g
id="Group_330"
data-name="Group 330"
transform="translate(-251.1 457.654)"
>
<g
id="Group_329"
data-name="Group 329"
transform="translate(251.1 -457.654)"
>
<path
id="Path_121"
data-name="Path 121"
d="M257.887-454.034a12.084,12.084,0,0,1,3.505-3.62,11.811,11.811,0,0,1,3.46,3.549,17.887,17.887,0,0,1,3.362,11.216c.73.589,1.482,1.154,2.2,1.754a3.969,3.969,0,0,1,1.266,3.659c-.347,1.672-.679,3.347-1.045,5.015a1.393,1.393,0,0,1-2.12.7c-1.178-.946-2.326-1.925-3.5-2.872a5.373,5.373,0,0,1-3.316,1.44,5.365,5.365,0,0,1-3.882-1.4c-.844.621-1.628,1.367-2.453,2.033a6.315,6.315,0,0,1-1.2.924,1.393,1.393,0,0,1-1.839-.9c-.377-1.631-.771-3.257-1.136-4.89a3.96,3.96,0,0,1,1.335-3.81c.641-.517,1.29-1.025,1.943-1.527.182-.092.091-.3.1-.46a17.915,17.915,0,0,1,3.326-10.806m1.156,5.049a2.748,2.748,0,0,0,.24,3.641,3.024,3.024,0,0,0,4.134.085,2.75,2.75,0,0,0,.729-3.021,2.924,2.924,0,0,0-2.454-1.825,2.984,2.984,0,0,0-2.65,1.119"
transform="translate(-251.1 457.654)"
fill="#764abc"
/>
<path
id="Path_122"
data-name="Path 122"
d="M260.3-419.746a.693.693,0,0,1,1.027-.557,6.628,6.628,0,0,0,5.77,0,.7.7,0,0,1,1.029.516q.008,1.532,0,3.064a.691.691,0,0,1-1.079.5c-.306-.26-.582-.552-.876-.825-.467.874-.905,1.76-1.375,2.631a.7.7,0,0,1-1.161.007c-.472-.873-.908-1.764-1.384-2.637-.29.275-.566.566-.873.825a.692.692,0,0,1-1.078-.506c-.008-1.007,0-2.015,0-3.022"
transform="translate(-253.92 446.225)"
fill="#764abc"
/>
<path
id="Path_123"
data-name="Path 123"
d="M265.28-441.9a1.4,1.4,0,0,0,1.432-1.376,1.4,1.4,0,0,0-1.432-1.377,1.4,1.4,0,0,0-1.431,1.377,1.4,1.4,0,0,0,1.431,1.376"
transform="translate(-255.01 453.668)"
fill="#764abc"
/>
<path
id="Path_124"
data-name="Path 124"
d="M288.561-448.233H290.8v15.127h9.357v2.036h-11.6Zm13.563,11.211a5.99,5.99,0,0,1,.546-2.557,6.4,6.4,0,0,1,1.479-2.037,6.769,6.769,0,0,1,4.751-1.818,6.592,6.592,0,0,1,4.666,1.733,5.891,5.891,0,0,1,1.891,4.521,5.9,5.9,0,0,1-2.024,4.544,6.767,6.767,0,0,1-4.751,1.807A6.582,6.582,0,0,1,304-432.549a5.832,5.832,0,0,1-1.879-4.472m2.3-.133a4.517,4.517,0,0,0,.339,1.757A4.36,4.36,0,0,0,305.7-434a4.381,4.381,0,0,0,3.2,1.235,4.1,4.1,0,0,0,3.03-1.235,4.107,4.107,0,0,0,1.224-3.043,4.325,4.325,0,0,0-1.273-3.188,4.335,4.335,0,0,0-3.2-1.26,4.074,4.074,0,0,0-3.03,1.249,4.213,4.213,0,0,0-1.224,3.091m16.677,1.078a2.077,2.077,0,0,0-.582,1.3.918.918,0,0,0,.413.849,3.845,3.845,0,0,0,1.1.413q.692.157,1.564.266t1.794.218q.909.121,1.782.315a6.957,6.957,0,0,1,1.575.509,2.345,2.345,0,0,1,1.516,2.158,4.306,4.306,0,0,1-1.9,3.563,6.821,6.821,0,0,1-4.157,1.321,7.745,7.745,0,0,1-3.806-.873,3.147,3.147,0,0,1-1.831-2.861,3.762,3.762,0,0,1,.9-2.315,5.143,5.143,0,0,1,.558-.606,2.3,2.3,0,0,1-1.758-2.17,4.315,4.315,0,0,1,1.6-3.321,3.385,3.385,0,0,1-.557-1.878,3.7,3.7,0,0,1,.424-1.806,4.118,4.118,0,0,1,1.152-1.321,5.62,5.62,0,0,1,3.5-1.115,5.436,5.436,0,0,1,3.466,1.115,4.661,4.661,0,0,1,2.5-1.043,6.619,6.619,0,0,1,.945-.072l-.1,1.879a6.307,6.307,0,0,0-2.218.569,3.709,3.709,0,0,1,.412,1.721,3.4,3.4,0,0,1-.436,1.7,4.025,4.025,0,0,1-1.14,1.31,5.554,5.554,0,0,1-3.405,1.091,5.887,5.887,0,0,1-3.309-.91m.582-4.253a2.143,2.143,0,0,0-.231,1.017,2.221,2.221,0,0,0,.231,1.031,2.275,2.275,0,0,0,.654.739,3.493,3.493,0,0,0,2.085.582,2.688,2.688,0,0,0,2.594-1.285,2.074,2.074,0,0,0,.231-1.006,2.135,2.135,0,0,0-.243-1.03,2.124,2.124,0,0,0-.642-.751,3.446,3.446,0,0,0-2.085-.594,2.682,2.682,0,0,0-2.594,1.3m.024,8.944a3.151,3.151,0,0,0-.837,2.194,1.783,1.783,0,0,0,1.2,1.611,4.619,4.619,0,0,0,1.975.473,7.943,7.943,0,0,0,1.6-.134,3.885,3.885,0,0,0,1.139-.4,1.942,1.942,0,0,0,1.176-1.769q0-1.079-2.085-1.443-.9-.157-2.194-.279t-1.975-.254m27.052-11.563a5.27,5.27,0,0,1-3.515,5.273l3.261,6.606H345.9l-2.945-5.976a16.725,16.725,0,0,1-2.509.182h-4.461v5.793h-2.241v-17.163h7.042a12.082,12.082,0,0,1,5.684,1.042,4.451,4.451,0,0,1,2.291,4.242m-8.012,4.048a8.338,8.338,0,0,0,4.024-.752,3.344,3.344,0,0,0,1.612-3.151q0-2.885-3.733-3.273a19.936,19.936,0,0,0-2.218-.121h-4.449v7.3Zm10.7,1.879a5.99,5.99,0,0,1,.546-2.557,6.4,6.4,0,0,1,1.479-2.037,6.77,6.77,0,0,1,4.751-1.818A6.591,6.591,0,0,1,362.9-441.7a5.894,5.894,0,0,1,1.891,4.521,5.9,5.9,0,0,1-2.024,4.544,6.767,6.767,0,0,1-4.751,1.807,6.582,6.582,0,0,1-4.678-1.721,5.831,5.831,0,0,1-1.879-4.472m2.3-.133a4.517,4.517,0,0,0,.34,1.757,4.37,4.37,0,0,0,.933,1.394,4.383,4.383,0,0,0,3.2,1.235,4.1,4.1,0,0,0,3.03-1.235,4.107,4.107,0,0,0,1.224-3.043,4.325,4.325,0,0,0-1.273-3.188,4.336,4.336,0,0,0-3.2-1.26,4.073,4.073,0,0,0-3.03,1.249,4.214,4.214,0,0,0-1.224,3.091m23.344,3.491.424,1.709a7.408,7.408,0,0,1-4.46,1.127,5.729,5.729,0,0,1-4.412-1.721,6.409,6.409,0,0,1-1.563-4.557,6.234,6.234,0,0,1,1.757-4.509,5.974,5.974,0,0,1,4.448-1.818,6.431,6.431,0,0,1,3.9,1.1l-.8,1.805a5.411,5.411,0,0,0-3.321-1.017,3.3,3.3,0,0,0-2.7,1.284,4.622,4.622,0,0,0-.982,3.006,4.82,4.82,0,0,0,1.03,3.175,3.638,3.638,0,0,0,2.969,1.309,8.3,8.3,0,0,0,3.708-.9m3.066-16.326h2.3v12.133l5.442-5.333h2.69l-5.7,5.575,3.394,3.66a3.824,3.824,0,0,0,2.569,1.249l-.352,1.636a3.724,3.724,0,0,1-2.981-.678,6.8,6.8,0,0,1-.691-.667l-4.375-4.728v6.073h-2.3Zm22.108,7.866a4.441,4.441,0,0,1,1.006,1.624,5.626,5.626,0,0,1,.376,2.049,15.688,15.688,0,0,1-.243,2.533h-8.436a4.022,4.022,0,0,0,1.188,2.315,3.741,3.741,0,0,0,2.606.836,10.169,10.169,0,0,0,4.133-.824l.388,1.733a8.96,8.96,0,0,1-3.564.958,15.618,15.618,0,0,1-1.672.073,6.288,6.288,0,0,1-2.158-.412,4.692,4.692,0,0,1-1.866-1.212,6.631,6.631,0,0,1-1.466-4.654,6.234,6.234,0,0,1,1.757-4.509,5.974,5.974,0,0,1,4.448-1.818,4.733,4.733,0,0,1,3.5,1.309m-.812,4.425.049-.655a2.885,2.885,0,0,0-1.66-2.945,3.332,3.332,0,0,0-1.334-.242,3.368,3.368,0,0,0-1.43.3,3.514,3.514,0,0,0-1.114.825,4.376,4.376,0,0,0-1.091,2.715Zm5.358-3.624h-1.3v-1.5l2.982-2.242h.618v1.879h3.466v1.866h-3.466v4.9a5.311,5.311,0,0,0,.521,2.812,2.747,2.747,0,0,0,2.036.91l-.351,1.636q-3.636.46-4.3-2.873a10.568,10.568,0,0,1-.206-2.144Z"
transform="translate(-262.589 455.303)"
fill="#764abc"
/>
</g>
</g>
</svg>
</a>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
id="menu-button"
class="h-6 w-6 cursor-pointer md:hidden block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<div class="navbar-show hidden w-full md:flex md:items-center md:w-auto" id="menu" x-show="open" #click.away="open = false">
<ul
class="
text-xs text-gray-700
md:flex
md:justify-between
md:pt-0"
>
<li>
<a class="inline-block py-2 px-4 text-white no-underline" href="#">
<i class='selected-icon-color fill-current text-sm z-10 fas fa-user'></i> LOBBY</a>
</li>
<li>
<a class="inline-block text-gray-400 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#"><i class="text-sm fas fa-users"></i> AUDITORIUM</a>
</li>
<li>
<a class="inline-block text-gray-400 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#"><i class="text-sm fas fa-calendar-alt"></i> NETWORKING</a>
</li>
<li class="flex md:flex-none" id="ex2">
<a class="inline-block text-gray-400 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#"><i class="text-sm fas fa-comment-dots"></i> <span class="fa-stack" data-count="5">CHAT</span></a>
</li>
<li>
<a class="inline-block text-gray-400 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#"><i class="text-sm fas fa-briefcase"></i> PERKS</a>
</li>
<li>
<a class="inline-block text-gray-400 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#"><i class="text-sm fas fa-bell"></i></a>
</li>
<li>
<div class="relative inline-block">
<div x-data="{ open: false }" class="relative">
<button #click="open = true" class="login-button flex items-center p-2 bg-white bg-gray-100 rounded-md"> <span class="pr-2"><img class="inline-block h-6 w-6 rounded-full ring-1 ring-white"
src="./assets/images/avatar.avif"></span></span> Magda Lena <svg class="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</button>
<div x-show="open" #click.away="open = false" class="login-dropdown absolute right-0 py-2 mt-1 bg-gray-900 bg-gray-100 rounded-md shadow-xl w-34">
<a href="#" class="block px-4 py-2 text-white-700 hover:bg-gray-400 hover:text-white">
Profile
</a>
<a href="#" class="block px-4 py-2 text-white-700 hover:bg-gray-400 hover:text-white">
Settings
</a>
<a href="#" class="block px-4 py-2 text-white-700 hover:bg-gray-400 hover:text-white">
Log Out
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
My guess is you are trying to use the same state variable open to show the main menu modal and secondly to show a dropdown menu at the profile. However you define the open variable only at the dropdown menu, I do not see it at the nav element. I recommend to use different state variables for the two different functions. For the dropdown e.g.
<div class="relative inline-block">
<div x-data="{ dropdownOpen: false }" class="relative">
<button #click="dropdownOpen = true">...</button>
</div>
</div>
And create an open variable at the navbar:
<nav x-data="{open: false}">
...
</nav>
This way clicking away should close both menus.
TailWind CSS Dropdown on hover
I have the following component: <div class="p-5"> <div class="flex h-64 justify-center"> <div class="relative "> <div class="flex flex-row cursor-pointer truncate p-2 px-4 rounded"> <div></div> <div class="flex flex-row-reverse ml-2 w-full"> <div slot="icon" class="relative"> <div class="absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white">3</div> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart w-6 h-6 mt-2"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> </div> </div> </div> <div class="absolute w-full rounded-b border-t-0 z-10"> <div class="shadow-xl w-64"> <div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style=""> <div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div> <div class="flex-auto text-sm w-32"> <div class="font-bold">Product 1</div> <div class="truncate">Product 1 description</div> <div class="text-gray-400">Qt: 2</div> </div> <div class="flex flex-col w-18 font-medium items-end"> <div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 "> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> $12.22</div> </div> <div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style=""> <div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div> <div class="flex-auto text-sm w-32"> <div class="font-bold">Product 2</div> <div class="truncate">Product 2 long description</div> <div class="text-gray-400">Qt: 2</div> </div> <div class="flex flex-col w-18 font-medium items-end"> <div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 "> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> $12.22</div> </div> <div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style=""> <div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div> <div class="flex-auto text-sm w-32"> <div class="font-bold">Product 3</div> <div class="truncate">Product 3 description</div> <div class="text-gray-400">Qt: 2</div> </div> <div class="flex flex-col w-18 font-medium items-end"> <div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 "> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> $12.22</div> </div> <div class="p-4 justify-center flex"> <button class="text-base undefined hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-700 hover:text-teal-100 bg-teal-100 text-teal-700 border duration-200 ease-in-out border-teal-600 transition">Checkout $36.66</button> </div> </div> </div> </div> </div> <div class="h-32"></div> </div> Which looks like: The Dropdown Component The effect I am looking for is that the dropdown menu firstly is hidden, and each time I hover on the cart logo the dropdown menu will be visible for 2 seconds after leaving the mouse (after the hover finished) from the cart logo.
Added "group h-0" class to to parent <div class="relative group h-0 "> So that with the help of it access child class, also make height of parent 0px because don't want parent to take full height when child is hidden, Then in child div First hide the child then add block on hover of parent " hidden group-hover:block" in div <div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10"> Hope it helps. <!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"> <script src="https://cdn.tailwindcss.com"></script> <title>Document</title> </head> <body> <div class="p-5"> <div class="flex h-64 justify-center"> <div class="relative group h-0 "> <div class="flex flex-row cursor-pointer truncate p-2 px-4 rounded"> <div></div> <div class="flex flex-row-reverse ml-2 w-full"> <div slot="icon" class="relative"> <div class="absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white"> 3</div> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart w-6 h-6 mt-2"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> </div> </div> </div> <div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10"> <div class="shadow-xl w-64"> <div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style=""> <div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div> <div class="flex-auto text-sm w-32"> <div class="font-bold">Product 1</div> <div class="truncate">Product 1 description</div> <div class="text-gray-400">Qt: 2</div> </div> <div class="flex flex-col w-18 font-medium items-end"> <div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 "> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"> </path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> $12.22 </div> </div> <div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style=""> <div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div> <div class="flex-auto text-sm w-32"> <div class="font-bold">Product 2</div> <div class="truncate">Product 2 long description</div> <div class="text-gray-400">Qt: 2</div> </div> <div class="flex flex-col w-18 font-medium items-end"> <div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 "> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"> </path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> $12.22 </div> </div> <div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style=""> <div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div> <div class="flex-auto text-sm w-32"> <div class="font-bold">Product 3</div> <div class="truncate">Product 3 description</div> <div class="text-gray-400">Qt: 2</div> </div> <div class="flex flex-col w-18 font-medium items-end"> <div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 "> <polyline points="3 6 5 6 21 6"></polyline> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"> </path> <line x1="10" y1="11" x2="10" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line> </svg> </div> $12.22 </div> </div> <div class="p-4 justify-center flex"> <button class="text-base undefined hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-700 hover:text-teal-100 bg-teal-100 text-teal-700 border duration-200 ease-in-out border-teal-600 transition">Checkout $36.66</button> </div> </div> </div> </div> </div> <div class="h-32"></div> </div> </body> </html>
Creating a responsive sidebar with Stimulus
I wrote the code for the responsive sidebar. The menu close button works, but the open button does not work.
On assignment, I have to write all this with the help of Stimulus
HTML is written in the application.html file
<!DOCTYPE html>
<html>
<head>
<title>CosmoPort</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="h-screen flex overflow-hidden bg-gray-100">
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
<div data-controller="sidebar" class="md:hidden">
<div class="fixed inset-0 flex z-40"
data-sidebar-target="element"
data-transition-enter="transition-opacity ease-linear duration-300"
data-transition-start="opacity-0"
data-transition-enter-end="opacity-100"
data-transition-leave="transition-opacity ease-linear duration-300"
data-transition-leave-start="opacity-100"
data-transition-leave-end="opacity-0">
<div class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div
data-sidebar-target="element"
data-transition-enter="transition ease-in-out duration-300 transform"
data-transition-enter-start="-translate-x-full"
data-transition-enter-end="translate-x-0"
data-transition-leave="transition ease-in-out duration-300 transform"
data-transition-leave-start="translate-x-0"
data-transition-leave-end="-translate-x-full"
class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button
data-action="click->sidebar#toggle"
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span class="sr-only">Close sidebar</span>
<!-- Heroicon name: x -->
<svg class="h-6 w-6 text-white" 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>
<div class="flex-shrink-0 flex items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div data-controller="sidebar" class="mt-5 flex-1 h-0 overflow-y-auto">
<nav class="px-2 space-y-1">
<%= render "layouts/application_sidebar" %>
</nav>
</div>
</div>
<div class="flex-shrink-0 w-14" aria-hidden="true">
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col h-0 flex-1">
<div class="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div class="flex-1 flex flex-col overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-800 space-y-1">
<%= render "layouts/application_sidebar" %>
</nav>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<button
type="button" data-sidebar-target="element"
data-action="click->sidebar#toggle"
class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<span class="sr-only">Open sidebar</span>
<!-- Heroicon name: menu-alt-2 -->
<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 18h7"/>
</svg>
</button>
<div class="flex-1 px-4 flex justify-end">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: bell -->
<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="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>
<!-- Profile dropdown -->
<div data-controller="dropdown" class="ml-3 relative">
<div>
<button
type="button" data-target="dropdown.button" data-action="click->dropdown#toggleMenu"
class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150" id="user-menu" aria-haspopup="true" aria-expanded="true">
<span class="sr-only">Open user menu</span>
<% if current_user.photo.attached? %>
<%= image_tag current_user.photo.variant(auto_orient: true, gravity: "center", resize: "200x200^").processed, class: 'rounded-full h-8 w-8' %>
<% else %>
<svg class="h-8 w-8 text-gray-600 rounded-full" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<% end %>
</button>
</div>
<!--
Profile dropdown panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="menu hidden"
data-dropdown-target="menu"
data-transition-enter="transition ease-out duration-100"
data-transition-enter-start="transform opacity-0 scale-95"
data-transition-enter-end="transform opacity-100 scale-100"
data-transition-leave="transition ease-in duration-75"
data-transition-leave-start="transform opacity-100 scale-100"
data-transition-leave-end="transform opacity-0 scale-95"
>
<div 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">
<div role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<%= render partial: 'layouts/account_items' %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<main
class="flex-1 relative overflow-y-auto focus:outline-none" tabindex="0">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<%= yield :page_header %>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<%= render partial: 'layouts/flash' %>
<%= yield %>
</div>
</div>
</main>
</div>
</div>
<footer class="footer">
<div class="container mx-auto mt-5">
© <span id="current_year"></span> CosmoZoo Inc, All rights reserved.
</div>
</footer>
</body>
</html>
js code written in sidebar_controller.js
Import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["element"];
toggle(event) {
event.preventDefault();
this.elementTargets.forEach((element) => {
if (element.classList.contains("hidden")) {
element.classList.remove("hidden");
element.classList.add("block");
} else {
element.classList.add("hidden");
element.classList.remove("block");
}
});
}
}
Here are screenshots.
The close button works, but the menu open button does not work.
Where did I go wrong? Is the problem in the code in sidebar_controller.js or in application.html?
Help me, please.
My Answer for anyone who faces the same issue is that somehow stimulus-use affect your code; I comment data-transition-*, and it works well. Also, in the controller, you don't need to add or remove class block.
What is the problem for using fullPage.js moveTo?
I want to make a button to move a specific page...like if I click the #move_to_slide2, then the page moves to slide2, but the moveTo function doesn't work.
There is only one section and 4 slides.
How can I make the move to button?
<div class="section" anchor="s0">
<div class="slide" data-anchor="slide1">
<div class="container w-1/3 mx-auto">
<div class="my-40">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="text-xl font-bold text-center text-unifolio-blue">Getting Started</div>
<div class="flex w-full mt-5 items-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 rounded-full bg-unifolio-blue cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide2">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide3">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<div class="flex w-full mb-5 items-center text-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 text-xs text-unifolio-blue cursor-pointer">아이디 및 비밀번호 설정</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide2">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">개인정보 입력</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide3">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">핸드폰 인증</p>
</p>
<div class="h-px w-full bg-white"></div>
this is my script.
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
$('#move_to_slide1').click(function(){
fullpage_api.moveTo(1,slide1);
});
$('#move_to_slide2').click(function(){
fullpage_api.moveTo(1,slide2);
});
$('#move_to_slide3').click(function(){
fullpage_api.moveTo(1,slide3);
});
$('#move_to_slide4').click(function(){
fullpage_api.moveTo(1,slide4);
});
});
</script>
You are not passing the correct parameters to moveTo.* 2nd param should be the slide anchor string or the slide index. For example: fullpage_api.moveTo(1, 1); // using slide index fullpage_api.moveTo(1, 'slide1'); // using slide anchor