<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="{{ route('home.index') }}">En</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('home.index') }}">Home</a>
</li>
<li class="dropdown nav-item">
<a class="nav-link" data-toggle="dropdown">Categories<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
#foreach($categories as $category)
<li>
<a href="/?category={{ $category->name }}">
{{ $category->name }}
</a>
</li>
#endforeach
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('about') }}">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I have the above code in my header which I include in my app.blade.php as #include('user.layouts.header') then I use app.blade.php as my layout.
How do I pass data to the header so that I can stop getting the below error if that's the reason I'm getting the error!
Undefined variable: categories (View: /home/alphy/blogEngidaFinal/resources/views/user/layouts/header.blade.php)
See the documentation.
You can pass params while including the header view,
#include('view.name', ['some' => 'data'])
In your case,
#include('user.layouts.header', ['categories' => ['food', 'drink', 'dessert'])
Related
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>
I am created a navigation bar with bootstrap. I want to get the navigation menu item name with PHP code. I was trying to do that with 'GET' method but I cannot do that without changing the page. Here I attached the nav-bar code.
<body>
<!-- ======================== Navigation Bar ============================== -->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container-fluid p-0" id="navbarSupportedContent">
<a class="navbar-brand" href="#"><img src="../images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" 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">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<?php
echo "Selected Item"; // display selected navigation item here.
?>
</body>
</html>
This is my index.php page body. I want to get the selected item name on the same index.php page. Please can anyone help me?
I used JavaScript and Ajax to solve this
i am new to laravel. currently i am working on laravel 7. i made a navigation bar a seperate file which i extends on all the front end file. i just know that when i need a data from the database in front end
then i do like this
$cat = modelname::all();
return view('addproducts')->with('cat',$cat);
but that code works on that condition when i have to go to that front end blade file. but on navigation bar senario i dont need to go to the nav file i just go to another blade file and nav file is extended on it.
i just want to know how to access the data from the databse on navigation bar
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<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">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
</html>
this is the code of my nav file where i want to get the data from the database and then want to show in a dropdown menu
#extends('layouts.nav');
#section('content')
//code for the front end of the page
#endsection
this is how i extend the nav file on another page
#Fahad Munir would something like this work in your case? Using 'include' instead of 'extends'?
#include('layouts.nav', ['cat' => $cat = App\modelname::all();])
If this does not work for your purposes, you may also consider using a View Composer.
See the Laravel documentation about View Composers here: https://laravel.com/docs/7.x/views#view-composers.
Utilizing a View Composer would allow you to add something like the following to the boot() method in your appServiceProvider or after creating a new service provider using artisan and adding to the boot() method after doing that like so:
view()->composer('layouts.nav', function($view) {
$view->with('cat', App\modelname::all());
});
Read more about that in the Laravel documentation here, if need be:
https://laravel.com/docs/7.x/providers#the-boot-method
If your on Laravel 7 then you really need to use the new component feature added to Laravel 7, to do that run php artisan make:component NavigationComponent, this will generate a NavigationComponent class and a navigation-component blade file.
navigation-component.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<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">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
NavigationComponent.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class NavigationComponent extends Component
{
public $cat;
/**
* Create a new component instance.
*
* #return void
*/
public function __construct()
{
$this->cat = CatModel::all();
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\View\View|string
*/
public function render()
{
return view('components.navigation-component');
}
}
For more visit Laravel Component docs
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 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.