Vue Sidenav 2 - Bootstrap 4 & Material Design

          <script>
            import {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbSideNav2,
              mdbBtn,
              mdbIcon,
              mdbResize
            } from "mdbvue";

            export default {
              name: "DoubleNavigationPagev1",
              components: {
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbSideNav2,
                mdbBtn,
                mdbIcon
              },
              data() {
                return {
                  show: false,
                  over: false,
                  navigation: [
                    {
                      name: "Double navigation",
                      icon: "bars",
                      children: [
                        {
                          name: "Version 1",
                          to: "/navigation/pro/double-navigation-v1"
                        },
                        {
                          name: "Version 2",
                          to: "/navigation/pro/double-navigation-v2"
                        },
                        {
                          name: "Version 3",
                          to: "/navigation/pro/double-navigation-v3"
                        },
                        {
                          name: "Version 4",
                          to: "/navigation/pro/double-navigation-v4"
                        },
                        {
                          name: "Version 5",
                          to: "/navigation/pro/double-navigation-v5"
                        },
                        {
                          name: "Version 6",
                          to: "/navigation/pro/double-navigation-v6"
                        }
                      ]
                    },
                    {
                      name: "Getting started",
                      icon: "mdb",
                      fab: true,
                      children: [
                        {
                          name: "Quick start",
                          href:
                            "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
                        },
                        {
                          name: "Technical Support",
                          href: "https://mdbootstrap.com/support/"
                        }
                      ]
                    },
                    {
                      name: "Documentation",
                      icon: "graduation-cap",
                      href: "https://mdbootstrap.com/docs/b4/vue/"
                    }
                  ]
                };
              },
              methods: {
                checkWidth() {
                  this.over = window.innerWidth < 900;
                }
              },
              directives: {
                mdbResize
              }
            };
          </script>
        

        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (52).webp")
              no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          .navbar i {
            cursor: pointer;
            color: white;
          }
          </style>
        

          <script>
            import {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbSideNav2,
              mdbAvatar,
              mdbBtn,
              mdbIcon
            } from "mdbvue";

            export default {
              name: "DoubleNavigationPagev1",
              components: {
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbSideNav2,
                mdbAvatar,
                mdbBtn,
                mdbIcon
              },
              data() {
                return {
                  show: true,
                  collapsed: false,
                  navigation: [
                    {
                      name: "Double navigation",
                      icon: "bars",
                      children: [
                        {
                          name: "Version 1",
                          to: "/navigation/pro/double-navigation-v1"
                        },
                        {
                          name: "Version 2",
                          to: "/navigation/pro/double-navigation-v2"
                        },
                        {
                          name: "Version 3",
                          to: "/navigation/pro/double-navigation-v3"
                        },
                        {
                          name: "Version 4",
                          to: "/navigation/pro/double-navigation-v4"
                        },
                        {
                          name: "Version 5",
                          to: "/navigation/pro/double-navigation-v5"
                        },
                        {
                          name: "Version 6",
                          to: "/navigation/pro/double-navigation-v6"
                        }
                      ]
                    },
                    {
                      name: "Getting started",
                      icon: "mdb",
                      fab: true,
                      children: [
                        {
                          name: "Quick start",
                          href:
                            "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
                        },
                        {
                          name: "Technical Support",
                          href: "https://mdbootstrap.com/support/"
                        }
                      ]
                    },
                    {
                      name: "Documentation",
                      icon: "graduation-cap",
                      href: "https://mdbootstrap.com/docs/b4/vue/"
                    }
                  ]
                };
              }
            };
          </script>
        

          <style scoped>
            .view {
              background: url("https://mdbootstrap.com/img/Photos/Others/img (55).webp")
                no-repeat center center;
              background-size: cover;
              height: 100%;
            }

            .navbar i {
              cursor: pointer;
              color: white;
            }
          </style>
        

              <script>
                import { mdbSideNav2 } from 'mdbvue';

                export default {
                  components: { mdbSideNav2 },
                  data() {
                    return {
                      width: null
                    }
                  },
                  mounted() {
                    this.width = this.$refs.layout.getBoundingClientRect().width;
                  },
                  methods: {
                    setOffset(value) {
                      if (!this.width) return;
                     this.$refs.layout.style.width = this.width + value + 'px';
                     this.$refs.layout.style.paddingLeft = value + 'px';
                    }
                  }
                }
              </script>
            

          <script>
            import {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbSideNav2,
              mdbBtn,
              mdbIcon
            } from "mdbvue";

            export default {
              components: {
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbSideNav2,
                mdbBtn,
                mdbIcon
              },
              data() {
                return {
                  show: false,
                  navigation: [
                    {
                      name: "Double navigation",
                      icon: "bars",
                      children: [
                        {
                          name: "Version 1",
                          to: "/navigation/pro/double-navigation-v1"
                        },
                        {
                          name: "Version 2",
                          to: "/navigation/pro/double-navigation-v2"
                        },
                        {
                          name: "Version 3",
                          to: "/navigation/pro/double-navigation-v3"
                        },
                        {
                          name: "Version 4",
                          to: "/navigation/pro/double-navigation-v4"
                        },
                        {
                          name: "Version 5",
                          to: "/navigation/pro/double-navigation-v5"
                        },
                        {
                          name: "Version 6",
                          to: "/navigation/pro/double-navigation-v6"
                        }
                      ]
                    },
                    {
                      name: "Getting started",
                      icon: "mdb",
                      fab: true,
                      children: [
                        {
                          name: "Quick start",
                          href:
                            "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
                        },
                        {
                          name: "Technical Support",
                          href: "https://mdbootstrap.com/support/"
                        }
                      ]
                    },
                    {
                      name: "Documentation",
                      icon: "graduation-cap",
                      href: "https://mdbootstrap.com/docs/b4/vue/"
                    }
                  ]
                };
              }
            };
          </script>
        

          <style scoped>
            .view {
              background: url("https://mdbootstrap.com/img/Photos/Others/img (52).webp")
                no-repeat center center;
              background-size: cover;
              height: 100%;
            }
            .navbar i {
              cursor: pointer;
              color: white;
            }
          </style>
        

          <script>
            import { mdbSideNav2 } from "mdbvue";

            export default {
              components: {
                mdbSideNav2
              },
              data() {
                return {
                  show: false,
                  navigation: [
                    {
                      name: "Home",
                      to: "/",
                      icon: "home"
                    },
                    {
                      name: "CSS",
                      to: "/css",
                      icon: "css3",
                      fab: true
                    },
                    {
                      name: "Components",
                      to: "/components",
                      icon: "cubes"
                    },
                    {
                      name: "Advanced",
                      to: "/advanced",
                      icon: "code"
                    },
                    {
                      name: "Navigation",
                      icon: "bars",
                      children: [
                        {
                          name: "Footer",
                          to: "/navigation/pro/footer"
                        },
                        {
                          name: "Hamburger Menu",
                          to: "/navigation/pro/hamburger"
                        },
                        {
                          name: "Mega Menu",
                          to: "/navigation/pro/megamenu"
                        },
                        {
                          name: "Navbar",
                          to: "/navigation/pro/navbar"
                        },
                        {
                          name: "Sidenav",
                          to: "/navigation/pro/sidenav2"
                        }
                      ]
                    },
                    {
                      name: "Forms",
                      to: "/forms",
                      icon: "edit"
                    },
                    {
                      name: "Tables",
                      to: "/tables",
                      icon: "table"
                    },
                    {
                      name: "Modals",
                      to: "/modals",
                      icon: "window-restore"
                    },
                    {
                      name: "Plugins",
                      to: "/plugins",
                      icon: "plus-square"
                    },
                    {
                      name: "Sections",
                      to: "/sections",
                      icon: "th-large"
                    },
                    {
                      name: "Mixins",
                      to: "/mixins",
                      icon: "user-cog"
                    },
                    {
                      name: "Directives",
                      to: "/directives",
                      icon: "asterisk"
                    }
                  ]
                };
              }
            };
          </script>
        

          <script>
            import { mdbSideNav2, mdbIcon, mdbAvatar } from "mdbvue";

            export default {
              components: {
                mdbIcon,
                mdbAvatar,
                mdbSideNav2
              },
              data() {
                return {
                  show: false,
                  slimCollapsed: true,
                  navigation: [
                    {
                      name: "Home",
                      to: "/",
                      icon: "home"
                    },
                    {
                      name: "CSS",
                      to: "/css",
                      icon: "css3",
                      fab: true
                    },
                    {
                      name: "Components",
                      to: "/components",
                      icon: "cubes"
                    },
                    {
                      name: "Advanced",
                      to: "/advanced",
                      icon: "code"
                    },
                    {
                      name: "Navigation",
                      icon: "bars",
                      children: [
                        {
                          name: "Footer",
                          to: "/navigation/pro/footer"
                        },
                        {
                          name: "Hamburger Menu",
                          to: "/navigation/pro/hamburger"
                        },
                        {
                          name: "Mega Menu",
                          to: "/navigation/pro/megamenu"
                        },
                        {
                          name: "Navbar",
                          to: "/navigation/pro/navbar"
                        },
                        {
                          name: "Sidenav",
                          to: "/navigation/pro/sidenav2"
                        }
                      ]
                    },
                    {
                      name: "Forms",
                      to: "/forms",
                      icon: "edit"
                    },
                    {
                      name: "Tables",
                      to: "/tables",
                      icon: "table"
                    },
                    {
                      name: "Modals",
                      to: "/modals",
                      icon: "window-restore"
                    },
                    {
                      name: "Plugins",
                      to: "/plugins",
                      icon: "plus-square"
                    },
                    {
                      name: "Sections",
                      to: "/sections",
                      icon: "th-large"
                    },
                    {
                      name: "Mixins",
                      to: "/mixins",
                      icon: "user-cog"
                    },
                    {
                      name: "Directives",
                      to: "/directives",
                      icon: "asterisk"
                    }
                  ]
                };
              }
            };
          </script>
        

          <script>
            import { mdbSideNav2, mdbAvatar } from "mdbvue";

            export default {
              components: {
                mdbAvatar,
                mdbSideNav2
              },
              data() {
                return {
                  show: false,
                  groupsContent: [
                    {
                      data: [
                        {
                          name: "Inbox",
                          to: "/",
                          icon: "envelope"
                        },
                        {
                          name: "Outbox",
                          to: "/",
                          icon: "paper-plane"
                        },
                        {
                          name: "Favorites",
                          to: "/",
                          icon: "heart"
                        },
                        {
                          name: "Starred",
                          icon: "star"
                        }
                      ]
                    },
                    {
                      data: [
                        {
                          name: "Recent",
                          to: "/",
                          icon: "clock"
                        },
                        {
                          name: "Uploads",
                          to: "/",
                          icon: "upload"
                        },
                        {
                          name: "Backups",
                          to: "/",
                          icon: "cloud-upload-alt"
                        },
                        {
                          name: "Trash",
                          icon: "trash"
                        }
                      ]
                    },
                    {
                      name: "Settings",
                      data: [
                        {
                          name: "Account",
                          to: "/",
                          icon: "user"
                        },
                        {
                          name: "Privacy",
                          to: "/",
                          icon: "lock"
                        }
                      ]
                    },
                    {
                      data: [
                        {
                          name: "Log out",
                          to: "/"
                        }
                      ]
                    }
                  ]
                };
              }
            };
          </script>
        

          <script>
            import { mdbSideNav2 } from "mdbvue";

            export default {
              components: {
                mdbSideNav2
              },
              data() {
                return {
                  show: false,
                  navigation: [
                    {
                      name: "Home",
                      to: "/",
                      icon: "home"
                    },
                    {
                      name: "CSS",
                      to: "/css",
                      icon: "css3",
                      fab: true
                    },
                    {
                      name: "Components",
                      to: "/components",
                      icon: "cubes"
                    },
                    {
                      name: "Advanced",
                      to: "/advanced",
                      icon: "code"
                    },
                    {
                      name: "Navigation",
                      icon: "bars",
                      children: [
                        {
                          name: "Footer",
                          to: "/navigation/pro/footer"
                        },
                        {
                          name: "Hamburger Menu",
                          to: "/navigation/pro/hamburger"
                        },
                        {
                          name: "Mega Menu",
                          to: "/navigation/pro/megamenu"
                        },
                        {
                          name: "Navbar",
                          to: "/navigation/pro/navbar"
                        },
                        {
                          name: "Sidenav",
                          to: "/navigation/pro/sidenav2"
                        }
                      ]
                    },
                    {
                      name: "Forms",
                      to: "/forms",
                      icon: "edit"
                    },
                    {
                      name: "Tables",
                      to: "/tables",
                      icon: "table"
                    },
                    {
                      name: "Modals",
                      to: "/modals",
                      icon: "window-restore"
                    },
                    {
                      name: "Plugins",
                      to: "/plugins",
                      icon: "plus-square"
                    },
                    {
                      name: "Sections",
                      to: "/sections",
                      icon: "th-large"
                    },
                    {
                      name: "Mixins",
                      to: "/mixins",
                      icon: "user-cog"
                    },
                    {
                      name: "Directives",
                      to: "/directives",
                      icon: "asterisk"
                    }
                  ]
                };
              }
            };
          </script>
        

          <script>
            import { mdbSideNav2, mdbBtn, mdbTooltip } from "mdbvue";

            export default {
              components: {
                mdbBtn,
                mdbTooltip,
                mdbSideNav2
              },
              data() {
                return {
                  show: false,
                  active: 0,
                  custom: [
                    {
                      icon: "share-alt",
                      text: "Share"
                    },
                    {
                      icon: "heart",
                      text: "Favourites"
                    },
                    {
                      icon: "address-book",
                      text: "Contacts"
                    },
                    {
                      icon: "envelope",
                      text: "Send a message"
                    },
                    {
                      icon: "sliders-h",
                      text: "Settings"
                    }
                  ]
                };
              }
            };
          </script>
        

          <style scoped>
            .custom-content {
              width: 100%;
            }

            .custom-content li {
              width: 100%;
            }

            .custom-content li button {
              transition: all 0.3s ease-in;
              width: 100%;
            }

            .custom-content li button:hover {
              background-color: rgba(255, 255, 255, 0.05);
            }

            .custom-content li button:focus {
              outline: none !important;
              background-color: rgba(255, 255, 255, 0.05);
            }
            .custom-content .active {
              background-color: rgba(255, 255, 255, 0.1);
            }
          </style>
        

          <script>
            import axios from "axios";
            import { mdbSideNav2, mdbIcon } from "mdbvue";

            export default {
              components: {
                mdbIcon,
                mdbSideNav2
              },
              data() {
                return {
                  show: false,
                  content: [
                    {
                      name: "Online",
                      children: [],
                      icon: 'circle'
                    },
                    {
                      name: "Offline",
                      children: [],
                      icon: 'circle',
                      far: true
                    }
                  ],
                  selected: null,
                  status: ''
                };
              },
              mounted() {
                axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
                  const [ online, offline ] = this.content;
                  response.data.forEach(user => {
                    const isActive = Math.random() < 0.5;

                    const group = isActive ? online : offline;

                    group.children.push({
                      name: user.name
                    })
                  });
                });
              },
              methods: {
                selectItem(category, item) {
                  if (!item) {
                    this.status = this.content[category].name;
                  }
                  else {
                    this.selected = this.content[category].children[item].name;
                  }
                }
              }
            };
          </script>
        

          <style scoped>
            .sidenav-content {
              padding: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              border-radius: 5px;
            }
          </style>