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/
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 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.
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);
Am using same navbar for shop products and shop product. #if statement isn't working. Here is navbar:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
#if (\Request::path('/shop'))
<a class="nav-link js-scroll-trigger" href="#page-top">Shop</a>
#elseif (\Request::path('/product'))
<a class="nav-link js-scroll-trigger" href="/shop">Shop</a>
#endif
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
Here is routes:
Route::view('/product', 'shop.product');
Route::get('/shop', 'ShopController#index')->name('shop.index');
You can use request()->is() function of request. as below:
#if (request()->is('shop'))
<a class="nav-link js-scroll-trigger" href="#page-top">Shop</a>
#elseif (request()->is('product'))
<a class="nav-link js-scroll-trigger" href="/shop">Shop</a>
#endif
I have a basic navbar in my web page. When I click any nav-items I am trying to redirect the user to another page.
I have route set up for that but when I click that nav-item I am not able to redirect it.
HTML
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="{{ Route('staticController#contact') }}">link</a> </ul>
</div>
Routes.php
Route::get('/','homeScreenController#index');
Route::get('/contact','staticController#contact');
If I try to do this,I get a error message that on my homepage itself saying,
Route [staticController#contact] not defined.
but I have already defined it.
and when I do this error doesn't come but it will not take me to contact page.
<li class="nav-item"> <a class="nav-link" href="{{ ('staticController#contact') }}">link</a> </ul>
Try like this:
<a class="nav-link" href="{{ url('/contact') }}">link</a>