I am new to MVC and bootstrap and have a problem with the navbar. When I am on the home page the navbar works like it is suppose to, but when I change to a new page which uses the ActiveUser controller. The controller in the link changes from the Homecontroller to the ActiveUser controller which is not what suppose to happen. The dropdown menu part is just a test to see if it does the same and it does.
NavBar code
<nav class="navbar navbar-expand-md">
<div class="container">
#Html.ActionLink("TADS", "About", "Home", new { #class = "navbar-brand" })
<div class="navbar-nav mr-auto">
<ul class="navbar-nav nav">
<li class="nav-item">
#Html.ActionLink("Home", "Index", "Home", new { #class = "nav-link" })
</li>
<li class="nav-item">
#Html.ActionLink("About", "About", "Home", new { #class = "nav-link" })
</li>
<li class="nav-item">
#Html.ActionLink("Contact", "Contact", "Home", new { #class = "nav-link" })
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
#Html.ActionLink("Home", "Index", "Home", new { #class = "dropdown-item" })
#Html.ActionLink("About", "About", "Home", new { #class = "dropdown-item" })
#Html.ActionLink("Contact", "Contact", "Home", new { #class = "dropdown-item" })
</div>
</li>
</ul>
</div>
</div>
</nav>
When on the Home Page using the home controller the navbar is converted correctly in the the browser
<div class="navbar-nav mr-auto">
<ul class="navbar-nav nav">
<li class="nav-item">
<a class="nav-link" href="/home/Index?Length=4">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/About?Length=4">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Contact?Length=4">Contact</a>
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
<a class="dropdown-item" href="/home/Index?Length=4">Home</a>
<a class="dropdown-item" href="/Home/About?Length=4">About</a>
<a class="dropdown-item" href="/Home/Contact?Length=4">Contact</a>
</div>
</li>
</ul>
</div>
But when I change to Active user page the navbar is not converted correctly. The homecontroller is replaced with the ActiveUser controller which is not what it should be doing.
<div class="navbar-nav mr-auto">
<ul class="navbar-nav nav">
<li class="nav-item">
<a class="nav-link" href="/ActiveUser/index?Length=4">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ActiveUser/About?Length=4">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/ActiveUser/Contact?Length=4">Contact</a>
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
<a class="dropdown-item" href="/ActiveUser/index?Length=4">Home</a>
<a class="dropdown-item" href="/ActiveUser/About?Length=4">About</a>
<a class="dropdown-item" href="/ActiveUser/Contact?Length=4">Contact</a>
</div>
</li>
</ul>
</div>
Any help will be greatly appreciated.
I finally found the answer to the one part of the question on Stackoverflow at these posts:
What is the purpose of `area = "" ` in an Html.ActionLink?
How to correctly use Html.ActionLink with ASP.NET MVC 4 Areas
Related
using default code for Identity in Blazor I have seen that by using authentication cookies the user isn't set as logged, while the cookie exist in the browser and the link/action to be signed out wasn't callled
What could I possibly need to check what would be causing this behavior?
the only line of code I had used is a js code to call automatically the signout action on post which only exist in the logout view(which is only called in the lougout link, but for example calling the login page shows as if it wasnt logged in(which is checked at the loging partial view
<script>
(() =>
{
document.getElementById('logoutFormLocal').submit();
})();
</script>```
#using Microsoft.AspNetCore.Identity
#inject SignInManager<IdentityUser> SignInManager
#inject UserManager<IdentityUser> UserManager
<ul class="navbar-nav">
#if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">
<a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello #UserManager.GetUserName(User)!</a>
</li>
<li class="nav-item">
<form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Page("/Index", new { area = "" })">
<button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" id="register" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" id="login" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>
I hava a dynamic menu using VueJs and Laravel. It works fine.
But when I display one of them, all options are displayed.
The menu starts in foreach loop to check menu and assigned options.
Is there any way to restrict this?
My code is the next:
File sidebar.blade.php
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li #click="menu=0" class="nav-item">
<a class="nav-link active" href="#"><i class="icon-speedometer"></i> Escritorio</a>
</li>
<li class="nav-title">
Menú de opciones
</li>
<li class="nav-item nav-dropdown">
#foreach($menus as $menu)
<a class="nav-link nav-dropdown-toggle" href="#"><i class="{{ $menu->icono_menu }}"></i>{{ $menu->nombre }}</a>
#foreach($permisos as $permiso)
#if($menu->id==$permiso->idmenu)
<ul class="nav-dropdown-items">
<li #click="menu={{ $permiso->codigo }}" class="nav-item">
<a class="nav-link" href="#"><i class="{{ $permiso->icono_opcion }}"></i> {{ $permiso->nombre }}</a>
</li>
</ul>
#endif
#endforeach
#endforeach
</li>
<li #click="menu=27" class="nav-item">
<a class="nav-link" href="#"><i class="icon-book-open"></i> Ayuda <span class="badge badge-danger">PDF</span></a>
</li>
<li #click="menu=28" class="nav-item">
<a class="nav-link" href="#"><i class="icon-info"></i> Acerca de...<span class="badge badge-info">IT</span></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
I am working with Angular8 and want to use Bootstrap4 navbar.
But Dropdown-Menu not working
Here is Angular.json code
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Here is my navbar.component.html code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Here is my output in Browser
Anything am I missing ?
Change your navbar.component.html to this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown" [class.show]="navbarOpen">
<a class="nav-link dropdown-toggle" (click)="toggleNavbar()">
Dropdown Menu
</a>
<div class="dropdown-menu" [class.show]="navbarOpen" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
And in your navbar.component.ts write above the constructor:
public navbarOpen: boolean = false;
and under your constructor write:
public toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
Please NEVER use jQuery in Angular2+ Projects.
1. You don't need it
2. In my opinion it would be anti-pattern
If you do it like that, it should work. Give me some feedback whether it helped you.
enter image description here and check it
This code works fine
import {
Directive,
ElementRef,
HostBinding,
HostListener,
, Renderer2
} from '#angular/core';
#Directive({
selector: '[appToggleMenu]'
})
export class ToggleMenuDirective {
#HostBinding('class.show') isToggle: boolean = false;
constructor(
private el: ElementRef,
private render: Renderer2
) { }
#HostListener('click') toggleClick() {
this.isToggle = !this.isToggle;
const ui = this.el.nativeElement.querySelector('.dropdown-menu');
if (ui) {
if (this.isToggle) {
this.render.addClass(ui, 'show')
} else {
this.render.removeClass(ui, 'show');
}
}
}
}
html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#">Navbar</a>
<div>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" appToggleMenu>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
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 )
I have the top-bar nav all setup and the dropdowns are displaying as expected. However, when I click on a dropdown link, the dropdown just disappears. The page does not advance to the URI as expected.
I'm stumped...
<section class="top-bar-section second-row">
<ul>
<li class="active"><i class="fa fa-exclamation-triangle"></i><span> Alert Central</span></li>
<li class="has-dropdown">
<i class="fa fa-bar-chart"></i><span> Analytics</span>
<ul class="dropdown">
<li>System Status</li>
<li>My Use</li>
<li>My User's Use</li>
<li>Account Information</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-magic"></i><span> Filter Management</span>
<ul class="dropdown">
<li>Keywords</li>
<li>Categories</li>
<li>Locations</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-users"></i><span> User Management</span>
<ul class="dropdown">
<li>Users</li>
<li>Roles</li>
</ul>
</li>
</ul>
</section>
Did you try to add data-topbar in <section> tag ?
<section data-topbar class="top-bar-section second-row">