Creating a responsive sidebar with Stimulus - javascript
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.
Related
Sidebar with alpine.js isn't properly collapsing
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>
Vue 3 Breadcrumb did not work with <Script setup>
I need your help for my Breadcrumb component.
It did work last time but after I add the Pinia it did not work anymore.
I don't know if this is related to Pinia or not.
This is the screenshot of the project
my_vue_project_screenshot
If you additional detail more than below, please let me know
Thank you all in advance
Also, I'm not sure my Vue project structure is correct or not.
Main layout
|
|- BreadCrumb
|- RouterView
I put BreadCrumb component inside every View pages. Like this (for example)
<script setup>
import breadcrumb from '../../components/breadcrumb.vue';
const pages=[{ name: 'ช่าง', href: '/staff', current: true }]
const technicians = [
{ id: 0, name: 'Mr A', score: 25, role: 'กลึง' },
{ id: 1, name: 'Mr B', score: 35, role: 'เจาะ' },
]
</script>
<template>
<breadcrumb :pages="pages"/>
<div class="space-y-6 pt-8 sm:space-y-5 sm:pt-10">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-xl font-semibold text-gray-900">รายชื่อช่าง</h1>
<p class="mt-2 text-sm text-gray-700">Admin</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<router-link to="/staff/add">
<button type="button" class="inline-flex items-center justify-center rounded-md border border-transparent
bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">เพิ่มช่าง</button>
</router-link>
</div>
</div>
<div class="mt-8 flex flex-col">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">ชื่อ</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">แผนก</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">คะแนน</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="technician in technicians" :key="technician.id">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{{ technician.name }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.role }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.score }}</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<router-link :to="{ name: 'editstaff', params: { id: technician.id }}"
class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ technician.name }}</span>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
This is my BreadCrumb.vue
<script setup>
import { ChevronRightIcon, HomeIcon } from '#heroicons/vue/20/solid'
</script>
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="/" class="text-gray-400 hover:text-gray-500">
<HomeIcon class="h-5 w-5 flex-shrink-0" aria-hidden="true" />
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li v-for="page in pages" :key="page.name">
<div class="flex items-center">
<ChevronRightIcon class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<a :href="page.href" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
:aria-current="page.current ? 'page' : undefined">{{ page.name }}</a>
</div>
</li>
</ol>
</nav>
</template>
Lastly, this is my main Layout (Not sure if this is related too or not
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '#headlessui/vue'
import {
HomeIcon,
Bars3Icon,
FolderIcon,
UsersIcon,
XMarkIcon
} from '#heroicons/vue/24/outline'
const authenticated = false;
const navigation = [
{ name: 'home', to: '/', icon: HomeIcon },
{ name: 'enj', to: '/staff', icon: UsersIcon },
{ name: 'proj', to: '/project', icon: FolderIcon },
{ name: 'selectproj', to: '/selectproject', icon: FolderIcon },
{ name: 'validateproj', to: '/validateproject', icon: FolderIcon },
]
const sidebarOpen = ref(false)
</script>
<template>
<div>
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" #close="sidebarOpen = false">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
<DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" #click="sidebarOpen = false">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="h-0 flex-1 overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 space-y-1 px-2">
<router-link v-for="item in navigation" :key="item.name" :to="item.to" class="['text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
<component :is="item.icon" :class="[isActive ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-4 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</router-link>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block 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">
<p class="text-base font-medium text-white">Tom Cook</p>
<p class="text-sm font-medium text-gray-400 group-hover:text-gray-300">View profile</p>
</div>
</div>
</a>
</div>
</DialogPanel>
</TransitionChild>
<div class="w-14 flex-shrink-0">
<!-- Force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex min-h-0 flex-1 flex-col bg-gray-800">
<div class="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 flex-1 space-y-1 px-2">
<RouterLink v-for="item in navigation" :key="item.name" :to="item.to" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-sm font-medium rounded-md']">
<component :is="item.icon" :class="[item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-3 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</RouterLink>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<div class="group block w-full flex-shrink-0">
<div v-if="authenticated" class="flex items-center">
<div class="ml-3">
<p class="text-base font-medium text-white pl-2">:Username</p>
<RouterLink to="/">
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">Logout</p>
</RouterLink>
</div>
</div>
<div v-else class="flex items-center">
<div class="ml-3">
<RouterLink to="/signin">
<p class="text-base font-medium text-gray-300 group-hover:text-gray-200">เข้าสู่ระบบ</p>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-1 flex-col md:pl-64">
<div class="sticky top-0 z-10 bg-gray-100 pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
<button type="button" class="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" #click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<main class="flex-1">
<div class="py-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<slot>
<RouterView/>
</slot>
<!-- /End replace -->
</div>
</div>
</main>
</div>
</div>
</template>
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>