Topic: mdb-side-nav not working properly

digitalmanagerguru free asked 3 years ago


*Expected behavior*I was expecting something like in this jquery solution: https://mdbootstrap.com/snippets/jquery/marta-szymanska/261312

Where the overlay appears when the sidenav is opened. But the overlay is appearing depending the resolution size, and that doesnt make any sense at all.

*Actual behavior*I am using slim version and I am opening and minimizing and the overlay doesnt shows up.If I resize the window for a lower resolution or mobile the overlay appears. When the overlay appears if I click outside it doesnt remove the overlay and do not minimize the sidenav.

*Resources (screenshots, code snippets etc.)*I'm using for testing the code from here: https://mdbootstrap.com/docs/vue/navigation/sidenav/

The Slim side-nav one.

Here is a snippet where you can see the overlay doesnt work: https://mdbootstrap.com/snippets/vue/digitalmanagerguru/1187089

And when adding content on the right side:https://mdbootstrap.com/snippets/vue/digitalmanagerguru/1187105

Still doesnt close overlay. Would be great to solve this asap.

Thank you.


Mikołaj Smoleński staff answered 3 years ago


Hi there again,

I've send you the full code of the working example from the demo application: https://mdbootstrap.com/previews/templates/vue/#/navigation/pro/sidenav

There are two slim sidenavs, which as I can read work as You expect or am I wrong?

Please copy the code from our docs and try to use it in your appliaction. It would be much easier then looking for the issue inside your code.

The path of the documentation page: mdbvue\src\docs\pro\Navigation\SideNavPage.vue

If the example is now what you're looking for I'll try to fix your snippet.

Best regards


digitalmanagerguru free answered 3 years ago


Hi again, I guess I was able to understand the concept you guys decided to use in this component.So, basically in Desktop resolution, the sidenav should always appear and should be hidden in lower resolution as tablet/mobiles. And the overlay should only appear on lower resolutions. And for mobile if we still want this sidenav we're oblgied to have an extra button as the hamburger to toggle the visibility of the sidenav. Is that your concept, what is expected?

I've rewrite my code and this is what I got so far: https://mdbootstrap.com/snippets/vue/digitalmanagerguru/1187105

But there is still one problem left, when I click the hamburger, it doesnt run the toggleSideNav function. Is there an event for when we click outside to close the overlay? because I wanted to run another code on that action, and I wanted to avoid using extra js for that.

Because I want the content to be always visible and not cropped by the sidenav. (at least for tablets) for mobile I am fine with the crop.

PS: I guess I'll use the breakWidth and move on. That way it will always be visible to all resolution wider then 768 and below that, there is no problem to be above the content.

Btw the API docs says: <mdb-side-nav breakWidth="770" ... /> should be <mdb-side-nav breakWidth=770 ... />

Extra question: Is there a way to use other types of fontawesome icons on "slimIcon"? (I would like to use duotone)

Cheers!


digitalmanagerguru free answered 3 years ago


What I am reporting is the slim mode. It doesnt work when using slim. The Docs only shows the normal mode with an hamburger icon. So it is not the same thing at all...

Please check the slim mode. Thank you.

EDIT: I've found out that the culprit is this code on the example here https://mdbootstrap.com/docs/vue/navigation/sidenav/:

:OpenedFromOutside="true"

If I put instead :OpenedFromOutside.sync="toggle" and use that toogle to swtich with an hamburger icon it works fine. But what I wanted is to not have an hamburger icon to toogle it, I want the sidebar always visible, but it would be slim closed or opened. Thats it. As the example on the link above.


Mikołaj Smoleński staff answered 3 years ago


Hi there,

The working example (same as in the snippet code) is available here: https://mdbootstrap.com/previews/templates/vue/#/navigation/pro/sidenav

And here's the code of the left slim sideNav from that docs page:

  <div class="light-blue-skin">
    <mdb-side-nav slim :isCollapsed="collapseC" name="Anna Deynah" :OpenedFromOutside.sync="toggleC" logo="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" logoRound sideNavClass="sn-bg-1" mask="strong" hidden>
        <mdb-side-nav-nav>
          <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
            <mdb-side-nav-item href="#" slimIcon="address-book">Submit listing</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="address-card">Registration form</mdb-side-nav-item>
          </mdb-side-nav-cat>
          <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
            <mdb-side-nav-item href="#" slimIcon="blog">For bloggers</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="pen">For authors</mdb-side-nav-item>
          </mdb-side-nav-cat>
          <mdb-side-nav-cat name="About" icon="eye">
            <mdb-side-nav-item href="#" slimIcon="handshake">Introduction</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="tasks">Monthly meetings</mdb-side-nav-item>
          </mdb-side-nav-cat>
          <mdb-side-nav-cat name="Contact me" far icon="envelope">
            <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="paper-plane" >Write a message</mdb-side-nav-item>
          </mdb-side-nav-cat>
          <mdb-side-nav-item icon="angle-double-left" open-icon="angle-double-right" @toggle="toggleSlimC" toggler :isCollapsed="collapseC" fixed>Minimize</mdb-side-nav-item>
        </mdb-side-nav-nav>
    </mdb-side-nav>
  </div>

<script>
  import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbContainer, mdbRow, mdbIcon, waves } from 'mdbvue';

  export default {
    name: 'SideNavPage',
    components: {
      mdbSideNav,
      mdbSideNavNav,
      mdbSideNavCat,
      mdbSideNavItem,
      mdbContainer,
      mdbRow,
      mdbIcon
    },
    data(){
      return {
        toggleA: false,
        toggleB: false,
        toggleC: false,
        toggleD: false,
        collapseC: false,
        collapseD: false
      };
    },
    methods: {
      toggleSideNav(sn) {
        this[`toggle${sn}`]=!this[`toggle${sn}`];
      },
      toggleSlimC() {
        this.collapseC = !this.collapseC;
      },
      toggleSlimD() {
        this.collapseD = !this.collapseD;
      }
    },
    mixins: [waves]
  };
</script>

I think the problem could be with the body tag which should be the wrapper for all elements on the page, which is missing in the snippet.

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: Yes