Topic: getting the previous width of the mdb-side-nav after collapse
Hi, I am trying to get the of side-nav-bar after pressing the mdb-vue toggle button.
After I am pressing the button of the collapse(toggle), I checking the width and always getting the previous value. Is there a way to get the current one?
Here I am trying to get the width with toggleSideNav:
<mdb-side-nav slim :isCollapsed="collapsed" :name="userName" :OpenedFromOutside="true" id="sideNavContainer"
logo="/static/img/user.54e9ec53.png" logoRound>
<mdb-icon class="position-absolute custom-collapse" icon="arrow-left" v-if="!collapsed"
@click.native="toggleSideNav"></mdb-icon>
<mdb-icon class="position-absolute custom-collapse" icon="arrow-right" v-if="collapsed"
@click.native="toggleSideNav"></mdb-icon>
<mdb-side-nav-nav class="text-capitalize actions">
<mdb-side-nav-item icon="user-circle" to="/my-profile"></mdb-side-nav-item>
<mdb-side-nav-item icon="sign-out-alt" href="javascript:void(0);" @click.native="openLogoutModal">
</mdb-side-nav-item>
</mdb-side-nav-nav>
<mdb-side-nav-nav class="text-uppercase mt-4 products">
<mdb-side-nav-item class="mb-4" icon="spa" to="/cropy">CROPY</mdb-side-nav-item>
<mdb-side-nav-item class="mb-4" icon="chart-line" to="/vincent">VINCENT</mdb-side-nav-item>
<mdb-side-nav-item icon="adjust" href="javascript:void(0);">SOCIAL</mdb-side-nav-item>
</mdb-side-nav-nav>
</mdb-side-nav>
toggleSideNav() {
this.collapsed = !this.collapsed;
// alert width from dom
alert(document.getElementById('sideNavContainer').children[0].offsetWidth);
}
This sidenav has a fixed width depending on its state (3.75 rem if it's collapsed and 15 rem if not). You're not getting a correct value because you're not selecting the sidenav itself but the wrapper with a different width. I suggest basing layout on those two predefined values as you won't be able to add ref or id attribute to the inner elements.
You can create a computed value:
computed: {
width() {
return this.collapsed ? '3.75rem' : '15rem';
}
}
Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.2.0
- Device: pc
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No