I have a navbar with a dropdown menu, but he is open by default, and can't be closed. I read my code multiple times and I can't find the mistake. Thanks for helping
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="Accueil.php">Accueil
<span class="visually-hidden">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="PrendreRDV.php">Plannifier un rendez-vous</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AfficherRDV.php">Afficher les rendez-vous</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" onclick="return confirm('Vous allez être redirigé vers une autre page')" href="https://calendly.com/app/scheduled_events/user/me">Gérer un rendez-vous</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AfficherClients.php">Gérer clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Calendrier.php">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Historique.php">Historique</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Administration</a>
<div class="dropdown-menu show" data-bs-popper="none">
<a class="dropdown-item" href="#">Modifier champs</a>
<a class="dropdown-item" href="#">Modifier table</a>
<a class="dropdown-item" href="#">Modifier client</a>
</div>
</li>
</ul>
you need to add Css & Javascript to get that funtionality.
Related
I'm working on a project and want to add jetstream login and register faction on my header. I've already added app layouts like on my navbar but it looks distorted. How can I fix it?
my result looks like: https://www.hizliresim.com/g05vduy
<div class="collapse navbar-collapse" id="navbarSupport">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="doctors.html">Doctors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
#if(Route::has('login'))
#auth
<x-app-layout>
</x-app-layout>
#else
<li class="nav-item">
<a class="btn btn-primary ml-lg-3" href="{{route('login')}}">Login</a>
</li>
<li class="nav-item">
<a class="btn btn-primary ml-lg-3" href="{{route('register')}}">Register</a>
</li>
#endauth
#endif
</ul>
I have create my login in codeigniter using sessions and whenever i try to add if statements to hide register page and login page from nav bar once user is logged in it does not seem to work. This below is my navigation menu code and i was wondering just exactly where and how would i write down statement to hide the register and login page once user is logged in?
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo base_url();?>index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="index.php/user/account">Account</a>
</li>
<?php if($this->session->userdata('username')) : ?>
<li class="nav-item">
<a class="nav-link" href="index.php/user">Login</a>
</li>
<?php if($this->session->userdata('username')) : ?>
<li class="nav-item ">
<a class="nav-link" href="index.php/registerPage">Register</a>
</li>
</ul>
</div>
</nav>
I know the sessions is working as whenever i go back to login it redirects me to account page which then gives me option to logout and also show login details. just not sure how to put it in this navigation menu.
you have a mistake on your if statement here i have updated your code.
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo site_url();?>">Home <span class="sr-only">(current)</span></a>
</li>
<?php
//here we check if session `username` is exist. so it means that the current user is logged in correctly
if($this->session->userdata('username')) : ?>
<li class="nav-item active ">
<a class="nav-link" href="<?php echo site_url('/user/account'); ?>">Account</a>
</li>
<?php else : ?>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('/user'); ?>">Login</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="<?php echo site_url('/registerPage'); ?>">Register</a>
</li>
<?php endif;?>
</ul>
</div>
</nav>
Try This
if (isset($this->session->userdata['username'])) {
$message= '<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo base_url();?>">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="index.php/user/account">Account</a>
</li>
</ul>
</div>
</nav>';
} else {
$message = '<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active ">
<a class="nav-link" href="<?php echo base_url();?>">Home
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="index.php/user/account">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php/user">Login</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="index.php/registerPage">Register</a>
</li>
</ul>
</div>
</nav>';}
echo ($message);
I want to add a dropdown menu to one of my menus in the nav-bar but I can’t seem to do it. I dont know where to put the dropdown code to make it function and with the CSS included.
Here’s my header.inc.php code:
<header class="flex-shrink-0 flex-grow-0">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-ewarz sticky-top h-100 p-0">
<section class="container-fluid">
<!-- Nav Brand Text -->
<a class="navbar-brand d-none d-lg-block" style="font-size: 24pt; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;" href="#">e<span style="color: #aa3232">W</span>arz</a>
<!-- Burgermenu Toggler -->
<button class="navbar-toggler ml-auto mr-2 collapsed" style="margin: 15px;" data-toggle="collapse" data-target="#navMenu" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-ewarz" id="navMenu">
<!-- Nav Links -->
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-account-multiple mr-2"></i>Crew</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-cart mr-2"></i>Shop</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-text-box-outline mr-2"></i>General<i class="mdi mdi-menu-down"></i></a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-information-outline mr-2"></i>About<i class="mdi mdi-menu-down"></i></a>
</li>
</ul>
</div>
<!-- Nav Icons -->
<section class="d-none d-lg-block d-lg-inline-flex">
<i class="icon mdi mdi-discord d-block mr-1"></i>
<i class="icon mdi mdi-steam d-block ml-1"></i>
</section>
</section>
</nav>
</header>
You can add again <ul><li> after <ul><li>.
You can use this for dropdown;
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home2</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home3</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home4</a>
</li>
</ul>
</li>
</ul>
Drop down menus in Navbar should be defined in this way.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Heading
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dropdown Item 1</a>
<a class="dropdown-item" href="#">Dropdown Item 2</a>
<a class="dropdown-item" href="#">Dropdown Item 3</a>
</div>
</li>
Sample code shown below:
<!-- Nav Links -->
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
</li>
<!-- Add this block -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu Text
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown Item 1</a>
<a class="dropdown-item" href="#">Dropdown Item 2</a>
</div>
</li>
<!-- Add this block -->
</ul>
Refer this link for details
I am trying to use AdminLTE3 as admin panel in laravel and I have nav-item links which doesn't activate when I click them. I don't know how to fix this. I used the starter.html from adminLTE3 and I have all the required assets for adminLTE3 but my nav-item links are not activated, How can I fix this, I would really appreciate for any help. my side bar code is :
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('home')}}" class="nav-link">
<i class="fab fa-elementor nav-icon"></i>
<p>Main</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Posts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('posts.index')}}" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>All Posts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="{{route('gallery.index')}}" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Galleries
</p>
</a>
</li>
<li class="nav-item">
<a href="{{route('logout')}}" class="nav-link">
<i class="nav-icon fa fa-code"></i>
<p>
Logout
</p>
</a>
</li>
</ul>
</nav>
I tried the suggestion provided by kapitan
nav-link {{ Route::current()->getName() == 'posts.index' ? 'active' : '' }}
but problem is when I click any nav-item it hides like this
when I click the service drop down then it shows like this
For simplicity sake:
<a href="#" class="nav-link {{ Route::current()->getName() == 'my.route.name' ? 'active' : '' }}">
As you can see, this is a long cut method, you can improve this further. But this is a good starting point for you.
UPDATE:
Untested, but can you please try this:
<a href="#" class="nav-link {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
UPDATE 2 :
<li class="nav-item has-treeview {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview {{ Request::path() == 'my/url/here' ? 'menu-open' : '' }}">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link {{ Request::is('my/url/here') ? 'active' : '' }}">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>
I want to make a sidebar for my webpage but I am having some trouble doing it, I followed a lot of tutorial and yet the sidebar didn't come out instead only the words came out. Most people I saw just only use php but I feel like there is a need to use javascript. Can someone give me a template on making a sidebar something like this in the screenshot.
This is the codes that I used:
sidebar.blade.php
<div class="app-body">
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="main.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-primary">NEW</span></a>
</li>
<li class="nav-title">
UI Elements
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Components</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="components/buttons.html"><i class="icon-puzzle"></i> Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components/social-buttons.html"><i class="icon-puzzle"></i> Social Buttons</a>
</li>
</ul>
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Icons</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="icons/font-awesome.html"><i class="icon-star"></i> Font Awesome <span class="badge badge-secondary">4.7</span></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> Widgets <span class="badge badge-primary">NEW</span></a>
</li>
Extras
</li>
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Pages</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="views/pages/login.html" target="_top"><i class="icon-star"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="views/pages/register.html" target="_top"><i class="icon-star"></i> Register</a>
</li>
</ul>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
This is what I get:
Why not using any admin templates? https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/