Vuetify.js Responsive v-toolbar not triggering open/close event - responsive-design

I'm attempting to create a responsive navigation toolbar (using the v-toolbar component and router-links). I'd like to create a navigationbar that collapses into a responsive vertical list (similar to bootstrap navbar) so that when on mobile a hamburger menu appears and a vertical list can be shown and hidden by clicking on the hamburger icon.
I've created a toolbar (see here) however when I reduce the size of the display to activate the responsive toolbar the burger menu does not expand to show the router-links. Similarly, the router-links do not activate (I suspect that the anchor tag is being overridden by the v-btn).
HTML (Pug)
div#app
nav
v-toolbar
v-toolbar-title
router-link.nav-item(to="/") Mysite
v-spacer
v-toolbar-side-icon.hidden-md-and-up
v-toolbar-items.hidden-sm-and-down
v-btn(flat)
router-link.nav-item(to="/about") About
v-btn(flat)
router-link.nav-item(to="/contact") Contact
Edit
Edited code to implement suggestion from LShapz (updated Codepen here)
nav
v-toolbar.hidden-sm-and-down
v-toolbar-title
router-link.nav-item(to="/") MySite
v-spacer
v-toolbar-items
v-btn(flat)
router-link.nav-item(to="/about") About
v-btn(flat)
router-link.nav-item(to="/contact") Contact
div.hidden-md-and-up
v-expansion-panel
v-expansion-panel-content
div(slot="header")
router-link.nav-item(to="/") MySite
v-card
v-card-text
router-link.nav-item(to="/about") About
v-card
v-card-text
router-link.nav-item(to="/contact") Contact
Can anyone suggest an edit that will allow me to show/hide the responsive menu when clicking the hamburger menu?
Previous codepen
https://codepen.io/atgarbett/pen/wPYMoY
Working codepen
https://codepen.io/atgarbett/pen/QOZoyg

You do not actually have the code for a v-menu with a list of items on there, nor do have an activator on the v-toolbar-side-icon.

As #LShapz has suggested, you can use a combination of v-toolbar and v-expansion-panel. Each of which is shown or hidden depending on the size of the display. This allows for a vertical list style navigation when on smaller displays.
nav
v-toolbar.hidden-sm-and-down
v-toolbar-title
router-link.nav-item(to="/") MySite
v-spacer
v-toolbar-items
v-btn(flat)
router-link.nav-item(to="/about") About
v-btn(flat)
router-link.nav-item(to="/contact") Contact
div.hidden-md-and-up
v-expansion-panel
v-expansion-panel-content
div(slot="header")
router-link.nav-item(to="/") MySite
v-card
v-card-text
router-link.nav-item(to="/about") About
v-card
v-card-text
router-link.nav-item(to="/contact") Contact
See example here: https://codepen.io/atgarbett/pen/QOZoyg

Related

Window phone - How to appear SlideView in specific page?

I'm create slide menu as Facebook,and I'm follow this https://slideview.codeplex.com/ . And I have xaml code as below :
<Application.RootVisual>
<library:SlideApplicationFrame Title="Slide View">
<library:SlideApplicationFrame.LeftContent>
<pages:LeftView />
</library:SlideApplicationFrame.LeftContent>
<library:SlideApplicationFrame.RightContent>
<pages:RightView />
</library:SlideApplicationFrame.RightContent>
</library:SlideApplicationFrame>
My problem is : Slide menu will be apply all page,but I want slide is appear in specific page .
You can implement that by either Control animation while navigating between panes inside a Windows Phone page or Add side menus to an Windows Phone application (similar to the Facebook app)
Write the following lines of code in the constructor of page in which you want to hide slide view.
SlideView.Library.SlideApplicationFrame.SetHideHeader(App.RootFrame, false);
App.RootFrame.IsSlideEnabled =false;
App.RootFrame.ToggleHeaderVisibility(false);

UWP/WinRT: How to move a button when the window is resized into a new position?

