TailWind CSS Dropdown on hover - javascript
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>
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>
Session store not set on request. laravel9
I have created a form that submitted the data to the database correctly but after I use the cookie to change the language from English to Arabic and then try to submit the form it shows me this error "Session store not set on request." so I search for this error online and I found if I this tow lines {\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,} to protected $middleware in Kernel will be solved it really solves the error but it does not show me any error message that I had created in the form to guide the user to the correct format of the information entered by him\her.
//this is the form that I try to submit but the way I use the problem was not useful snic the error messages that should appear to the user when there is empty filed is not showed after I add that tow lines I mention above in the kernel.
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" #if (rtl()) dir="rtl" #endif>
<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" />
<link rel="stylesheet" href="{{tailwindcss('css/app.css')}}" />
<!--Services style-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Services script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
<script src="scripts.js"></script>
<title>Get Started</title>
#vite('resources/css/app.css')
#vite('resources/js/script.js')
</head>
<body>
<!-- Navbar -->
<nav id="Home"class="relative container mx-auto px-6">
<!-- Flex container -->
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="pt-2">
<img class= "md:1/2 h-32 w-32" src="img/SniperLogo1.SVG" alt="" />
</div>
</div>
</nav>
<!--
This component uses #tailwindcss/forms
yarn add #tailwindcss/forms
npm install #tailwindcss/forms
plugins: [require('#tailwindcss/forms')]
-->
<!---General info-->
<div class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8 ">
<div class="max-w-lg mx-auto">
<h1 class="text-2xl font-bold text-center text-darkRed sm:text-3xl">Let's Hunt</h1>
<p class="max-w-md mx-auto mt-4 text-center text-gray-500" dir="ltr">
Every <a class="text-darkRed"> Sniper</a> has A story , create yours <a class="text-darkRed">now!</a>
</p>
<form action="{{ url('/store')}}" method="POST" enctype="multipart/form-data" class="p-8 mt-6 mb-0 space-y-4 rounded-lg shadow-xl" >
#csrf
<div >
<label for="startup_name" class="text-md font-medium">{{__('Startup-SMEs Name')}}</label>
<div class="relative mt-1">
<input type="text" name="startup_name" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm #if(rtl()) pr-2 #endif" placeholder="{{__('Enter Startup-SMEs Name')}}"/>
</div>
<!--Error message-->
#error('startup_name')
<div class="flex p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert" class="form-control #error('startup_name') is-invalid #enderror"
value="{{ old('startup_name') }}" class="form-control">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">!</span> {{ $message }}
</div>
</div>
#enderror
</div>
<div >
<label for="first_name" class="text-md font-medium">{{__('First Name')}}</label>
<div class="relative mt-1">
<input type="text" name="first_name" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm #if(rtl()) pr-2 #endif" placeholder="{{__('Enter First Name')}}"/>
</div>
<!--Error message-->
#error('first_name')
<div class="flex p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert" class="form-control #error('first_name') is-invalid #enderror"
value="{{ old('first_name') }}" class="form-control">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">!</span> {{ $message }}
</div>
</div>
#enderror
</div>
<div>
<label for="last_name" class="text-md font-medium">{{__('Last Name')}}</label>
<div class="relative mt-1">
<input type="text" name="last_name" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm #if(rtl()) pr-2 #endif" placeholder="{{__('Enter Last Name')}}"/>
</div>
<!--Error message-->
#error('last_name')
<div class="flex p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert" class="form-control #error('last_name') is-invalid #enderror"
value="{{ old('last_name') }}" class="form-control">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">!</span> {{ $message }}
</div>
</div>
#enderror
</div>
<div>
<label for="email" class="text-md font-medium">{{__('Email')}}</label>
<div class="relative mt-1">
<input type="email" name="email" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm #if(rtl()) pr-10 #endif" placeholder="xxxx#example.com"/>
<span class="absolute inset-y-0 inline-flex items-center right-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
</svg>
</span>
</div>
<!--Error message-->
#error('email')
<div class="flex p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800 #if(rtl()) pr-2 #endif" role="alert" class="form-control #error('email') is-invalid #enderror"
value="{{ old('email') }}" class="form-control">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">!</span> {{ $message }}
</div>
</div>
#enderror
</div>
<div>
<label for="mobile_number" class="text-md font-medium">{{__('Mobile Number')}}</label>
<div class="relative mt-1">
<input type="tel" name="mobile_number" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm #if(rtl()) pr-2 #endif" placeholder="{{__('Enter Mobile Number')}}"/>
</div>
<!--Error message-->
#error('mobile_number')
<div class="flex p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert" class="form-control #error('mobile_number') is-invalid #enderror"
value="{{ old('mobile_number') }}" class="form-control">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">!</span> {{ $message }}
</div>
</div>
#enderror
</div>
<div>
<label for="city" class="text-md font-medium">{{__('City')}}</label>
<div class="relative mt-1">
<input type="text" name="city" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm #if(rtl()) pr-2 #endif" placeholder="{{__('Enter City')}}"/>
</div>
<!--Error message-->
#error('city')
<div class="flex p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert" class="form-control #error('city') is-invalid #enderror"
value="{{ old('city') }}" class="form-control">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">!</span> {{ $message }}
</div>
</div>
#enderror
</div>
<div class="flex p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800 #if(rtl()) pr-2 #endif" role="alert">
<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">{{__('Notcie!')}}</span> {{__('Choose what you need, Don\'t rely on default options .')}}
</div>
</div>
<!--- Services --->
<div class="flex">
<div>
<label for="services" class="text-md font-medium">{{__('Services')}}</label>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" checked name="services[]" value="MARKETING">
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('MARKETING')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="BUSINESS MODEL">
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('BUSINESS MODEL')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="OPERATION">
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('OPERATION')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="FRASIIBILITY STUDY" >
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('FEASIBILITY STUDY')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="TECHNOLOGY" >
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('TECHNOLOGY')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="FRANCHISE" >
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('FRANCHISE')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="FUNDING" >
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('FUNDING')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="services[]" value="Offices" >
<label class="text-sm font-medium text-black dark:text-black" for="services[]" >{{__('Offices')}}
</label>
</div>
</div>
</div>
<!--- NEEDS --->
<div class="flex">
<div>
<label for="needs" class="text-md font-medium">{{__('Needs')}}</label>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" checked name="needs[]" value="Consultation">
<label class="form-check-label inline-block text-gray-800" for="needs[]" >{{__('Consultation')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="needs[]" value="Mentorship">
<label class="form-check-label inline-block text-gray-800" for="needs[]">{{__('Mentorship')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="needs[]" value="Knowledge">
<label class="form-check-label inline-block text-gray-800" for="needs[]" >{{__('Knowledge')}}
</label>
</div>
<div class="form-check">
<input class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white mt-1 align-top bg-no-repeat bg-center bg-contain text-darkRed #if(rtl()) float-right ml-2 #else float-left mr-2 #endif" type="checkbox" name="needs[]" value="Incubation" >
<label class="form-check-label inline-block text-gray-800" for="needs[]" >{{__('Incubation')}}
</label>
</div>
</div>
</div>
<!--- Your project phase --->
<div>
<label for="project_phase" class="text-md font-medium">{{__('Your project phase')}}</label>
<div class="relative mt-1">
<div class="flex items-center mb-2">
<input checked type="radio" value="IDEA" name="project_phase" class="w-4 h-4 text-darkRed border-gray-300 bg-white">
<label for="project_phase" class="ml-2 text-sm font-medium text-black dark:text-black #if(rtl()) pr-2 #endif">{{__('IDEA')}}</label>
</div>
<div class="flex items-center mb-2">
<input type="radio" value="FEASIBILITY STUDY" name="project_phase" class="w-4 h-4 text-darkRed border-gray-300 bg-white">
<label for="project_phase" class="ml-2 text-sm font-medium text-black dark:text-black #if(rtl()) pr-2 #endif">{{__('FEASIBILITY STUDY')}}</label>
</div>
<div class="flex items-center mb-2">
<input type="radio" value="PRESEED" name="project_phase" class="w-4 h-4 text-darkRed border-gray-300 bg-white">
<label for="project_phase" class="ml-2 text-sm font-medium text-black dark:text-black #if(rtl()) pr-2 #endif">{{__('PRESEED')}}</label>
</div>
<div class="flex items-center mb-2">
<input type="radio" value="SEED PHASE" name="project_phase" class="w-4 h-4 text-darkRed border-gray-300 bg-white">
<label for="project_phase" class="ml-2 text-sm font-medium text-black dark:text-black #if(rtl()) pr-2 #endif">{{__('SEED PHASE')}}</label>
</div>
<div class="flex items-center mb-2">
<input type="radio" value="ROUND A" name="project_phase" class="w-4 h-4 text-darkRed border-gray-300 bg-white">
<label for="project_phase" class="ml-2 text-sm font-medium text-black dark:text-black #if(rtl()) pr-2 #endif">{{__('ROUND A')}}</label>
</div>
<div class="flex items-center mb-2">
<input type="radio" value="SERIES B" name="project_phase" class="w-4 h-4 text-darkRed border-gray-300 bg-white">
<label for="project_phase" class="ml-2 text-sm font-medium text-black dark:text-black #if(rtl()) pr-2 #endif">{{__('SERIES B')}}</label>
</div>
</div>
</div>
<button type="submit" class="block w-full px-5 py-3 text-sm font-medium text-white bg-darkRed rounded-lg">
{{__('SUBMIT')}}
</button>
</form>
</div>
</div>
</body>
</html>
<?php
//UserLocale used to change the language using cookie
namespace App\Http\Middleware;
use Closure;
use Illuminate\Foundation\Application;
class UserLocale
{
/** #avar \Illuminate\Foundation\Application */
private $app;
public function __construct(Application $app)
{
$this->app = $app;
}
/**
* Handle an incoming request.
*
* #param \Illuminate\Http\Request $request
* #param \Closure $next
* #return mixed
*/
public function handle($request, Closure $next)
{
if (request()->exists('lang')) {
$locale = request('lang', 'en');
if (in_array($locale, ['ar', 'en'])) {
cookie()->queue('lang', $locale);
}
} else {
if ($request->hasCookie('lang')) {
$locale = request()->cookie('lang') ?? 'en';
} else {
$locale = request()->getPreferredLanguage(['ar', 'en']);
}
}
$locale = ! isset($locale) || empty($locale) || ! in_array($locale, ['en', 'ar']) ? 'en' : $locale;
$this->app->setLocale($locale);
return $next($request);
}
}
<?php
// the Kernel
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
/**
* The application's global HTTP middleware stack.
*
* These middleware are run during every request to your application.
*
* #var array<int, class-string|string>
*/
protected $middleware = [
// \App\Http\Middleware\TrustHosts::class,
\App\Http\Middleware\TrustProxies::class,
\Illuminate\Http\Middleware\HandleCors::class,
\App\Http\Middleware\PreventRequestsDuringMaintenance::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
];
/**
* The application's route middleware groups.
*
* #var array<string, array<int, class-string|string>>
*/
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\VerifyCsrfToken::class,
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\UserLocale::class,
],
'api' => [
// \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
];
/**
* The application's route middleware.
*
* These middleware may be assigned to groups or used individually.
*
* #var array<string, class-string|string>
*/
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'PreventBackHistory' => \App\Http\Middleware\PreventBackHistory::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
];
}
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.
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.
Bootstrap 5 card overlapping in smaller screen
.footerlink a{
color: inherit;
text-decoration: none;
}
.card{
height:18rem;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.thumbcard{
width: 15rem;
height: 18rem;
}
#media(max-width: 768px){
.thumbcard{
width: 10rem;
height: 18rem;
}
}
a.custom-card,
a.custom-card:hover {
color: inherit;
text-decoration: none;
}
#media(max-width: 768px){
a.custom-card h5{
font-size: 1rem;
}
a.custom-card .card-body{
padding: 0.5rem 0.5rem;
font-size: 0.95rem;
line-height: none;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.79.0">
<title>Album example · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style7.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<div class="flex-row d-flex">
<a class="navbar-brand" href="#" title="Brand">Brand</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<main>
<div class="album py-5 bg-light">
<!-- <h2>Latest Articles</h2> -->
<div class="container">
<h2>Recent Articles</h2>
<div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 g-3">
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
</div>
</div>
<hr/>
<div class="container">
<h2>Adventure</h2>
<div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 g-3">
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted py-5">
<div class="container">
<!-- <p class="float-end mb-1">
Back to top
</p> -->
<p class="justify-content-center ms-5">©Website is affiliated to Third Party Websites</p>
<!-- <p class="mb-4 ms-5">Album example is © Bootstrap, but please download and customize it for yourself!</p> -->
<!-- <p class="mb-0">New to Bootstrap? Visit the homepage or read our getting started guide.</p> -->
<div class="footerlink"><h4>
<span>About</span>
<span>Contact</span>
<span>Disclaimer</span>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#3b5998" class="bi bi-facebook" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#bc2a8d" class="bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#00acee" class="bi bi-twitter" viewBox="0 0 16 16"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/></svg></span>
</h4></div>
</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.js"></script>
</body>
</html>
After searching in the internet I could not find any viable solution.
Please bear with me, this is important project, and I could not find meaningful solution to this problem.
This is extended version of Bootstrap Album Example.
I have added navbar, and modified and added CSS to view and better render the cards in mobile screen.
However I could not get over the issue of overlapping in small screens. When I decrease the screen in Google developer option, I could see the overlapping cards in Tablet screen and smaller(less than 968px) screen size.
I want to find the issue, and get rid of overlapping cards.
Simply add width: 100% with .thumbcard classes and with #media(max-width:768px){} classes.
Edited CSS classes
.thumbcard{
width: 15rem;
width: 100%;
height: 18rem;
}
#media(max-width: 768px){
.thumbcard{
width: 10rem;
width: 100%;
height: 18rem;
}
}