The tailwind menu in mobile should be closed when clicked outside - javascript
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.
Related
Sidebar with alpine.js isn't properly collapsing
I have a laravel project using alpine.js and I'm trying to create a sidebar and topbar/nav that work together so that if the sidebar is open then the hamburger menu shows in the top bar (the hamburger menu is used to open and close the sidebar). If the Sidebar is closed then the top bar should reach all the way across the width of the screen.
Currently the functionality is backwards (sidebar open hides hamburger menu, but closed shows the menu and a big space where the sidebar should be)
I've tried swapping out my relative/absolute conditionally bound classes but it's still not working. AM I just missing something obvious here?
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
</head>
<body class="font-sans antialiased">
<div class="relative min-h-screen md:flex" x-data=" {open : true}">
<!--sidebar-->
<div :class="open ? '' : '-translate-x-full relative'" class="z-10 bg-blue-800 text-blue-100 w-64 px-2 py-4 absolute inset-y-0 left-0 transform overflow-y-auto transition ease-in-out duration-200 shadow-lg">
<!--Logo-->
<div class="flex items-center justify-between px-2">
<div class="flex items-center space-x-2">
<a href="">
<x-application-logo class="block h-10 w-auto fill-current text-blue-100" />
</a>
<span class="text-2xl font-extrabold">Admin</span>
</div>
<button type="button" #click="open = !open" class=" inline-flex p-2 items-center justify-center rounded-md text-blue-100 hover:bg-blue-700 focus:outline-none ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!--Nav links-->
<nav>
<x-side-nav-link href="{{ route('dashboard') }}">
Dashboard
</x-side-nav-link>
</nav>
</div>
<!--Main Content-->
<main class="flex-1 bg-gray-100 h-screen" :class="open ? '' : 'relative'">
<!--top bar-->
<nav class="bg-blue-900 shadow-lg">
<div class="mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between md:justify-end h-16">
<div class="absolute inset-y-0 left-0 flex items-center ">
<a href="">
<x-application-logo class="block h-10 w-auto fill-current text-blue-100" />
</a>
<!--mobile button-->
<button type="button" x-on:click="open = !open" class="inline-flex items-center justify-center p-4 rounded-md text-blue-100 hover:bg-blue-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<div>
{{ $slot }}
</div>
</main>
</div>
</body>
Vue 3 Breadcrumb did not work with <Script setup>
I need your help for my Breadcrumb component.
It did work last time but after I add the Pinia it did not work anymore.
I don't know if this is related to Pinia or not.
This is the screenshot of the project
my_vue_project_screenshot
If you additional detail more than below, please let me know
Thank you all in advance
Also, I'm not sure my Vue project structure is correct or not.
Main layout
|
|- BreadCrumb
|- RouterView
I put BreadCrumb component inside every View pages. Like this (for example)
<script setup>
import breadcrumb from '../../components/breadcrumb.vue';
const pages=[{ name: 'ช่าง', href: '/staff', current: true }]
const technicians = [
{ id: 0, name: 'Mr A', score: 25, role: 'กลึง' },
{ id: 1, name: 'Mr B', score: 35, role: 'เจาะ' },
]
</script>
<template>
<breadcrumb :pages="pages"/>
<div class="space-y-6 pt-8 sm:space-y-5 sm:pt-10">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-xl font-semibold text-gray-900">รายชื่อช่าง</h1>
<p class="mt-2 text-sm text-gray-700">Admin</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<router-link to="/staff/add">
<button type="button" class="inline-flex items-center justify-center rounded-md border border-transparent
bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">เพิ่มช่าง</button>
</router-link>
</div>
</div>
<div class="mt-8 flex flex-col">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">ชื่อ</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">แผนก</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">คะแนน</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="technician in technicians" :key="technician.id">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{{ technician.name }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.role }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.score }}</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<router-link :to="{ name: 'editstaff', params: { id: technician.id }}"
class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ technician.name }}</span>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
This is my BreadCrumb.vue
<script setup>
import { ChevronRightIcon, HomeIcon } from '#heroicons/vue/20/solid'
</script>
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="/" class="text-gray-400 hover:text-gray-500">
<HomeIcon class="h-5 w-5 flex-shrink-0" aria-hidden="true" />
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li v-for="page in pages" :key="page.name">
<div class="flex items-center">
<ChevronRightIcon class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<a :href="page.href" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
:aria-current="page.current ? 'page' : undefined">{{ page.name }}</a>
</div>
</li>
</ol>
</nav>
</template>
Lastly, this is my main Layout (Not sure if this is related too or not
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '#headlessui/vue'
import {
HomeIcon,
Bars3Icon,
FolderIcon,
UsersIcon,
XMarkIcon
} from '#heroicons/vue/24/outline'
const authenticated = false;
const navigation = [
{ name: 'home', to: '/', icon: HomeIcon },
{ name: 'enj', to: '/staff', icon: UsersIcon },
{ name: 'proj', to: '/project', icon: FolderIcon },
{ name: 'selectproj', to: '/selectproject', icon: FolderIcon },
{ name: 'validateproj', to: '/validateproject', icon: FolderIcon },
]
const sidebarOpen = ref(false)
</script>
<template>
<div>
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" #close="sidebarOpen = false">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
<DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" #click="sidebarOpen = false">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="h-0 flex-1 overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 space-y-1 px-2">
<router-link v-for="item in navigation" :key="item.name" :to="item.to" class="['text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
<component :is="item.icon" :class="[isActive ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-4 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</router-link>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<p class="text-base font-medium text-white">Tom Cook</p>
<p class="text-sm font-medium text-gray-400 group-hover:text-gray-300">View profile</p>
</div>
</div>
</a>
</div>
</DialogPanel>
</TransitionChild>
<div class="w-14 flex-shrink-0">
<!-- Force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex min-h-0 flex-1 flex-col bg-gray-800">
<div class="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 flex-1 space-y-1 px-2">
<RouterLink v-for="item in navigation" :key="item.name" :to="item.to" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-sm font-medium rounded-md']">
<component :is="item.icon" :class="[item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-3 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</RouterLink>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<div class="group block w-full flex-shrink-0">
<div v-if="authenticated" class="flex items-center">
<div class="ml-3">
<p class="text-base font-medium text-white pl-2">:Username</p>
<RouterLink to="/">
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">Logout</p>
</RouterLink>
</div>
</div>
<div v-else class="flex items-center">
<div class="ml-3">
<RouterLink to="/signin">
<p class="text-base font-medium text-gray-300 group-hover:text-gray-200">เข้าสู่ระบบ</p>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-1 flex-col md:pl-64">
<div class="sticky top-0 z-10 bg-gray-100 pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
<button type="button" class="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" #click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<main class="flex-1">
<div class="py-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<slot>
<RouterView/>
</slot>
<!-- /End replace -->
</div>
</div>
</main>
</div>
</div>
</template>
Trying to create a global Footer component and importing into my Vue.js file
I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!
So I have initially created a Footer Component in ./components/Footer.vue. Here is the code for that specific component (Footer component) -
<template>
<section>
<div class="skew skew-top mr-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
</svg>
</div>
<div class="skew skew-top ml-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
</svg>
</div>
<div class="py-20 bg-gray-900 radius-for-skewed">
<div class="container mx-auto px-4">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/3 mb-16 lg:mb-0">
<a class="inline-block mb-3 text-white text-3xl font-bold leading-none" href="#">
<img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
</a>
<p class="mb-4 max-w-sm text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
<div>
<a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/facebook-purple.svg">
</a>
<a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/twitter-purple.svg">
</a>
<a class="inline-block w-10 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/instagram-purple.svg">
</a>
</div>
</div>
<div class="w-full lg:w-2/3 lg:pl-16 flex flex-wrap justify-between">
<div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Products</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Services</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">News and Stories</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Important Links</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Organization Team</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Our Journeys</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Pricing Plans</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Terms & Conditions</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 lg:w-auto">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Company</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Jobs</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Press</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<p class="lg:text-center text-sm text-gray-400 border-t border-gray-800 pt-12 mt-16">© 2021. All rights reserved.</p>
</div>
</div>
<div class="skew skew-bottom mr-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
</svg>
</div>
<div class="skew skew-bottom ml-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
</svg>
</div>
</section>
</template>
<script>
export default {}
</script>```
**And here is the contents of my App.vue -**
```<script>
import { createApp } from 'vue'
import Footer from './components/Footer.vue'
const globalComponents = createApp({})
globalComponents.component(
// the registered name
'Footer',
)
app
.component('Footer', Footer)
</script>
<template>
<h1 class="text-[100px] text-center m-auto text-red underline"> Hello Vue JS </h1>
</template>
<Footer />
<style scoped>
</style>```
However, when I run npm run dev everything opens and the local server but just shows a blank page, not even then <template><h1>Hello Vue JS</h1><template/>
Not only this but the footer doesnt appear at all and is highlighted grey in my IDE which is assume means its not being imported correctly.
I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!**
Put footer inside <template> Code is here I don't think you need createApp simply put like this <Footer /> in your App.vue inside the <templete> tag <template> Hello World! <Footer /> </template> Hello World! is your main content, Footer is your footer content or breadcrumb content Same way you can add header if you have Header.vue <template> <Header /> Hello World! <Footer /> </template>
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,
];
}
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.