for some reason when I try to add in a title for my page, inside my navbar, it not showing up. I am currently trying to create a title for every page I have inside the navbar and I have researched a lot and one of the resources that was helpful was this,Laravel dynamic page title in navbar-brand, I tried following it but for some reason, my title isn't showing. Could it be because I have put my #yield and #section wrongly? So sorry because it my first time using this function since most of the time I would just follow tutorial video in doing it.
app.blade.php (sorry I don't really know where to put it)
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<title>#yield('title')</title>
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
home.blade.php(this is where I want the title to be shown)
#extends('layouts.app')
#section('title', 'Summary')
#section('content')
<link href="{{ asset('css/homeStyle.css') }}" rel="stylesheet">
<table class="table table-bordered">
<tr>
<th><strong><big>Name: </big></strong></th>
<th><strong><big>Action: </big></strong></th>
</tr>
<td>
<tr>
#foreach($data as $value)
<tr>
#if($value->blacklist == 'Yes')
<th><span style="color: red;">{{$value->Name}}</th>
#else
<th>{{$value->Name}}</th>
#endif
<th><form action="{{ url('/home/'.$value->pi_id.'/delete') }}" method="get">
{{ csrf_field() }}
<button type="submit">Delete</button>
</form></th>
</tr>
#endforeach
#endsection
In your app.blade make sure you add in head tags
<head>
<title>#yield('title')</title>
</head>
Next, in your navbar header div
#yield('title')
Remove the title tags, not needed, as its stated in head tags
Your individual pages will then work as you have it now
#section('title', 'Summary')
before your content section
Hope that helps
Related
I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this
Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)
Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection
I'm having a problem.
I have the following Sidebar in a file called navbar.blade.php:
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Menu</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
</li>
<li>
<a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
<ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Product</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 2
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 3
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 4
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
<hr>
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">loser</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div class="col py-3">
Content area...
</div>
</div>
</div>
Then I have a second layout file (layout.blade.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#vite(['resources/css/app.css', 'resources/js/app.js'])
<title>Document</title>
</head>
<body>
<x-navbar/>
{{$slot}}
</body>
</html>
Next I have the following view (index.blade.php) which I want to be shown not under the sidebar but in the space where there is the word Content area ... in the sidebar.
As I am doing, the contents of index.blade.php are shown below.
<x-layout>
#if (session('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
#endif
<div class="row margintitle">
<div class="col-12 col-md-8 d-flex justify-content-center">
<h1>List all customers</h1>
</div>
</div>
</x-layout>
Can anyone kindly help me?
You can use the x-slot tag
(refs: https://laravel.com/docs/9.x/blade#slots)
I simplified the code:
navbar.blade.php:
<div class="col py-3">
{{-- Content area... -- }}
{{ $slot }}
</div>
layout.blade.php:
<x-navbar>
{{ $navbarContent }}
</x-navbar>
{{ $slot }}
index.blade.php:
<x-layout>
<x-slot:navbar-content> navbar title </x-slot>
<div> other content </div>
</x-layout>
I'm trying to add this bootstrap nav menu to my Laravel application, but in smaller screensize when I click on the hamburger icon it won't open.
I checked similar questions here and tried the solutions but none of them worked for me.
I also checked, bootsrap css and js are properly included in the document, in my footer first comes jquery, then popper then bootstrap.js.
Here is my header code:
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}"><img src="{{ asset('public/assets/frontend/images/logo.png') }}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="{{ route('home') }}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('frontend.courses') }}">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('contact') }}">Contact</a></li>
#guest
<li class="nav-item"><a class="btn btn-red" href="{{ route('login') }}">Sign In</a></li>
#else
#if(Auth::user())
<li class="nav-item logged-in">
<div class="dropdown">
<a href="" class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg" aria-hidden="true"></i> My Dashboard
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#if(Auth::user()->role_id == 1)
<a class="dropdown-item" href="{{ url('admin') }}">Admin</a>
#endif
<a class="dropdown-item" href="#">My Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Log out</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</div>
</li>
#endif
#endguest
</ul>
</div>
</div>
</nav>
</header>
I also have these error messages in the console:
Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test ()
at HTMLDivElement. (collapse.js:346)
at Function.each (jquery-3.5.0.min.js:2)
at S.fn.init.each (jquery-3.5.0.min.js:2)
at S.fn.init.a._jQueryInterface [as collapse] (collapse.js:337)
at HTMLDivElement. (collapse.js:385)
at Function.each (jquery-3.5.0.min.js:2)
at S.fn.init.each (jquery-3.5.0.min.js:2)
at HTMLButtonElement. (collapse.js:381)
at HTMLDocument.dispatch (jquery-3.5.0.min.js:2)
I got it.
Thanks to this answer: https://stackoverflow.com/a/61198996/7133015
This is an incompatibility between bootstrap and kquery (3.5.0). needed to switch back to jquery 3.4.1
I am using the Laravel framework and want to use Bootstrap to create a dropdown inside a navbar. I would like the dropdown not to expand the height of the navbar when clicked.
image: https://i.imgur.com/2tryjXl.png
I have seen the dropdown and navbar Bootstrap4 documentation and have searched a lot of posts but still can't solve this problem.
<div id="app">
<nav class="navbar navbar-default navbar-dark bg-dark">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div>
<ul class="nav navbar-nav justify-content-end">
#if (Auth::guest())
<li class="nav-item">Login</li>
#else
<li>
<div class="dropdown show">
<a href="#" class="btn btn-secondary dropdown-toggle" role="button"
id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a href="{{ route('logout') }}" class="dropdown-item"
onclick="event.preventDefault();document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST"
style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
I would expect that the navbar won't expand due to the open of dropdown in it.
Replace the navbar-default class with navbar-expand
You may also want to add dropdown-menu-right after dropdown-menu to align the dropdown
I am using Bootstrap 4 and accordion panels, within those panels i have tables and some inputs with dropdown menu's. From the snippet i have provided you can see that the dropdown doesn't show on top (over the other accordion) and just shows within the accordion.
Does anyone know a way around this?
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseExample">
Accordion Dropdown Example
</a>
</div>
<div id="collapseExample" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Input with dropdown example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group">
<input name="inputwithdropdown" type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
<a class="dropdown-item" href="#">Menu4</a>
<a class="dropdown-item" href="#">Menu5</a>
<a class="dropdown-item" href="#">Menu6</a>
<a class="dropdown-item" href="#">Menu7</a>
<a class="dropdown-item" href="#">Menu8</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseAnother">
Another Accordion Dropdown
</a>
</div>
<div id="collapseAnother" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">
This is just another dropdown accrodion
</div>
</div>
</div>
</div>
Dropdown placement in Bootstrap 4 is done dynamically using popper.js which can be a problem inside other elements like the accordion. You can control the dropdown position using some of the options explained here.
In this case using data-boundary="parent" data-flip="false" and dropdown-menu-right on the the Dropdown seem to work best.
https://www.codeply.com/go/YC9Fj7eMKb
<div class="input-group">
<input name="inputwithdropdown" type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-boundary="parent" data-flip="false" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
<a class="dropdown-item" href="#">Menu4</a>
<a class="dropdown-item" href="#">Menu5</a>
<a class="dropdown-item" href="#">Menu6</a>
<a class="dropdown-item" href="#">Menu7</a>
<a class="dropdown-item" href="#">Menu8</a>
</div>
</div>
</div>
Related:
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Answering for people who might come from Google with the same issue.
I got a reply on the Bootstrap Git from a contributor and it was pointed out to me that it wasn't the accordion causing this. It's the <div class="table-responsive"> wrapper and the overflow-x: auto. Making this visible corrects this but obviously breaks the responsive scroll on the table.
Currently there is no true fix in this situation, where you have a table within an accordion with dropdown menu's.