Adjusting a JavaScript variable based on media breakpoints using Vue.js

I have a div element below that changes its content based on the value of the variable 'fullSideBar', either true or false. Currently, this value is modified with a button click.

My question is whether it is possible to change the value of 'fullSideBar' when the screen width reaches a certain point. For example: @media screen and (max-width: 768px) { this.fullSideBar = false}.

Here is the code snippet:

<template>
    <div>
    <img 
        src="../../../static/icons/arrow-bar-left.svg" 
        alt="Left arrow icon" 
        class="pe-auto icon-SideBar" 
        @click="fullSideBar = !fullSideBar"
        v-if="!this.fullSideBar"
    >
    <img 
        src="../../../static/icons/arrow-bar-right.svg" 
        alt="Right arrow icon" 
        class="pe-auto icon-SideBar" 
        @click="fullSideBar = !fullSideBar"
        v-else
    >
    </div>
</template>
<script>
import FooterSideBarVue from './FooterSideBar.vue';
export default {
    name: 'BodyScrolling',
    components: {
        FooterSideBarVue
    },
    data (){
        return {
            footerItems: [
                'About'
                , 'Documentation'
                , 'Contact'
            ],
            fullSideBar: false,
        }
    },
}
</script>

Is there a way to achieve this behavior?

javascriptcssvue.jsmedia-queries

Answer №1

If you want to determine in JavaScript whether the window matches a specific media query, you can utilize the window.matchMedia function.

if (window.matchMedia("(max-width: 768px)").matches) {
   this.fullSideBar = false;
}

To respond to changes in window size, you can set up an event listener using 

window.addEventListener("resize", myListener);
:

function updateFullSideBar(evt) {
  // You can check the innerWidth property or also use window.matchMedia here
  this.fullSideBar = evt.view.innerWidth < 768
}

window.addEventListener("resize", updateFullSideBar);

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

Guide on placing a featured image in a div element within genesis theme

I'm encountering a minor issue when trying to work with the genesis framework. My objective is to have each post's featured image inside a div with the same class. I aim to be able to set a background image for the outer div so that when a user h ...

phpcsshtmlwordpressgenesis

Every single checked value in the checkbox variable

Encountered a small hiccup. Let me explain. In my form, there are 8 checkboxes. The goal is to loop through and capture the value of each checked checkbox using a variable. However, I'm always getting the same value from the first checkbox. Here&apo ...

javascriptjquery

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...

javascripthtmlchartsbar-chartcanvasjs

Issues with updating the style in Internet Explorer and Firefox using JavaScript are currently unresolved

I am facing an issue with my program where a name from an auto-complete is sent to a JavaScript function that dynamically creates a label with a button inside. Surprisingly, the DOM methods used to set style properties do not work in Firefox and IE 7, but ...

javascripthtmldynamicinternet-explorer-8styles

How can I center my dynamic CSS3 menu with varying widths?

I am facing an issue with my css menu where the width is set to 400 for non-Admin users and 500 for Admins. The problem arises when I center the menu for Admins by setting the UL width to 500, as it appears off-kilter for non-admin users whose menu is only ...

phphtmlcss

Execute the extension exclusively within iframes

I'm developing a browser extension and I need certain parts of the code to only execute within iframes. Currently, all the code in my extension.js file is executed on both regular web pages and iframes. How can I identify whether the code is running w ...

javascriptiframecross-browserbrowser-extensioncrossrider

"Exploring the dynamic duo of Angular2 and ng2Material

I am currently facing an issue with the styling in my code while using ng2Material with Angular2. First: A demonstration of Material style functioning properly can be seen in this plunker. When you click on the button, you will notice an animation effect. ...

javascripttypescriptangularangular-material

Saving the value of array[i] from a for loop into a fresh array results in undefined

I am currently developing a matching algorithm that compares two arrays of strings. If there is an exact match (===), it stores the results in the unSafeResult array. If there is a match using Regex, it stores the results in the warningResult array. Howeve ...

javascriptarraysangulartypescriptionic2

Sending a message through Discord.JS to a designated channel

Recently diving into Discord.JS, I am struggling to understand how to make my bot send a message to the General Chat when a new user joins. Many examples I've come across suggest using the following code: const channel = client.channels.cache.find(ch ...

javascripttypescriptdiscord.js

Exploring Vue 3: Unpacking examples within the setup function and implementing them within the Setup tag

Although I am new to Vue, I decided to dive straight into TS and the Setup tag because they are considered the newest and most efficient way to write Vue.js components. Currently, I am exploring this framework, with a specific interest in the following ex ...

vue.jsionic-frameworkvue-componentvuejs3

Implementing a Scroll-down Functionality for Drop-down Menu Choices with the Power of CSS and HTML

My select menu has too many options to fit on the page. How can I implement a scrollable menu within the select box when it runs out of space? <form> <ul> <li id="snow_filter"> <label>Enter Resort&l ...

htmlcss

Uncomplicating Media Queries in Styled Components with the Power of React.js and Material-UI

My approach to handling media queries in Styled Components involves three distinct functions. One function handles min-width queries, another deals with max-width, and the third caters to both min-width and max-width scenarios. Let me walk you through eac ...

javascriptreactjsmaterial-designmaterial-uistyled-components

jQuery uploads elements only when the page is initially loaded for the first time

The issue seems to be related to the $(document).ready(function() {}); code block or potential misuse of callbacks. My goal is to execute getTotalMarketCap(), getAllOtherValues(), and getMarketShare() in sequence for an accurate market share calculation. ...

javascriptcallback

Exploring the potential of $scope within $timeout in AngularJS

I am attempting to display a default message on a textarea using AngularJS. Some of the values I want to include require the use of $timeout to retrieve the values. The message does not appear to show up with the following code: <textarea class="t ...

javascriptangularjs

Using Angular: A guide to setting individual values for select dropdowns with form controls

I am working on a project that involves organizing food items into categories. Each item has a corresponding table entry, with a field indicating which category it belongs to. The category is represented by a Guid but displayed in a user-friendly format. C ...

javascriptjqueryangulartypescript

A JavaScript popup displaying selectable options and a callback function

Is there a feature in Javascript that is similar to Java's alert builder? I need a button that, when clicked, will display an alert with various options. When an option is selected, it should trigger a callback function passing the chosen option along ...

javascriptjava

Is it advisable to subscribe to the entire database upon startup in Meteor?

Creating a Meteor app for the internal use of a company, I have designed it to track people and enable managers to assign tasks to various employees. Given the small size of the data being utilized, I anticipate that the database will not grow significantl ...

javascriptmongodbmeteor

serving files using express.static

I have set up express.static to serve multiple static files: app.use("/assets", express.static(process.cwd() + "/build/assets")); Most of the time, it works as expected. However, in certain cases (especially when downloading many files at once), some fil ...

javascriptnode.jsexpresswebserver

Struggling to connect the Calendar data in AngularJS

I am a beginner in angular js and facing an issue with binding the value of the calendar date from the jquery calendar picker. It seems to be accepting the date only, while all other fields are getting bound correctly. Below is my HTML code: <input id ...

javascriptjqueryhtmlangularjsjson

Problem with Selenium WebDriver: Some HTML elements are not being displayed

I am currently working on a python web scraper. Here is the code I have written: from selenium.webdriver.chrome.options import Options from selenium import webdriver from bs4 import BeautifulSoup chrome_options = Options() chrome_options.add_argument(&qu ...

javascriptpythonseleniumselenium-webdriver