Laravel Setting active class to navigation - css

I want to set active class to my active routes, i have tried below approach but it is not working
The navside.blade.php page
<ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion">
<li class="no-padding {{ Request::is('/manager/dashboard') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/dashboard')!!}">
<i class="material-icons">settings_input_svideo</i>Dashboard
</a>
</li>
<li class="no-padding {{ Request::is('/manager/orders') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/orders')!!}">
<i class="material-icons">shopping_cart</i>Orders
</a>
</li>
<li class="no-padding {{ Request::is('/manager/outlets') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/outlets')!!}">
<i class="material-icons dp48">store</i>Outlets
</a>
</li>
<li class="no-padding {{ Request::is('/manager/reports') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/reports')!!}">
<i class="material-icons dp48">receipt</i>Reports
</a>
</li>
<li class="no-padding {{ Request::is('/manager/manage') ? 'active' : '' }}">
<a class="waves-effect waves-grey" href="{!! URL::asset('/manager/manage')!!}">
<i class="material-icons dp48">input</i>Manage
</a>
</li>
</ul>
And my routes are
Route::group(['prefix' => 'manager', 'middleware' => ['auth','roles'], 'roles' => 'manager'], function() {
Route::get('/dashboard', 'ManagerController#index')->name('dashboard');
Route::get('/orders', 'OrdersController#index')->name('orders');
Route::get('/orders/{order_id}', 'OrdersController#show')->name('orderDetails');
Route::post('/assign_orders', 'OrdersController#assignDeliveryBoy')->name('assignOrder');
Route::get('/outlets', 'OutletsController#index')->name('outlets');
Route::get('/reports', 'ReportsController#index')->name('reports');
});
I did tried some different approaches like
1 {{ Request::segment(1) === 'programs' ? 'active' : null }}
2 class="#if(Request::url()== url('/home') active #endif"
but they din't work ether
thank you

You can try:
(Route::current()->getName() == 'routename') ? 'active' : null
You also can make it a helper function instead of copy pasting the full if statement.

Related

symfony turbo-stream doesn't load in turbo-frame

I set up a project for test purpose, it works. But in another project, the above code doesn't work. The content of the turbo-stream appears in raw html and replaces the whole site.
//_parts/_dashboard_user_ranking.stream.html.twig
<turbo-stream action="update" target="the_frame_id" >
<template>
{{ include ("_parts/_dashboard_user_ranking.html.twig") }}
</template>
</turbo-stream>
//index.html.twig
{% block body %}
{{ parent()}}
<main class="container row overflow-auto">
<div class="col-md-10 mx-auto">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="{{ path('app_dashboard_rankings',{period:'5jours'}) }}">5 jours</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'3mois'}) }}">3 mois</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an'}) }}">1 an</a>
</li>
{% for group in groups %}
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an', groupID:group.id}) }}">{{ group.groupName }}</a>
</li>
{% endfor %}
</ul>
<turbo-frame id="the_frame_id"></turbo-frame>
</div>
</main>
{{ include ("footer.html.twig") }}
{% endblock %}
And finally the controller :
// classements seuls
#[Route('/classements-{period}-{groupID}', name: 'app_dashboard_rankings')]
public function classements(
Request $request,
FollowPointsRepository $followPointsRepository,
string $period = '5jours',
int $groupID = 0
): Response
{
// ...
// ...
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
return $this->render('_parts/_dashboard_user_ranking.stream.html.twig',[
'isUserInTop'=>$isUserInTop,
'classement'=>$classement
]);
}
As for the config, it is the same as in the test purpose project.

Bootstrap NAVBAR item t on the left of dropdown list

this is my code:
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
App
App
<nav >
{% if user.is_authenticated %}
<a class="nav-link" href="#">Link 1</a>
<ul class="navbar-nav">
<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">
{{ user.username }}</a>
<div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'listingfournisseur' %}">Update fournisseur list</a>
<a class="dropdown-item" href="{% url 'updatepayables' %}">Eletronic Payment</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'listingclient' %}">Update Clients list</a>
<a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a>
</div>
</li>
</ul>
{% else %}
<a class="p-2 text-dark" href="{% url 'account_login' %}">Log In</a>
<a class="btn btn-outline-primary" href="{% url 'account_signup' %}">Sign Up</a>
{% endif %}
</nav>
</div>
I m tring to have link1 item just on the left of dropdown.
I don t understand why it is up to dropdown ?
this is what I see:
thanks for help
In you nav add the CSS property display: flex and you will have it one next to the other. But after you will just have to play with the size because an tag don't have "padding" but tag have top, left and bottom "padding".
<nav class="b">
<div>ets</div>
<div><ul>test</ul></div>
</nav>
<style>
.b{
display:flex;
}
</style>

