mdb-side-nav not working properly

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

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.

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!

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