Issue: Missing Burger Button MenuDescription: The hamburger icon menu is

I am new to Vue and NuxtJS and am currently working on creating a menu bar that spans across the top of the screen. However, I want it to disappear and be replaced by a "burger" button when the tab is small and the menu does not fit across the screen.

While I have been able to achieve this so far, my main issue now is that when I click the "burger" button, the menu items do not show up. How can I resolve this?

<template>
  <div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline">
              <a
                href="/product"
                class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Product
              </a>
              <a
                href="/linkone"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Title One
              </a>
              <a
                href="/linktwo"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Title Two
              </a>
              <a
                href="/about"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >About
              </a>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <!-- Mobile menu button -->
          <button
            type="button"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
            id="main-menu"
            aria-label="Main menu"
            aria-haspopup="true"
          >
            <svg
              class="block h-6 w-6"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
            
            <svg
              class="hidden h-6 w-6"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    
    <div class="hidden md:hidden">
      <div class="px-2 pt-2 pb-3 sm:px-3">
        <a
          href="#"
          class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700"
          >Product</a
        >
        <a
          href="#"
          class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
          >Title One</a
        >
        <a
          href="#"
          class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
          >Title Two</a
        >
        <a
          href="#"
          class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
          >About</a
        >
      </div>
    </div>
  </div>
</template>
javascriptvue.jsnuxt.js

Answer №1

To achieve this functionality, you can utilize a state variable within your data and dynamically bind classes to elements.

// Vue component
data() {
   return {
     openMenu: false
   }
}

<!-- Vue template -->
<button @click="openMenu = !openMenu">Toggle Menu</button>
<div 
  class="menu-container"
  :class="{ hidden: !openMenu }"
>
  ...
</div>

The 'hidden' class will be applied when the condition in the object value is true.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Formik inside Material-UI's table components

My goal is to design a material UI table where each cell acts as a Formik input. However, I've encountered errors with Material UI when attempting to use a Formik Object within TableBody or TableItem tags. Here's an example image of what I' ...

javascriptreactjsfrontendmaterial-uiformik

Instructions on adding the modified data to the list in AngularJS without relying on a database

Currently, I am working on an app development project using Ionic and AngularJS. The main feature of the app is to display a list of car brands along with their respective models in the first UI view. Once a user selects a car brand from the list, they a ...

javascriptangularjsionic-framework

creating an audio streaming application using child processes in nodejs

How can I effectively send a stream to a child process for streaming audio from a client to a server? I have successfully obtained the audio stream from a client. const ss = require('socket.io-stream'); const socketIo = require('socket.io& ...

javascriptnode.js

What is the best way to utilize the item-class in v-data-table in order to adjust the font size for better readability?

As I navigate my way through learning VueJs, I recently tried to adjust the font size of my v-data-table items to 20px (using Vuetify 2). While experimenting with this, I discovered the use of item-class. It worked well for changing colors, as evidenced in ...

vue.jsvuetify.js

performing an action using vuex in a component's method

I am facing an issue where I am trying to dispatch an action and retrieve the values passed into an input field. When I directly dispatch an action on a button, everything works perfectly fine: <button type="button" @click="store.dispatc ...

javascriptvue.jsvuex

JSON - Select2 Data Structure

Looking for guidance on manipulating JSON values. {"items":[ {"id":1,"parent_id":0,"name":"Root Catalog"}, {"id":2,"parent_id":1,"name":"Category1"}, ...

javascriptjqueryjsonjquery-select2

Utilizing JavaScript to add classes to a parent element

When a user clicks on a link, I want to add a class to the <li> tag that wraps around it. Here is an example: <ul> <li><a href="#">Just an Example</a></li> </ul> How can I target the <li> element enclosing ...

javascriptjqueryhtml

React Native Issue: Missing propType for native property RCTView.maxHeight

Upon upgrading to RN 0.30, I encountered the error message below even when trying to build the most basic app: react-native init AwesomeProject react-native run-ios What's peculiar is that the warnings include components BlurView, VibrancyView, an ...

javascriptiosreactjsnpmreact-native

Sorting data on-the-fly using an HTML Select drop-down menu

Looking for a way to dynamically sort data from a JavaScript object based on the user's selected option. If the user chooses ID, the data should be sorted by ID, and the same goes for Name. I've created a function and attached an onchange method ...

javascriptjqueryhtml

What is the process for converting text into tags?

<text style={{ letterSpacing: '30', wordBreak: 'keep-all', }} > {value.content} ...

javascripthtmlreactjs

Ways to display additional text with a "Read More" link after three lines of content without relying on a

I am currently working on an application where I need to display text in a limited space of 3 lines. If the text exceeds this limit, I want to show either "Read More" or "Hide". Below is the code snippet that I am using for this functionality. class Cust ...

javascriptreactjsreact-native

Synchronization issue between VueJS, Firebase Auth, and Route Guards leading to race conditions

Running into an issue while integrating Firebase Auth with my Vue app. After a page refresh, a logged in user is not recognized as such and gets redirected to the login page when trying to access a protected route. This occurs because the initial callback ...

firebasevue.jsvuejs2

The React Functional Component undergoes exponential re-renders when there is a change in the array

I'm encountering a problem with one of my functional components. Essentially, it maintains an array of messages in the state; when a new message is received from the server, the state should update by adding that new message to the array. The issue ar ...

javascriptarraysreactjstypescript

Issues with AngularJS checkbox filters functionality not performing as expected

I am tasked with implementing a filter feature using checkboxes for certain properties. Here is the code I have written: JavaScript code: app.controller("filterCtrl", function ($scope, $http) { $http({ method: 'GET', url: contextPath + ...

javascriptangularjs

Present and Modify state variables in a personalized fashion

I am working on a React form that contains multiple fields for user input. As the user enters values into the form fields, the data is stored in the component's state. I am now faced with the challenge of displaying the state data in a specific format ...

javascriptjsonreactjsstate

Ways to keep my information current in relation to JSON updates

I have successfully created a web application that retrieves data (JSON) from the ebay API and displays it on a chart illustrating the price of each item. The current setup is working well. However, I am eager to implement real-time updates on the chart w ...

javascriptjsonajaxebay-apijqbargraph

Can using Gulp 4 to import or bundle Bootstrap 5 or Popper.js create a LICENSE.js file?

I am currently working on a project using Gulp 4 and Webpack 5 with Bootstrap 5. During the script bundling process, I have noticed that Gulp generates a bundle.js file as expected, but it also creates a bundle.js.LICENSE.js file. After examining my build ...

javascripttwitter-bootstrapgulp

"Using ng-click to access values from other elements in AngularJS

Can someone help me retrieve the value of an input field when a button is clicked? Here is my controller code: app.controller('MainCtrl', function($scope) { $scope.test = function(val) { alert(val); } }); This is my HTML snippet: < ...

javascriptangularjs

The function in JavaScript designed to load images before they are displayed is not functioning properly

Inside a custom object constructor, there is a method known as addToViewport(), which serves the purpose of displaying an image after it has been preloaded: window.onload = function(){ function ViewportObject(){ this.src = "ht ...

javascriptjqueryjavascript-objects

What is the best way to transfer an object between views in Django?

Background/Issue In my web application, I have a job that involves running a python script to log into LinkedIn. This script launches headless chromium, navigates to the LinkedIn login page, and logs in with the proper credentials. However, sometimes Link ...

javascriptpythondjangoajaxselenium-chromedriver