I am creating a page with Angular, using Angular-Material where I must place two sidenav, one on the left where some user data is shown and another on the right with a menu of options, an image of what I have so far:
The part of the white box is where the user data would go and to the right is where I want the options menu to be seen, which is the red box, although I already add the two sidenav the problem is that I cannot see the one on the right and that when pressing the button it expands to the left as in this example:
https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html
Although in this example the options menu handles it from the left, here is the code I'm working on:
home.component.html
<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
<mat-toolbar color="primary" class="mat-elevation-z4">
</mat-toolbar>
</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
<mat-toolbar>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span class="toolbar-spacer"></span>
<label class="label">2719872</label>
<mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container" autosize>
<mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
<mat-nav-list class="dashboard">
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>description</mat-icon>
<p matLine *ngIf="isExpanded">Documentación</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>video_label</mat-icon>
<p matLine *ngIf="isExpanded">Tutoriales</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>contact_support</mat-icon>
<p matLine *ngIf="isExpanded">Contáctenos</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>logout</mat-icon>
<p matLine *ngIf="isExpanded">Salir</p>
</a>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
<div class="main-content">
<p>
Hi
</p>
</div>
<router-outlet></router-outlet>
</mat-sidenav-content>
The structure in not right. You should have one container and then use position attribute to align them.
<mat-sidenav-container class="example-container">
<mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
<mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
Main content
</mat-sidenav-container>
Demo
Related
I'm working on converting an existing mobile menu to AMP but noticed that the functionality without AMP is behaving strangely, (note that this is not a question about amp, in fact the amp for this menu and button is functioning correctly).
So the desired functionality is you click the hamburger, it then switches its class and morphs into a cross and the menu is shown. When the cross is clicked the button morphs back to a hamburger and the menu is hidden.
However what is happening is the first time the hamburger is clicked it shows the menu and changes the hamburger to a cross as expected but then when the cross is clicked the menu is hidden but the button remains a cross, clicking the button again will open the menu but the button is now a hamburger. So in effect the menu is working with each click but the button is changing on every 2 clicks.
The site is using wordpress if that matters. Following is a simplified version of the html rendered during each button click. First after page load:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the first click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="true" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-open" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the second click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the third click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle" data-toggle="offCanvas" aria-expanded="true" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-open" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
After the fourth click:
<a type="button" id="menu-toggle" class="menu-toggle offcanvas__menu__toggle active" data-toggle="offCanvas" aria-expanded="false" aria-controls="offCanvas">
{content removed for brevity}
</a>
<div class="off-canvas position-right is-transition-overlap is-closed" id="offCanvas" style="top:62px" data-off-canvas="ji0gvo-off-canvas" data-transition="overlap" aria-hidden="false">
{content removed for brevity}
</div>
Hopefully from the above you can see the pattern. I have to click the menu button twice to toggle the button animations but the menu itself is showing and hiding with each click.
my $(document).foundation() is like this with no options
So does anybody have any ideas what could be stopping the class in the burger button from switching correctly?
Is there another way I should be doing this?
thanks
In the end the mobile menu was redisgned and the issue stopped.
I am using the bootstrap-vue collapse component.
<!-- https://bootstrap-vue.org/docs/components/collapse -->
<b-button-group>
<b-nav-item
class="mr-2 mr-md-0"
link-classes="py-2 px-3"
:active="true"
v-b-toggle.my-collapse
>
<span class="d-none d-md-block">Filter</span>
<span class="d-md-none">F</span>
</b-nav-item>
</b-button-group>
This is my collapse element:
<b-collapse id="my-collapse" class="col-lg-12">
<b-card class="col-lg-12">
<b-form #submit.prevent="onSubmitFilterCard">
...
</b-form>
</b-card>
</b-collapse>
Inside the collapse I have a form, and when I submit it I also want to close the collapse. How can I execute the toggle from the code instead of clicking on the "b-nav-item"?
semantic ui modal ptint using printjs library. but the result is not
correctly showing the expected modal print.
help ?
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>
<div id="modaldiv" class="ui modal">
<button type="ui button" id="button" onclick="printJS({ printable:
'modaldiv',type: 'html',showModal:true, printContainer:
true,copyTagClasses: true})">
Print
</button> //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#"
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In
</a> // modal open login button
The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.
In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.
https://jsfiddle.net/crabbly/y8e4ga8p/
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
I'm new in Semantic-UI and web development and I can't make the popup menu work. Actually I'm trying to create the popup menu example in this page and the document doesn't tell me to run any javascript etc. I've created a jsfiddle here:
https://jsfiddle.net/jhg9df8t/
The code is:
<div class="ui menu">
<a class="browse item">
Browse
<i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup top left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
You would need to initialize the popup as follows.
$('.example .menu .browse').popup({
inline : true,
hoverable: true,
position : 'bottom left',
delay: {
show: 300,
hide: 800
}
});
This is from Popup documentation (.example class element is not included in the code you copied from semantic ui. So if you dont have that element with example class in your code I would suggest updating initialization without it). Refer to it for more information.
http://semantic-ui.com/modules/popup.html#/examples
Also I think you might need to include JS & CSS associated with popup plugin.
If you read carefully here http://semantic-ui.com/collections/menu.html#popup-menu follow the link to popup and see if theres any additional JS and/or CSS for it.
I hope it helps.