I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
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
The navbar that I'm creating has its brand showing, however the links will not appear. The toggle button appears when shrinking the screen, but still no links appear when I click the button.
import React from "react";
function Navbar()
{
return(
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" >Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="navbarText" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse nabar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Menu<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
Never mind I was missing a "v", insert facepalm.
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 )
First ever question on here so go easy... (can you smell fear through the internet??) Okay, so my dropdown menu works fine in a desktop size viewport but viewing it through developer tools in mobile size it gets clipped and won't extend beyond the bottom of the nav div. What gives, yo? Here's the code, which I understand is the accepted protocol...
<!--start of navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid"><!--stretches navbar full width of screen-->
<div class="navbar-header">
<!--hamburger collapse menu-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span><!--sr-only is for people with vision impairment-->
<span class="icon-bar"></span><!--triple lines on burger menu-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="homelink navbar-brand" href="#">Michael Amos</a>
</div> <!--/nav header-->
<div class="collapse navbar-collapse"> <!--make navbar list collapse when resize for small screen-->
<ul class="nav navbar-nav navbar-right"><!--applies bootstrap styling to float navbar items right-->
<li>about</li>
<li>contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">work<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
</li>
<li>FAQ</li>
</ul>
</div> <!--/nav collapse-->
</div> <!--/container-fluid-->
</nav> <!--/navbar-->
Muchas gracias!
I am sure somebody has aleady posted such a question but I could not find a solution.
I am using Ruby on Rails, Brootstrap and I want to be my dropdown menu(whole) in the middle of the page, but the text (links like We, What we do and etc...) in the dropdown-menu should be left-sided.
How can I do it?
<div class="btn-toolbar">
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
About us
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong> We</strong>
</a>
</li>
<li>
<div class="mcol">
<ul class ="sub">
<div class ="subcolumns menuactivity">
What we do
</li>
Countries
</div>
</ul>
<li>
<a href="del">
<strong>References </strong>
</a>
</li>
</ul>
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
News & Events
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong>Calender</strong>
</a>
</li>
<ul class ="sub">
<div class ="subcolumns menuactivity">
<li>
News archive
</li>
</ul>
</div>
</ul>
</div>
If you're using bootstrap as it is by default you can try below
<a class="pull-left" href="details"> What we do </a>
I have updated with an example.
http://jsfiddle.net/acc8t/
I did this by using below css
.sub{margin-left:0px;}
I have founf as well another solution already.
Just to put in css the following code:
.dropdown-menu {
text-align: left;
}
.btn-toolbar{
text-align: center;
padding-bottom:40px;
}