Session store not set on request. laravel9 - javascript

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,
];
}

Related

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>

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.

I cannot identify the reason for this message in Alpine JS

I get this error and have no idea how to fix:
alpine.js:115 Alpine Error: "ReferenceError: Invalid left-hand side in assignment"
Expression: "getTasks() = rightSideOfExpression($event, getTasks())"
Element: <input class=​"shadow appearance-none border rounded w-1/​3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:​outline-none focus:​shadow-outline" id=​"valorvenda" type=​"text" placeholder=​"Valor" autofocus x-ref=​"valorvenda" #keydown.enter=​"addTask($refs.valorvenda.id)​">​
u # alpine.js:115
(anonymous) # alpine.js:132
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus="" x-ref="valorvenda" #keydown.enter="addTask($refs.valorvenda.id)">
VM5454749:3 Uncaught (in promise) ReferenceError: Invalid left-hand side in assignment
at eval (eval at d.el (alpine.js:174), <anonymous>:3:21)
at d.el (alpine.js:174)
at d (alpine.js:131)
at alpine.js:151
at be.evaluateCommandExpression (alpine.js:1760)
at z (alpine.js:933)
at HTMLDivElement.l (alpine.js:909)
and a have no idea what i do! Can you help me, please?
You probably meant to compare instead of assign. Change = to ==:
getTasks() == rightSideOfExpression($event, getTasks())
I spend my weekend searching for the problem.
I believe the cause is because I'm using the x-model attribute like this:
<div x-data="tasks()" x-init="getTasks()" x-model="getTasks()">
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-green-800 bg-green-100">
Definir estratégia de COMPRA:
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorcompra" type="text" placeholder="Valor" autofocus x-ref="valorcompra" #keydown.enter="addTask($refs.valorcompra.id)">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="percentualcompra" type="text" placeholder="Percentual">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadecompra" type="text" placeholder="Quantidade">
</div>
<template x-for="(t, taskIndex) in tasks.filter(t => t.coin === window.moeda && t.boardName === 'compra')" :key="taskIndex">
<div :id="t.uuid">
<div class="bg-white rounded-lg shadow mb-3 p-2 text-sm">
<div x-text="t.name" class="text-gray-800"></div>
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
<div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
<div class="items-start text-right text-red-800" #click="removeTask(t.uuid)"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
</div>
</div>
</div>
</template>
</div>
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-red-800 bg-red-100">
Definir estratégia de VENDA:
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus x-ref="valorvenda" #keydown.enter="addTask($refs.valorvenda.id)">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="percentualvenda" type="text" placeholder="Percentual">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadevenda" type="text" placeholder="Quantidade">
</div>
<template x-for="(t, taskIndex) in tasks.filter(t => t.coin === window.moeda && t.boardName === 'venda')" :key="taskIndex">
<div :id="t.uuid">
<div class="bg-white rounded-lg shadow mb-3 p-2 text-sm">
<div x-text="t.name" class="text-gray-800"></div>
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
<div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
<div class="items-start text-right text-red-800" #click="removeTask(t.uuid)"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
assigning a JS function here is the cause of the error. What I need is a way to update the x-data every time the getTasks() fucntion is run and I don't know how to do it.

how to duplicate a form using alpine.js

Given a form with a couple of input form fields, for example:
(the style is based on tailwindcss if it plays a role)
<div>
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
<p class="mt-1 text-sm text-gray-600">
This information will be displayed publicly so be careful what you share.
</p>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<form action="#" method="POST">
<div class="shadow sm:rounded-md sm:overflow-hidden">
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
<!-- todo: duplicate the input form fields -->
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
<input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
<input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button type="button" #click="duplicate(idx)" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+
</button>
</div>
</div>
</form>
</div>
</div>
</div>
How to add dynamically / duplicate the two form fields (first name, last name) when the end user clicks on the + button (duplicate(idx) function), using alpine.js ?

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.

Categories