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>
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 am developing A laravel Livewire chat. I am able to create new chats but the does not push up the previous message. Instead, it remains invisible behind the chat box. When a pusher message comes in, the chat message div remains at its original position.
Here is my mobile.blade.php
<div class="chatArea changeW" wire:poll>
<div class="chatMessages">
#foreach($messagesByDay as $day=>$messages)
<p class="timeId">
#if($day == date('Y-m-d'))
Today
#else
{{$day}}
#endif
</p>
#foreach($messages as $message)
#if($message->from_id != auth()->user()->id)
{{-- youra --}}
<div class="message">
<div class="prof">
<p><img src="{{$user->avatar()}}" style="width:30px"></p>
</div>
<div class="messArea">
<div class="textM">{{$message->body}}</div>
<p id="sname">{{$user->name}}</p>
</div>
</div>
{{-- yuors --}}
#else
{{-- mine --}}
<div class="message mMess 1122334" data-number="1122334">
<div class="messArea">
<div class="textM">{{$message->body}}</div>
</div>
<div class="prof">
<p><img src="{{auth()->user()->avatar()}}" style="width:30px"></p>
</div>
</div>
#endif
#endforeach
#endforeach
<!--End of Chat cont-->
</div>
#livewire('chat.messages.mobile.create',['user'=>$user])
</div>
This is the code at create.blade.php
<div class="messageBox">
<div wire:loading>
sending...
</div>
<div class="textA"><textarea id="message" wire:model.lazy="body" rows="1" cols="30"
placeholder="Type your message here"></textarea></div>
<button wire:click.prevent="save({{$user}})" id="send" class="button-s1" tooltip="Send" flow="left"><span class="material-icons headerIcon"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send"
viewBox="0 0 16 16">
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
</svg></span></button>
</div>
My Code at Messages.blade.php
<div class="chat-conversation p-3 p-lg-4" data-simplebar="init">
<ul class="list-unstyled mb-0" wire:poll>
#foreach($messagesByDay as $day=>$messages)
<li>
<div class="chat-day-title">
<span class="title">
#if($day == date('Y-m-d'))
Today
#else
{{$day}}
#endif
</span>
</div>
</li>
#foreach($messages as $message)
#if($message->from_id == auth()->user()->id)
<li class="right">
<div class="conversation-list">
<div class="chat-avatar">
<img src="{{$message->from->avatar()}}" alt="">
</div>
<div class="user-chat-content">
<div class="ctext-wrap">
<div class="ctext-wrap-content">
<p class="mb-0">
{{$message->body}}
</p>
<p class="chat-time mb-0">
<i class="ri-time-line align-middle"></i>
<span class="align-middle">{{date('H:i A',strtotime($message->created_at))}}</span>
</p>
</div>
<div class="dropdown align-self-start">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy
<i class="ri-file-copy-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Save
<i class="ri-save-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Forward
<i class="ri-chat-forward-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Delete
<i class="ri-delete-bin-line float-end text-muted"></i>
</a>
</div>
</div>
</div>
<div class="conversation-name">{{$message->from->name}}</div>
</div>
</div>
</li>
#else
<li>
<div class="conversation-list">
<div class="chat-avatar">
<img src="{{$user->avatar()}}" alt="">
</div>
<div class="user-chat-content">
<div class="ctext-wrap">
<div class="ctext-wrap-content">
<p class="mb-0">
{{$message->body}}
</p>
<p class="chat-time mb-0">
<i class="ri-time-line align-middle"></i>
<span class="align-middle">{{date('H:i A',strtotime($message->created_at))}}</span>
</p>
</div>
<div class="dropdown align-self-start">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy
<i class="ri-file-copy-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Save
<i class="ri-save-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Forward
<i class="ri-chat-forward-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Delete
<i class="ri-delete-bin-line float-end text-muted"></i>
</a>
</div>
</div>
</div>
<div class="conversation-name">{{$user->name}}</div>
</div>
</div>
</li>
#endif
#endforeach
#endforeach
</ul>
</div>
First of all I'm new in Vue. I'm trying to use Isotope in Vue component in Laravel.
The code is working fine in HTML. Here are the working codes
main.js
if ($('.grid').length) {
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
_project.blade.php
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
View All <i class="fas fa-angle-right fa-sm"></i>
</div>
</div>
</div>
<div class="row grid">
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item trending">
<div class="maan-project-item">
<div class="project-img">
<a href="{{ route('product','the-slug') }}"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title">Sala - Startup & SaaS WordPress</h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item html">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item code">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item ui">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item wordpress">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Above codes are working.
Now I'm trying to do this with VueJS.
First, I've install isotope from their official site with npm
npm install isotope-layout
Then I've create this vue component file
project.vue
<template>
<!-- Project Area -->
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" class="is-checked" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
View All <i class="fas fa-angle-right fa-sm"></i>
</div>
</div>
</div>
<div class="project-grid">
<div class="project-grid-item mix trending" v-for="project in projects">
<div class="maan-project-item">
<div class="project-img">
<img src="assets/front/images/project/project.png" alt="Image">
<span class="project-category">{{ project.category.name }}</span>
</div>
<div class="maan-content">
<h3 class="maan-title">{{ project.name }}</h3>
<div class="author">
<img src="assets/front/images/author/author.png" alt="">
<div>by <span class="font-medium">Maan Theme</span> in {{ project.category.name }}</div>
</div>
<div class="project-price">
<div class="sales">Sales : <span>{{ project.total_sale }}</span></div>
<div class="price">Price : <span>${{ project.regular_price }}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Project Area -->
</template>
<script>
import Isotope from "isotope-layout"
export default {
components: {
Isotope,
},
data: function(){
return {
projects : [],
}
},
mounted() {
this.loadProjects();
this.filterProjects();
},
methods: {
loadProjects : function(){ //this function is working, projects are loading from database
axios.get('api/projects')
.then((response)=>{
this.projects = response.data.projects
})
.catch(function(error){
console.log(error)
});
},
filterProjects : function(){
const $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
}
}
</script>
I've an error in console
Uncaught TypeError: $(...).isotope is not a function
I don't know my question is well structured or not. Ask my if you need any additional information.
I'm trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )
When i using #include in master page blade template for add header and sidebar page,this action makes clear login data.
i've tried.without using include in master page below code printing login data
{{Auth::User()->first_name . ' ' . Auth::User()->family}}
but after add include,with one refresh page all login data is cleared!
master page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap-theme.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style-responsive.css')}}">
<script src="{{URL::asset('asset/js/jquery.min.js')}}"></script>
#yield('css')
</head>
<body>
{{--Header Start--}}
#include('layouts.header')
{{--End Header--}}
{{--Sidebar Start--}}
#include('layouts.sidebar')
{{--End Sidebar--}}
{{--Content Start--}}
#yield('content')
{{--End Content--}}
<script type="text/javascript" src="{{URL::asset('asset/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.nicescroll.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/common-scripts.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.dcjqaccordion.2.7.js')}}"></script>
#yield('js')
</body>
</html>
UPDATE:
call view:
Route::get('/', function () {
return view('index');
});
and this is my header page:
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="sidebar-toggle-box">
<div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-reorder tooltips"></div>
</div>
<!--logo start-->
PTA<span>OIMS</span>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification start -->
<ul class="nav top-menu">
<!-- settings start -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-tasks"></i>
<span class="badge bg-success">6</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<div class="notify-arrow notify-arrow-green"></div>
<li>
<p class="green">You have 6 pending tasks</p>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Database Update</div>
<div class="percent">60%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Iphone Development</div>
<div class="percent">87%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
<span class="sr-only">87% Complete</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Mobile App</div>
<div class="percent">33%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
<span class="sr-only">33% Complete (danger)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">45%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</a>
</li>
<li class="external">
See All Tasks
</li>
</ul>
</li>
<!-- settings end -->
<!-- inbox dropdown start-->
<li id="header_inbox_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-important">5</span>
</a>
<ul class="dropdown-menu extended inbox">
<div class="notify-arrow notify-arrow-red"></div>
<li>
<p class="red">You have 5 new messages</p>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini.jpg"></span>
<span class="subject">
<span class="from">Jonathan Smith</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is an example msg.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini2.jpg"></span>
<span class="subject">
<span class="from">Jhon Doe</span>
<span class="time">10 mins</span>
</span>
<span class="message">
Hi, Jhon Doe Bhai how are you ?
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini3.jpg"></span>
<span class="subject">
<span class="from">Jason Stathum</span>
<span class="time">3 hrs</span>
</span>
<span class="message">
This is awesome dashboard.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini4.jpg"></span>
<span class="subject">
<span class="from">Jondi Rose</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is metrolab
</span>
</a>
</li>
<li>
See all messages
</li>
</ul>
</li>
<!-- inbox dropdown end -->
<!-- notification dropdown start-->
<li id="header_notification_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-bell-o"></i>
<span class="badge bg-warning">7</span>
</a>
<ul class="dropdown-menu extended notification">
<div class="notify-arrow notify-arrow-yellow"></div>
<li>
<p class="yellow">You have 7 new notifications</p>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Server #3 overloaded.
<span class="small italic">34 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-warning"><i class="fa fa-bell"></i></span>
Server #10 not respoding.
<span class="small italic">1 Hours</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Database overloaded 24%.
<span class="small italic">4 hrs</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-success"><i class="fa fa-plus"></i></span>
New user registered.
<span class="small italic">Just now</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-info"><i class="fa fa-bank"></i></span>
Application error.
<span class="small italic">10 mins</span>
</a>
</li>
<li>
See all notifications
</li>
</ul>
</li>
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<div class="top-nav ">
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input class="form-control search fa fa-bell-o" placeholder="Search" type="text">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">
#if(Auth::check())
{{
Auth::User()->first_name . ' ' .
Auth::User()->family
}}</span>
#endif
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<div class="log-arrow-up"></div>
<li><i class=" fa fa-suitcase"></i>Profile</li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-bell-o"></i> Notification</li>
<li><i class="fa fa-key"></i>Logout</li>
</ul>
</li>
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
</header>
<!--header end-->
I solved this problem
in header and sidebar blade, i used this:
<li><i class="fa fa-key"></i>Logout</li>
</ul>
and changed with this code in below:
<li><i class="fa fa-key"></i>Logout</li>
and create route:
Route::get('logout', 'Auth\LoginController#logout');