Hi i am a newbie in vuejs, Buefy. I wanted to add navigation bar. Navigation Bar works in the desktop however when view it in mobile responsive when the burger click doesn't show anything. the navbar item not collapsible. can anyone help me? Thank you.
Here is my code.
<template>
<div id="app">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</template>
<script>
import $ from "jquery";
export default {
name: "App",
mounted() {
$(document).ready(function() {
document.addEventListener("DOMContentLoaded", () => {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
});
});
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Can access here:
https://codesandbox.io/s/stupefied-khayyam-mnb7x
Well, the way you trying to do it is a bit different from the official documentation. In order to create a navbar you should wrap your whole navbar within a <b-navbar> like this:
<b-navbar>
<template slot="brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
</template>
<template slot="start">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
</template>
<template slot="end">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</template>
</b-navbar>
Then fill each slot with appropriate content of yours.
Working DEMO:
Related
I have a problem in VueJS. I coding a website and i want to add a sun icon. I want to change theme when click icon. You knows; if theme is dark do light and the exact opposite. I think emit() is not work. But I am not sure.
This is codes:
Navbar.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
defineEmits(['toggle'])
</script>
<template>
<div>
<nav class="navbar navbar-expand-lg" id="navbar">
<div class="container-fluid">
<a href="/" class="navbar-brand">
<span>osman<span>beyhan</span></span>
</a>
<div class="iconsTwo">
<i class="bi bi-sun-fill d-block d-lg-none" id="icon" #click="this.$emit('toggle')"></i>
<i class="bi bi-list navbar-toggler" data-bs-toggle="offcanvas" href="#offcanvasMenu" aria-controls="offcanvasMenu"></i>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasMenuLabel">
<a href="/">
<span>osman<span>beyhan</span></span>
</a>
</h5>
<i class="bi bi-x-lg btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></i>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item">
<a class="" href="/about">About Me</a>
</li>
<li class="nav-item">
<a class="" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="" href="/contact">Contact</a>
</li>
</ul>
<hr id="line">
<ul class="nav-item d-flex d-md-flex" id="icons">
<li>
<a class="" target="_blank" href="https://www.instagram.com/osmn_byhn/?hl=tr">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a class="" target="_blank" href="https://github.com/osmn-byhn">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a class="" target="_blank" href=" https://wa.me/905350217844">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
<li>
<a class="" target="_blank" href="https://www.linkedin.com/in/osman-beyhan-12304b23a/">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<br>
<li id="ayrac" class="d-none d-lg-block"> | </li>
<li>
<i class="bi bi-sun-fill d-none d-lg-block mysun" id="icon"></i>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</template>
<style lang="scss" scoped>
#import '/public/Navbar.scss';
#import '/public/Theme.scss';
</style>
App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Navbar from './components/Navbar.vue'
import { ref } from 'vue'
var mode = ref('dark')
function toggle() {
if (mode === "dark") {
mode = "light"
console.log(mode)
} else {
mode = "dark"
console.log(mode)
}
}
</script>
<template>
<div class="app" :class="mode">
<Navbar :mode="mode" #toggle="toggle" />
<RouterView />
</div>
</template>
<style scoped lang="scss">
#import '../public/App.scss';
#import '../public/Theme.scss';
</style>
When i click sun icon; function is works but theme don't change:
enter image description here
Please help me!
In the script setup syntax, you shouldn't use $this when emitting something, instead you should handle it like this:
<script setup>
// more logic ...
const emit = defineEmits(["toggle"]);
</script>
<template>
<div>
<button #click="emit('toggle', someData)">toggle theme</button>
</div>
</template>
Then in the parent component:
<script setup>
const handleData = (param) => {
console.log("data passed was ", param);
}
</script>
<template>
<MyComponent #toggle="handleData()">
...
</MyComponent>
</template>
But also, you could just add the dark class to the body, and while it's outside the vue app instance, you could just handle the logic directly in the Navbar component and adding the class in vanilla javascript:
<!-- Navbar component, without emit -->
<script setup>
const toggle = () => {
if(document.body.classList.contains("dark")){
document.body.classList.remove("dark");
}else{
document.body.classList.add("dark");
}
}
</script>
I have a nav-bar that works fine. Except for the fact that it does not close when an item is clicked.
It does close when I click anywhere else in the window.
I work in laravel 8 and vue-3, have bootstrap-5 installed.
The navbar:
<template>
<div class="container-fluid navbar-custom-header">
<a class="close-navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#mySideBar" aria-controls="mySideBar" aria-expanded="false" aria-label="Toggle navigation">
</a>
<nav class='navbar-custom navbar-dark fixed-top' >
<div class="row " style="vertical-align:center">
<div class="col-2">
<button class="openbtn dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#mySideBar">☰</button>
</div>
<div class="col-3">
Cards
</div>
<div class="col-3" v-if="!loggedIn">
<router-link to="/login"> Login </router-link>
</div>
<div class="col-3" v-if="loggedIn">
<router-link to="/logout"> Logout </router-link>
</div>
</div>
</nav>
</div>
<div class="navbar-custom-container" style="z-index:10">
<nav id="mySideBar" class="collapse navbar-custom navbar-collapse">
<div class="navbar-custom-items">
<ul class="nav navbar-nav">
<br>
<br>
<li class="nav-item"><router-link to="/memory" class="nav-link"> MemoryGame </router-link></li>
<br>
<li><router-link to="/cards" > Manage Cards </router-link></li>
<br>
<li><router-link to="/aanmelden"> Nieuwe Speler aanmelden </router-link></li>
<br>
<li><router-link to="/game"> Game spelen </router-link></li>
<br>
<li><router-link to="/game/admin"> GameAdmin </router-link></li>
</ul>
</div>
</nav>
</div>
</template>
<script>
export default {
computed: {
loggedIn() {
return this.$store.getters.loggedIn
}
}
}
</script>
and the accompanying css:
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
.close-navbar-toggler{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
cursor:pointer;
}
.close-navbar-toggler.collapsed{
z-index:-1;
}
.navbar-custom-header {
background-color: rgb(5, 4, 71);
color:rgb(245, 209, 8);
margin:auto;
}
.navbar-custom-container {
display:flex;
justify-content:flex-start;
position:absolute;
//padding:0px 12px;
}
.navbar-header {
background-color: rgb(5, 4, 71);
}
.navbar-custom {
background-color: rgb(17, 15, 172);
color:yellow;
padding:12px -12px;
}
.navbar-toggler-icon {
vertical-align:middle;
text-align:left;
}
.navbar-custom-items > a:link {
color:black;
}
.navbar-custom-items > a:active {
color:rgb(73, 7, 7);
}
.navbar-custom-items > a:hover {
color:rgb(138, 59, 241);
}
I realize that I do not fully understand how Bootstrap catches the collapse-command.
Can anyone explain?
In vue3you would have a component that represents the nav menu as a template. Then, the component would look like this (using bootstrap-vue-3 components such as b-collapse, but you can use div tags as well):
<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button"
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
#click="visible = !visible"
aria-controls="navbarSupportedContent"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<b-collapse class="collapse navbar-collapse" id="navbarSupportedContent" v-model="visible">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'home'}" #click="visible = !visible">
home
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'page1'}" #click="visible = !visible">
page1
</router-link>
</li>
</ul>
</b-collapse>
</div>
</nav>
</template>
<script setup>
import {ref} from 'vue'
const visible = ref(false)
</script>
In the template example you can see that clicking on the navbar-toggler or on the links, the visible attribute of the components gets toggled. And the navbarSupportedContentelement is visible, depending on the value of visible (v-model="visible"). If you do not use bootstrap-vue-3, then you would use v-show="visible" inside your div to toggle it.
I am really new in Vue and I am getting this error in my code which is quite basic navbar
<template>
<nav
class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block"
id="templatemo_nav_top"
>
<div class="container text-light">
<div class="w-100 d-flex justify-content-between">
<div v-for="info in contactInfos">
<i :class="{info.icon}"></i>
<a class="navbar-sm-brand text-light text-decoration-none" href="#">{{info.contact}}</a>
</div>
<div>
<a class="text-light" href="#" target="_blank" rel="sponsored"
><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i
></a>
<a class="text-light" href="#" target="_blank"
><i class="fab fa-instagram fa-sm fa-fw me-2"></i
></a>
<a class="text-light" href="#" target="_blank"
><i class="fab fa-twitter fa-sm fa-fw me-2"></i
></a>
<a class="text-light" href="#" target="_blank"
><i class="fab fa-linkedin fa-sm fa-fw"></i
></a>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
contactInfos: [
{ icon: 'fa fa-envelope mx-2', contact: 'info#company.com'},
{ icon: 'fa fa-phone mx-2', contact: '000-000-0000'},
]
};
},
};
</script>
So I dont know what I am doing wrong, I basically want to show contact info inside the div.
Thanks...
I am trying to add a bootstrap navbar to my Vue js app but am running into some problems. I would really appreciate any help you may offer. Thanks!
I copied the navbar code from bootstrap into my App.vue file but for some reason it doesn't appear on the whole screen.
The navbar appears like this:
enter image description here
And when I inspect it it shows like this:
enter image description here
This is my main.js code:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// import $ from "jquery";
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import "popper.js";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
This is my App.vue code:
<template>
<div id="app">
<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="#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">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<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"
>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<router-view />
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
OK, I figured out the problem.
Once I pasted the css Bootstrap link in the head of the index.html, the layout appeared properly:
I also had to paste the jquery and popper cdn links into the head to make the dropdown menu in the navbar work.
I've been trying to fix the issue with the navbar dropdown menu when using viewport smaller than 768px (mobile/touchscreen).
When tested on touchscreen, one click is supposed to open the dropdown (this works fine), the second click is supposed to close it (closing of the dropdown works, but on touchscreen it still shows the dropdown menu on the side like it is ul.dropdown-menu:hover ).
I am trying to have it hidden after the dropdown toggle is clicked to close, and the cursor is still hovers on the toggle (touchscreen).
Here is the code:
ul.dropdown-menu {
background-color: #4474a8;
}
ul.dropdown-menu li a {
background-color: #4474a8
}
ul.dropdown-menu li a:hover {
background-color: #4474a8;
color: #111111!important;
}
.dropdown:hover .dropdown-menu {
display: block;
}
a.dropdown-toggle:focus {
color: #2f1b09;
}
.dropdown-link {
text-align: center;
background-color: #4474a8;
color: #FFFFFF !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<img src="#" class="img-responsive center-block" id="logo-top">
</div>
<div class="col-md-1"></div>
</div>
</div>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-anchor"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="active-nav">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">MENU 1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-ship" aria-hidden="true"></i> SUBMENU 1</li>
<li> SUBMENU 2</li>
<li> SUBMENU 3<b>$</b></li>
<li> SUBMENU 4</li>
</ul>
</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li>MENU 4</li>
<li class="dropdown">
<i class="fa fa-camera" aria-hidden="true"></i> MENU 5<span class="caret"></span>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Video</li>
<li><i class="fa fa-youtube" aria-hidden="true"></i>YouTube</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- # #banner-->
<div class="container-fluid" id="banner">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol1L">
</div>
<!-- / #bannerCol1L -->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol2R">
<a class="orange pillboxLarge" id="getstarted">BUTTON</a>
</div>
</div>
<!-- / .row -->
</div>
<!-- / .container-fluid #banner -->
</body>
In your CSS, delete the following:
.dropdown:hover .dropdown-menu {
display: block;
}