Bootstrap 4 dropdown opens in navbar and increases the navbar height

I am developing a laravel app. I need two navbars, number Two below number One, one containing logo and logout link, another containing all the links.
I have achieved the look but the dropdown of the logout link is opening in navbar One resulting in increase in the height of the navbar each time the dropdown is toggled.
Images -
Here is my code -
<div id="header-main">
<nav class="navbar navbar-light bg-light" id="header">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('images/accounts.png') }}" height="50px">
</a>
#auth
<div class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
</div>
#endauth
</div>
</nav>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item #if(Route::current()->getName() == 'login') active #endif">
<a class="nav-link" href="{{ route('login') }}"><i class="fas fa-sign-in-alt"></i> {{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item #if(Route::current()->getName() == 'register') active #endif">
<a class="nav-link" href="{{ route('register') }}"><i class="fas fa-user-plus"></i> {{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item #if(Route::current()->getName() == 'home') active #endif">
<a class="nav-link" href="{{ route('home') }}"><i class="fas fa-home"></i> {{ __('Home') }}</a>
</li>
#endguest
</ul>
</div>
</div>
</nav>
Somebody help me.
Use position-absolute on the dropdown menu...
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
username<span class="caret"></span>
</a>
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" >Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> #csrf </form>
</div>
</li>
https://codeply.com/p/fHoKygnLv7

Twig recursive menu applied only to the second level

I have the following recursive macro which works fine but not the way i want it.
I want to display my menu like in this codepen, hover over services.
How can i get the same structure of the generated html ?
{% extends '::base.html.twig' %}
{% import _self as forms %}
{% macro recursive(item) %}
{% import _self as forms %}
<li class="nav-item">
{% if item.__children|length %}
{% if item.treeLevel == 0 %}
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ item.name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{% for item in item.__children %}
{{ forms.mega(item) }}
{% endfor %}
</div>
{% endif %}
{% endif %}
{% if item.__children is empty %}
<a class="nav-link" href="#">{{ item.name }}</a>
{% endif %}
</li>
{% endmacro %}
{% macro mega(item) %}
{% import _self as forms %}
<ul class="">
{% if item.__children|length %}
{% for item in item.__children %}
{{ forms.mega(item) }}
{% endfor %}
{% endif %}
<li>
<a class="dropdown-item" href="#">{{ item.name }}</a>
</li>
</ul>
{% endmacro %}
{% block body %}
{{ dump(tree) }}
{% if tree %}
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
{% for item in tree %}
{{ forms.recursive(item) }}
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endblock %}
EDIT:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Homepage</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Idea
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<ul class="">
<li>
<a class="dropdown-item" href="#">Company</a>
</li>
</ul>
<ul class="">
<ul class="">
<li>
<a class="dropdown-item" href="#">asdasd</a>
</li>
</ul>
<li>
<a class="dropdown-item" href="#">Services</a>
</li>
</ul>
<ul class="">
<li>
<a class="dropdown-item" href="#">Google</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>

Bootstrap Grid for Django website

I'm looking for improve my Django website and especially the CSS part. I don't have knowledge about CSS because I'm beginning to learn this library.
I'm using Bootstrap 3 and I would like to get your opinions about columns using and the cutting of my Django website.
It's the first time I'm using .col-md-x and I don't know if it's true? My website application will be use with a large screen but also tablet or smartphone.
I have two examples :
Global website page
Variant
Can I write my script in order to get this kind of things? Is it correct to write CSS/Bootstrap3 like this?
Thank you
EDIT :
My script for base template looks like this :
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{% load static %}
{% load user_tags %}
<title> DatasystemsEC - Page non trouvée </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Not_Found.css"/>
</head>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
</div>
<!-- Home tab -->
<ul class="nav navbar-nav">
<li> <span class="glyphicon glyphicon-home"></span> Accueil </li>
{% if user.is_authenticated %}
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-info-sign">
</span> Informations Mairie
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Créer/Editer les informations de la Mairie </li>
<li> <span class="glyphicon glyphicon-home"></span> Consulter les informations de la Mairie </li>
</ul>
</li>
<!-- Resume Tab with acts -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file">
</span> Actes Etat Civil <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span> Fiches Individuelles
</a>
<ul class="dropdown-menu">
<li>Accueil Fiches Individuelles</li>
<li>Création Fiches Individuelles</li>
<li>Consultation Fiches Individuelles</li>
{% if request.user|has_group:"admin" %}
<li>Edition Fiches Individuelles</li>
<li>Suppression Fiches Individuelles</li>
{% endif %}
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Naissance</li>
<li>Création Actes de Naissance</li>
<li>Consultation Actes de Naissance</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-eye-open"></span> Actes de Reconnaissance / Adoption </a>
<ul class="dropdown-menu">
<li>Accueil Actes de Reconnaissance</li>
<li>Création Actes de Reconnaissance</li>
<li>Consultation Actes de Reconnaissance</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-heart"></span> Actes de Mariage</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Mariage</li>
<li>Création Actes de Mariage</li>
<li>Consultation Actes de Mariage</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-flash"></span> Actes de Divorce</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Divorce</li>
<li>Création Actes de Divorce</li>
<li>Consultation Actes de Divorce</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-fire"></span> Actes de Décès</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Décès</li>
<li>Création Actes de Décès</li>
<li>Consultation Actes de Décès</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-book">
</span> Tables Annuelles & Décennales <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-file">
</span> Edition Tables annuelles
</a>
<ul class="dropdown-menu">
<li>Naissances</li>
<li>Reconnaissances</li>
<li>Mariages</li>
<li>Décès</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-book"></span> Edition Tables décennales</a>
<ul class="dropdown-menu">
<li>Naissances</li>
<li>Reconnaissances</li>
<li>Mariages</li>
<li>Décès</li>
</ul>
</li>
</ul>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-list-alt">
</span> Recensement
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li> <span class="glyphicon glyphicon-th-list"></span> Liste Recensement </li>
<li> <span class="glyphicon glyphicon-file"></span> Edition de l'Attestation de Recensement </li>
</ul>
</li>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li></span> Déconnexion </li>
<li><a>{{user.username}} </a></li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Connexion </align></li>
{% endif %}
{% if request.user|has_group:"admin" %}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/admin.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"visiteur"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/visiteur.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"employé"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/employé.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"officier"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/officier.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"maire"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/maire.png' %}{{ user.get_profile.avatar }}">
{% endif %}
</ul>
</ul>
</div>
</div>
</div>
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="logo">
<img src="{% static 'images/logo.png' %}" class="img-responsive center-block" alt="Logo">
</div>
</div>
<div class="col-md-10">
<div class="title">
{% block title %}
{% endblock %}
</div>
</div>
</div>
</div>
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar1">
<div class="left-navigation">
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-home"></span> Accueil</strong></h5>
<li> Accueil</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> Informations Mairie</strong></h5>
{% if request.user|has_group:"admin" %}
<li>Créer/Editer les informations</li>
{% endif %}
<li>Consulter les informations</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Actes Etat Civil</strong></h5>
<li>Fiches Identités</li>
<li>Actes de Naissance</li>
<li>Actes de Reconnaissance / Adoption</li>
<li>Actes de Mariage</li>
<li>Actes de Divorce</li>
<li>Actes de Décès</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Tables Annuelles & Décennales</strong></h5>
<li>Tables Annuelles</li>
<li>Tables Décennales</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span>Recensement</strong></h5>
<li>Liste de Recensement</li>
<li>Attestation de Recensement</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> DatasystemsDOC</strong></h5>
<li>Individus</li>
<li>Tables</li>
<li>Recensement</li>
</ul>
{% if request.user|has_group:"admin" %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Configuration</strong></h5>
<li>Thème</li>
</ul>
{% endif %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Aide & Support</strong></h5>
<li>Besoin d'aide ?</li>
<li>Mentions légales</li>
</ul>
</div>
</div>
<body>
<div class="col-md-10">
{% block content %}
{% endblock content %}
</div>
</body>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<footer>
<p class="text-muted footer"> © DatasystemsEC 2017 - Tous droits réservés <br /> Version Démo</p>
</footer>
</div>
</div>
</div>
{% endif %}
</html>
I added some classes row and .col-md-x. I want to structure my script correctly with Bootstrap grid but I never made this before.
I have a few suggestions for you--
no.1
you are saying that your website will be viewed in all screen sizes so you have to make it responsive.
In order to make a site responsive in bootstrap you need to use all the responsive grid classes---col-sm-* col-xs-* col-md-* col-lg-*. Your design will not look proper in xs and sm devices.
no.2
You don't need to use col-md-* in the nav as it automatically takes full width.
no.3
in the variant portion You are using a blank .col-md-1 that's not how you achieve blank spacing in bootstrap rather use offset classes. Use .col-md-1 col-md-offset-1 it will create a blank column.
no.4
Your design won't look good in extra small devices. Try to introduce more rows for xs devices in order to stack your contents in the middle portion(although this is subjective as I don't know what contents you are going to have..just a general idea from my side.)

Resources