Closed

Quick help on Vue component

Job Description:

I have a simple vue application that consists of a few components including a sidebar, topbar and content (iframe).

The sidebar opens and closes using a toggle button, which dynamically changes the elements class:

const is_expanded = ref([login to view URL]("is_expanded") === "true")

const ToggleMenu = () => {

[login to view URL] = ![login to view URL]

// @ts-ignore

[login to view URL]("is_expanded", [login to view URL])

}

......

<template>

<aside :class="`${is_expanded ? 'is-expanded' : ''}`">

<div class="logo">

<img :src="logoURL" alt="Vue" />

</div>

<div class="menu-toggle-wrap">

<button class="menu-toggle" @click="ToggleMenu">

<span class="material-icons">keyboard_double_arrow_right</span>

</button>

</div>

.........

In the middle of the screen I have an iframe/content component which currently has a fixed margin-left so that it starts where the expanded sidebar ends, however I would like it to be dynamic and re-size when the sidebar is closed.

Is there a way I can us the is_expanded variable from the sidebar component to also dynamically update the iframe class in the same way that it does to the sidebar class?

My project uses Vue, Vite and SCSS

Skills: Vue.js, LESS/Sass/SCSS

About the Client:
( 17 reviews ) Tyldesley, Manchester, United Kingdom

Project ID: #33211528

9 freelancers are bidding on average $21 for this job

tljafar

Hi!, You should write css code 'is-expanded' .If 'is-expanded' is in the class, it should be show aside, otherwise hidden. do you want to do in CSS or VUE? Looking for your reply... CHECK THE WORK FIRST AND THEN PAY More

$30 USD in 1 day
(3 Reviews)
4.5
MdSahidullahusa

I am read all with carefully, so i want to work with you. also can i start now and complete 100% perfect so you can give me a chance, because i am 5 years of experience on it Note: Just give me a chance for your best More

$20 USD in 3 days
(0 Reviews)
0.0
klishchnazar057

Hi How are you? As a senior web developer I have strong experience and deep knowledge with Vue.js So I can complete you task perfectly in few hours. please hire me Best regards.

$20 USD in 7 days
(0 Reviews)
0.0
engrsakibcse

Hi there. I can help you fix the iframe expanding in vue.js. I have developed websites using vue.js. I can start right now. *I have done this type of work before locally. I can show you an example on chat. Waiting to More

$20 USD in 1 day
(0 Reviews)
0.0
AjjlalAhmed

Hey, You are looking for a quick Vue Js fix and I strongly feel that I can easily complete this task for you. I have all the skills required to complete the job. Will you please give me a chance to work on your projec More

$20 USD in 3 days
(0 Reviews)
0.0
huyenluu921

Hi This can be done in a short period of time. Control the css with is_expanded variable. I am a Javascript, Html expert with 9+ experiences. I have rich experiences to build frontend with JS frameworks such as React More

$20 USD in 1 day
(1 Review)
1.0
joaoser555

Hi! in Vue the only dynamic values ​​are declared inside data. Using constants and localStorage will not allow the property to be reactive. I've been a vue developer for over three years and this is a simple problem to More

$20 USD in 1 day
(0 Reviews)
0.0
nikolaknezevic31

Greatings! As a result of looking your requirement in detail, I am sure that it can be solved by Vue.js. I have been working here on this field for the last 9 years and I have successfully completed so many projects of More

$20 USD in 1 day
(0 Reviews)
0.0
nemanjamarkovic4

Hi, I can help you in that fields. I am majoring in full stack and I can do it well. I think you can use now is_expanded anywhere value because it is saved in localStorage globally. In vuejs, in fact it is better to s More

$20 USD in 7 days
(0 Reviews)
0.0