My app opens documents in tabs, and at the top of each tab similar to a web browser, I have a row of Buttons in a StackPanel for functions to affect the document. As these Buttons deal with and belong to each document, they are generated dynamically from a binding along with the document.
I'd like to make my app more responsive so that when the window size drops below a certain width, to save space these buttons are moved into a Flyout and restyled as appropriate.
Edge browser does something like this with the Hub, Web Note, and Share buttons.
How can I do this? Is it possible just by using AdaptiveTriggers? Or would this be done through the code behind?
If you want to do this with code behind you can handle
page_SizeChanged
Then check for the bound with
if ((Window.Current.Bounds.Width < YOUR_WIDTH) || (Window.Current.Bounds.Height< YOUR_HEIGHT))
{
// change Visibility or Move items
}
If the behaviour you are looking for on small screens is an off-canvas menu, then here's one way you could do this.
There are plenty of off-canvas extensions, one that would work well for you is mmenu
Play with this to get a feel for how to configure it. It will provide the sliding behaviour you are looking for.
Mmenu will always collapse the menu, so the final step is to modify its behaviour so that it only collapses on narrow viewports, and one way to do this would be to toggle the class name that's wrapping your menu. For example if your menu is
<nav class="my-menu">
....
</nav>
then inside a jQuery document ready statement you could do something like the following
$( window ).resize(function() {
if ($(window).width() >= 900){
$('.my-menu').addClass('my-menu-off').removeClass('my-menu');
} else {
$('.my-menu-off').addClass('my-menu').removeClass('my-menu-off');
}
}).trigger('resize');
When the viewport is 900px or wider this will remove the .my-menu class, and so your menu won't collapse. If the screen is < 900px mmenu will do its magic.
I think approach would be a good because it will be easy to adapt to your existing HTML. You'll just need to add jQuery if it's not already included in your project, and the mmenu js and css files.
Good luck!

xamarin forms: cant stop modal view from cover the entire screen

I am developing an iPad app using xamarins forms.
I would like my settingspage to be modal so it lay over the previous page like a popup.
I have been trying all solutions I could find and most of them seems to recommend me to call this from a button:
await Navigation.PushModalAsync(ModalSettingsPage);
What happens when I use it is that my settingspage comes in from below as a modal page but not as a popup, it covers the entire screen.
This is my current code:
//Setup button (action bar)
ToolbarItems.Add(new ToolbarItem
{
// Text = "Setup",
Icon = "settings1.png",
Order = ToolbarItemOrder.Default,
Command = new Command(() => Navigation.PushModalAsync(new ModalSettingsPage())) //Action to perfome on click , open modal view
});
Also. Does anyone now if there is any good way to positions the ToolbarItems? I have two items and would like each one to be positioned at each side, but by default they are both positioned to the right.
Many thanks!
#ecco,
There is nothing pre-made in Forms to give you a popup like I think you want. Instead, you would have to create this or use a third-party solution. For example, here is a "popup" implementation that might work for you.

How to change name or hide “New” tab in top nav bar in pligg cms? [closed]

I want to rename the "New" tab in top navigation bar in header.tpl but after i rename and save it, nothing changed and an error 404 page appears. please help me I want to hide the New tab in nav bar, which is not working...thanks a lot.
To change the word "New" you should:
Login to your Admin CP.
Expand the Modules menu.
Click Modify Language.
In the Filter Text box type New.
There are quite a few you need to change if you want your new word shown everywhere. These are the values I have changed:
PLIGG_Visual_Search_Status_New
PLIGG_Visual_Pligg_Queued
PLIGG_Visual_RSS_Queued
PLIGG_Visual_Breadcrumb_Unpublished_Tab
PLIGG_Visual_Breadcrumb_Unpublished
PLIGG_Visual_Breadcrumb_Queued
PLIGG_Visual_User_NewsUnPublished
PLIGG_Visual_AdminPanel_New
PLIGG_Visual_AdminPanel_Mark_New
PLIGG_Visual_EditStory_Email_NewText
Or, to hide the New tab you should:
Edit templates\bootstrap\header.tpl.
Find and Remove <li {if $pagename eq "new"}class="active"{/if}>{#PLIGG_Visual_Pligg_Queued#}</li>.

Polymer 1.0 paper-drawer-panel shadow and overlay

How can I make the paper-drawer-panel element behave like this site?
https://home-assistant.io/demo/
I want to be able to open and close the drawer panel even when the page is large. I also don't want there to be a drop shadow over the page when the drawer is out and the page is large, and I want the drawer to expand into the page and not overlay the "main".
I know about "forceNarrow" but it doesn't acheive what i want because it overlays the rest of the page when the drawer is active and it casts a drop shadow over the "main".
I just tested this on one of my sites with a drawer and, when I set forceNarrow to true and back again, I don't get a backdrop or anything, it is just as in the site you linked.
I am sure you know this, but for someone else stumbling on this the code would look something like this:
var drawer = document.getElementById('drawer');
drawer.forceNarrow = true;
drawer.forceNarrow = false;
Could you link to your site, or post some code here?
Edit: Here is an example

Resources