<template> <div class=\"flyout\"> <navbar src=\"/static/logo.png\" light position=\"top\" name=\"monkeybars\" class=\"navbar-light amber lighten-1\" href=\"#/\" scrolling brandStyle=\"font-weight: bolder;\"> <div class=\"pull-left\"> <fa icon=\"bars\" size=\"2x\" @click.native=\"handleBtnAClick\"/> </div> <navbar-collapse> <navbar-nav right> <navbar-item href=\"#/\" waves-fixed>Home</navbar-item> <navbar-item href=\"#/\" waves-fixed v-show=\"isLoggedIn()\" @click.native=\"handleLogout()\" style=\"font-weight: 400\">Logout</navbar-item> <navbar-item href=\"#/\" waves-fixed v-show=\"!isLoggedIn()\" @click.native=\"handleLogin()\" style=\"font-weight: 400\">Login</navbar-item> <div class=\"label\"> <img src=\"https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg\" class=\"rounded-circle z-depth-1\" width=\"35px\"/> </div> </navbar-nav> </navbar-collapse> </navbar> <side-nav logo=\"https://mdbootstrap.com/img/logo/mdb-transparent.png\" :OpenedFromOutside.sync=\"toggleA\" color=\"blue-grey\" hidden waves> <li> <ul class=\"social\"> <li><a href=\"#\" class=\"icons-sm fb-ic\"><fa icon=\"facebook\" /></a></li> <li><a href=\"#\" class=\"icons-sm pin-ic\"><fa icon=\"pinterest\" /></a></li> <li><a href=\"#\" class=\"icons-sm gplus-ic\"><fa icon=\"google-plus\" /></a></li> <li><a href=\"#\" class=\"icons-sm tw-ic\"><fa icon=\"twitter\" /></a></li> </ul> </li> <li> <ul class=\"collapsible\"> <li> <a class=\"collapsible-header ripple-parent\" @click=\"wave\" @click.prevent=\"active === 1 ? active = 0 : active = 1\"> <fa icon=\"chevron-right\"/> Submit blog<fa icon=\"angle-down\" class=\"rotate-icon\" :class=\"active === 1 ? \'rotated\' : \'\'\"/></a> <transition @before-enter=\"beforeEnter\" @enter=\"enter\" @before-leave=\"beforeLeave\"> <sub-menu tag=\"ul\" v-if=\"active === 1\" class=\"collapse-item\"> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">Submit listing</a> </li> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">Registration form</a> </li> </sub-menu> </transition> </li> <li> <a class=\"collapsible-header ripple-parent\" @click=\"wave\" @click.prevent=\"active === 2 ? active = 0 : active = 2\"> <fa icon=\"hand-pointer-o\"></fa> Instruction<fa icon=\"angle-down\" class=\"rotate-icon\" :class=\"active === 2 ? \'rotated\' : \'\'\"/></a> <transition @before-enter=\"beforeEnter\" @enter=\"enter\" @before-leave=\"beforeLeave\"> <sub-menu tag=\"ul\" v-if=\"active === 2\" class=\"collapse-item\"> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">For bloggers</a> </li> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">For authors</a> </li> </sub-menu> </transition> </li> <li> <a class=\"collapsible-header ripple-parent\" @click=\"wave\" @click.prevent=\"active === 3 ? active = 0 : active = 3\"> <fa icon=\"eye\"></fa> About<fa icon=\"angle-down\" class=\"rotate-icon\" :class=\"active === 3 ? \'rotated\' : \'\'\"/></a> <transition @before-enter=\"beforeEnter\" @enter=\"enter\" @before-leave=\"beforeLeave\"> <sub-menu tag=\"ul\" v-if=\"active === 3\" class=\"collapse-item\"> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">Introduction</a> </li> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">Monthly meetings</a> </li> </sub-menu> </transition> </li> <li> <a class=\"collapsible-header ripple-parent\" @click=\"wave\" @click.prevent=\"active === 4 ? active = 0 : active = 4\"> <fa icon=\"envelope-o\"></fa> Contact me<fa icon=\"angle-down\" class=\"rotate-icon\" :class=\"active === 4 ? \'rotated\' : \'\'\"/></a> <transition @before-enter=\"beforeEnter\" @enter=\"enter\" @before-leave=\"beforeLeave\"> <sub-menu tag=\"ul\" v-if=\"active === 4\" class=\"collapse-item\"> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">FAQ</a> </li> <li><a href=\"#\" class=\"ripple-parent\" @click=\"wave\">Write a message</a> </li> </sub-menu> </transition> </li> </ul> </li> </side-nav> <main :style=\"{marginTop: \'80px\'}\"> <slot></slot> </main> <Ftr color=\"amber lighten-1\"> <p class=\"footer-copyright mb-0 py-3 text-center\"> &copy; {{new Date().getFullYear()}} Copyright: <a href=\"https://www.MDBootstrap.com\"> MDBootstrap.com </a> </p> </Ftr> </div></template>Also, with the Navbar when the window is really narrow, all of the items from the right get hidden, and there appears a cheeseburger that slides out the navbar like so: Is there a way to style the middle cheeseburger so that it matches the one on the right (SideNav trigger)? Can I control it\'s position? I would love the have the SideNav trigger button on the left and NavBar trigger on the right.