Level 29
Can you share the code, so we can see how you handle the state of the dropdown menu.
Do you get an error in the browser dev tools console?
Mar 30, 2024
25
Level 1
when i use Link for inertia , Menu toggle work just one time
hi evry one i have a problem with inertia Link, my dropdown stop working when i click a link
Level 1
@gych hi thanks reply,
<ul class="menu-inner py-1">
<!-- Page -->
<li class="menu-header small text-uppercase">
<span class="menu-header-text">Base</span>
</li>
<li
v-for="(i, index) in navi"
:key="index"
class="menu-item"
:class="i.route.includes(route) == true ? 'active open' : ''"
>
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i :class="'menu-icon tf-icons ' + i.icon"></i>
<div data-i18n="Domaine">{{ i.name }}</div>
</a>
<ul class="menu-sub">
<li
v-for="(item, index) in i.items"
:key="index"
class="menu-item"
:class="route == item.route ? active : ''"
>
<Link @click="appendss" :href="item.route" class="menu-link">
<i :class="'menu-icon tf-icons ' + item.icon + ' btnclickspiner'"></i>
<div data-i18n="Page 2">{{ item.name }}</div>
</Link>
</li>
</ul>
</li>
</ul>
Level 1
@gych when i change the tag with link for inertia, before clicking my menu working good but when i click my menu and supmenu dosn't work
Level 29
@genialtechnology Can you also share the script and did you check browser console to see if you get any errors?
Level 1
@gych no there is no error in the console
<!-- fin logo image -->
<span
style="text-transform: uppercase"
class="app-brand-text demo menu-text fw-bolder ms-2 text-lg"
>GESCOM</span
>
</a>
<a
href="javascript:void(0);"
class="layout-menu-toggle menu-link text-large ms-auto"
>
<i class="bx bx-chevron-left bx-sm align-middle"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Page -->
<li class="menu-header small text-uppercase">
<span class="menu-header-text">Base</span>
</li>
<li
v-for="(i, index) in navi"
:key="index"
class="menu-item"
:class="i.route.includes(route) == true ? 'active open' : ''"
>
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i :class="'menu-icon tf-icons ' + i.icon"></i>
<div data-i18n="Domaine">{{ i.name }}</div>
</a>
<ul class="menu-sub">
<li
v-for="(item, index) in i.items"
:key="index"
class="menu-item"
:class="route == item.route ? active : ''"
>
<Link :href="item.route" class="menu-link">
<i :class="'menu-icon tf-icons ' + item.icon + ' btnclickspiner'"></i>
<div data-i18n="Page 2">{{ item.name }}</div>
</Link>
</li>
</ul>
</li>
</ul>
</aside>
<div class="layout-page">
<nav
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar"
>
<div class="navbar-nav align-items-center">
<a
class="nav-link style-switcher-toggle hide-arrow"
href="javascript:void(0);"
>
<i class="bx bx-sm"></i>
</a>
</div>
<div
class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none"
>
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
<i class="bx bx-menu bx-sm"></i>
</a>
</div>
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<!-- User -->
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a
class="nav-link dropdown-toggle hide-arrow"
href="javascript:void(0);"
data-bs-toggle="dropdown"
>
<div class="avatar avatar-online">
<img
src="assets/img/avatars/1.png"
alt
class="w-px-40 h-auto rounded-circle"
/>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar avatar-online">
<img
src="assets/img/avatars/1.png"
alt
class="w-px-40 h-auto rounded-circle"
/>
</div>
</div>
<div class="flex-grow-1">
<span class="fw-semibold d-block">John Doe</span>
<small class="text-muted">Admin</small>
</div>
</div>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="bx bx-user me-2"></i>
<span class="align-middle">My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="bx bx-cog me-2"></i>
<span class="align-middle">Settings</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<span class="d-flex align-items-center align-middle">
<i class="flex-shrink-0 bx bx-credit-card me-2"></i>
<span class="flex-grow-1 align-middle">Billing</span>
<span
class="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20"
>4</span
>
</span>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="auth-login-basic.html">
<i class="bx bx-power-off me-2"></i>
<span class="align-middle">Log Out</span>
</a>
</li>
</ul>
</li>
<!--/ User -->
</ul>
</div>
</nav>
<div class="content-wrapper">
<slot />
<footer class="content-footer footer bg-footer-theme">
<div
class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column"
>
<div class="mb-2 mb-md-0">
© {{ date }}
, Conception et développement :
<a
href=""
target="_blank"
class="footer-link fw-bolder"
>GenialTechnology</a
>
</div>
<div>
<a href="#" target="_blank" class="footer-link me-4"
>Pour tout réclamation Merci de nous contacter :
<strong>06 61 43 48 22</strong>
</a>
</div>
</div>
</footer>
<div class="content-backdrop fade"></div>
</div>
</div>
</div>
<div class="layout-overlay layout-menu-toggle"></div>
<div class="drag-target"></div>
Level 1
import { Link } from "@inertiajs/vue3"; import Naviga from "../nav.json"; export default { components: { Link }, data() { return { date: new Date().getFullYear(), active: "active", navi: Naviga, }; }, props: { route: "", }, methods: { } };
Level 1
@gych for information i use template bootrap and jquery
Level 29
@genialtechnology From which Bootstrap component do these classes come from menu-link menu-toggle ?
Can you provide me the link from the bootstrap docs?
Level 1
Level 29
@genialtechnology Does this template support Vue and Inertia ? Or did you implement this yourself?
Level 1
@gych no i just added my self, first it work good with vue js , when i added the link for inertia the nav menu stop working
Level 29
@genialtechnology Ok something might have gone wrong with the implemention of Inertia together with this template. How did you intergrate the js files from this template?
Level 1
@gych i create main.blade.php
@yield('title')
<link rel="icon" type="image/x-icon" href="{{ url('assets/img/favicon/favicon.ico') }}" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="{{ url('assets/vendor/fonts/boxicons.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/animate-css/animate.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/css/rtl/core.css') }}" class="template-customizer-core-css" />
<link rel="stylesheet" href="{{ url('assets/vendor/css/rtl/theme-default.css') }}"
class="template-customizer-theme-css" />
<link rel="stylesheet" href="{{ url('assets/css/demo.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url('css/app.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/select2/select2.css') }} " />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/jstree/jstree.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/fonts/fontawesome.css') }}" />
<link rel="stylesheet" href="{{ url('assets/vendor/libs/spinkit/spinkit.css') }}" />
<script src="{{ url('js/app.js') }}"></script>
<script src="{{ url('assets/vendor/js/helpers.js') }}"></script>
<script src="{{ url('assets/vendor/js/template-customizer.js') }}"></script>
<script src="{{ url('assets/js/config.js') }}"></script>
<script src="{{ url('assets/vendor/libs/jquery/jquery.js') }}"></script>
<script src="{{ url('assets/vendor/libs/popper/popper.js') }}"></script>
<script src="{{ url('assets/vendor/js/bootstrap.js') }}"></script>
<script src="{{ url('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
<script src="{{ url('assets/vendor/libs/hammer/hammer.js') }}"></script>
<script src="{{ url('assets/vendor/js/menu.js') }}"></script>
<script src="{{ url('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js') }}"></script>
<script src="{{ url('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js') }}"></script>
<script src="{{ url('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js') }}"></script>
<script src="{{ url('assets/vendor/libs/flatpickr/flatpickr.js') }}" />
<script src="{{ url('assets/vendor/libs/moment/moment.js') }}"></script>
<script src="{{ url('assets/vendor/libs/toastr/toastr.js') }}"></script>
<script src="{{ url('assets/js/main.js') }}"></script>
<script src="{{ url('assets/js/ui-toasts.js') }}"></script>
<script src="{{ url('assets/js/forms-pickers.js') }}"></script>
<script src="{{ url('assets/vendor/libs/jstree/jstree.js') }}"></script>
<script src="{{ url('assets/js/extended-ui-treeview.js') }}"></script>
<script src="{{ url('assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
<script src="{{ url('assets/vendor/libs/block-ui/block-ui.js') }}"></script>
and after i create app.blade.php
@extends('layouts.main')
@section('title')
@section('vue')
</div>
Level 1
Level 29
@genialtechnology This will work when you just use Vue but when using inertia you'll have to use a different approach.
Can you share your app js file and vite config so I can see which approach you use in these files ?
Level 1
@gych app js require('./bootstrap');
import { createApp, h } from 'vue'; import { InertiaProgress } from '@inertiajs/progress';
import { createInertiaApp } from '@inertiajs/vue3';
createInertiaApp({
resolve: name => require(./Pages/${name}),
setup({ el, App, props, plugin }) { createApp({ render: () => h(App, props) }) .use(plugin) .use(scri) .mount(el) }, });
Level 1
@gych for vite i dont use it
Level 29
@genialtechnology Ok that seems good
In your app.blade.php file you should use @inertia to load pages with inertia and also make sure that all your current routes return a vue template rendered with Inertia and not a blade view.
What do you use to bundle/build your files ? Webpack?
Level 1
@gych yes i already do it
@inertia
</div>
</div>
Level 1
@gych controller public function index() { $ville = Ville::all(['id', 'nom AS text']);
return Inertia::render('structure/Client', compact('ville'));
}
Level 29
@genialtechnology And which bundler do you use to build your application?
Level 1
@gych webpack
Level 29
@genialtechnology Can you share your webpack config file
Level 1
@gych const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css').vue();
Level 29
When you click on the Inertia Link does it correctly render the template inside @inertia ?
Please or to participate in this conversation.