AdminLTE-3 activate a side navbar - php

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>

Related

Bootstrap navbar toggler icon is not working on mobile

hope you are all doing well, i have just face a problem. i make my website online. everything working well expect navbar toggler icon. it is not working on mobile device. it is working well on desktop
here is my code
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
you can check my website also
http://rudrafasteners.com/
It seems you don't add Javascript at your head. Add the followings lines to your HTML <head> tag (Jquery and Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Adding dropdown in PHP Navbar

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

Is there a way of using PDO or Smarty to change a navigation bar if a user is logged in?

I am creating a website using Smarty and PDO, here is my header file and I'm not sure how I can make it change depending on whether a user is logged in or not?
When the user isn't logged in these options should appear (Friday, Saturday, Sunday, Sign up, Log in)
But when they sign in I want 'Sign up' and 'log in' to change to 'My account' and 'Sign Out'. Below are is the code I currently have.
//If user is logged in
<div id="navigation"> <ul class="nav" id="navigation">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" id="hideshow" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="far fa-caret-square-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php?p=main">Home <i class="far fa-arrow-alt-circle-right"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=friday">Friday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=saturday">Saturday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=sunday">Sunday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=logout" id="Logout" />Logout <i class="fas fa-sign-out-alt"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=account">My account <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
//If user isn't signed in
<div id="navigation"> <ul class="nav" id="navigation">
<nav class="navbar navbar-expand-lg ">
<button class="navbar-toggler" id="hideshow" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="far fa-caret-square-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php?p=main">Home <i class="far fa-arrow-alt-circle-right"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=friday">Friday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=saturday">Saturday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=sunday">Sunday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=signup" id="signup" />Signup <i class="fas fa-user-plus"></i></a>
</li>
<li class="nav-item">
</i>
</li></ul>
{/if}
</div>
</nav></div>
First of all assign a variable from Controller to your view, example:
$view->assign('USER_ID', $this->auth->getUserId());
then in template:
{if $USER_ID > 0}
{* html or template when user is logged in *}
{* if differences are big, better is create new sub-template: *}
{include file='./header-logged-in.tpl'}
{else}
{* html or template when user is not logged in *}
{include file='./header-logged-out.tpl'}
{/if}
if(isset($_SESSION['user_id'])) {
// User Logged In Navigation
} else {
// User Logged Out Navigation
}
Of course, you didn't provide enough information, this assumes your user session is set to $_SESSION['user_id'] <-- change to whatever your session is saved as.

how to add class active in menu laravel if use treeview

I am having trouble to adding class "menu-open" and "active" if I use a Multi-level menu.
I succeeded in adding active class in single menu.
Single Menu
<li class="nav-item">
<a href="{{ route('listTemuan') }}" class="nav-link {{ Route::currentRouteNamed('listTemuan') ? 'active' : '' }}">
<i class="fa fa-table nav-icon"></i>
<p>
List Temuan
</p>
</a>
</li>
I don't understand how to make it in Multi-level menu.
This is for my Multi-level menu:
<li class="nav-item has-treeview"> //I want to add class menu-open in here
<a href="#" class="nav-link"> //I want to add class active in here
<i class="fa fa-gear nav-icon"></i>
<p>
Setting
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('UserPekerja') }}" class="nav-link {{ Route::currentRouteNamed('UserPekerja') ? 'active' : '' }}">
<i class="fa fa-circle-o nav-icon"></i>
<p>User Pekerja</p>
</a>
</li>
</ul>
</li>
Use your route name to accomplish it like below code
#if(\Request::route()->getName() == 'route name')
class="nav-item has-treeview open"
#else class="nav-item has-treeview"
#endif
use same segment with appropriate checking
#if(\Request::route()->getName() == 'expected route name')
class="nav-link active"
#else class="nav-link"
#endif

Link directory being doubled

I have directory like this "localhost/site/folder1/file.php", I need to access file.php from "site" directory this way
href = "folder1/file.php"
unfortunately it takes me to
href = "folder1/folder1/file.php"
and when I access "index.php" file located in "site" directory from "folder1", this way
href = "../index.php"
it takes me to root directory in c: I mean this way
href = "localhost/index.php".
I have stacked with this problem for two days now, please any one to help me get out this.
Note: I am using bootstrap framework
More edit...
here is the full code.
<section>
<section class="hbox stretch">
<!-- .aside -->
<aside class="bg-black dk nav-xs aside hidden-print" id="nav">
<section class="vbox">
<section class="w-f-md scrollable">
<div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
<!-- nav -->
<nav class="nav-primary hidden-xs">
<ul class="nav bg clearfix" data-ride="collapse">
<!--<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
Discover
</li>-->
<li>
<a href= "../index.php">
<i class="icon-home icon text-success"></i>
<span class="font-bold">Home</span>
</a>
</li>
<li>
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="fa fa-angle-left text"></i>
<i class="fa fa-angle-down text-active"></i>
</span>
<i class="icon-music-tone-alt icon text-info"></i>
<span class="font-bold">Audios</span>
</a>
<ul class="nav dk text-sm">
<li >
<a href="../general.php" class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Speaches</span>
</a>
</li>
<li >
<a href="../general.php" class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Preaches</span>
</a>
</li>
<li >
<a href="../general.php" class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Interviews</span>
</a>
</li>
<li >
<a href="../general.php" class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Songs</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="fa fa-angle-left text"></i>
<i class="fa fa-angle-down text-active"></i>
</span>
<i class="icon-book-open icon text-primary-lter"></i>
<span class="font-bold">Writtings</span>
</a>
<ul class="nav dk text-sm">
<li >
<a href="../general.php" class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Books</span>
</a>
</li>
<li >
<a href="../general.php" class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Jounals</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="icon-users icon text-primary-lter"></i>
<span class="font-bold">Artists</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-film icon text-info-dker"></i>
<span class="font-bold">Albums</span>
</a>
</li>
<li class="m-b hidden-nav-xs"></li>
</ul>
<ul class="nav" data-ride="collapse">
<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
User Account
</li>
<li>
<?php
if(!isset ($_SESSION['email'])){
echo "
<a href='../signin.php' class='auto'>
<i class='icon-login icon'>
</i>
<span>Signin</span>
</a>
</li>
<li >
<a href='../signup.php' class='auto'>
<i class='fa fa-smile-o'>
</i>
<span>Signup</span>
</a>
</li>
";
}else{
echo "
<a href='../signout.php' class='auto'>
<i class='icon-logout icon'>
</i>
<span>SignOut</span>
</a>
</li>";
if (!isset($_SESSION['admin_name'])) {
echo "
<li >
<a href='profile.php' class='auto'>
<i class='fa fa-smile-o'>
</i>
<span>My profile</span>
</a>
</li>
";
}else{
echo "
<li >
<a href='MembersManagement.php' class='auto'>
<i class='fa fa-edit'>
</i>
<span>Manage Member</span>
</a>
</li>
<li >
<a href='admin.php' class='auto'>
<i class='fa fa-edit'>
</i>
<span>My Dashboard</span>
</a>
</li>
";
}
}
?>
</ul>
</nav>
<!-- / nav ---->
</div>
</section>
And the problem is on this line
<nav class="nav-primary hidden-xs">
When I remove "nav-primary" everything is doing fine with the anchors () but it changes the appearance and arrangements in the section, what should I do, I am new to bootstrap frameworks.
If you are having problem with relative urls, you can try doing with absolute urls like :
href = "localhost/site/folder1/file.php".
and for the other one you can do same:
href = "localhost/site/index.php
Maybe this helps.

Categories