[Vuex] Slide menu (vuex store + vue transition)

implements a slide menu that can be collapsed and expanded.

• we use the Vuex plugin to manage the menu's state information.
• we use vue transition to apply a sliding effect to the menu.

In Section 1, we attach the source code.

Section 2 describes the code.

1. source code

project structure
[PROJECT_ROOT]
  +- public
  | +- index.html
  |}
  +- src
  | +- App.vue (E)
  | +- main.js
  | +- components
  | | +- Content.vue (+)
  | | +- SlideMenu.vue (+)
  | |
  | +- store
  | +- index.js
  | +- ui.js (+)
  |Β
  +- package.json

• SlideMenu.vue - a menu that can be collapsed and expanded
• Content.vue - For testing purposes, we've added buttons here to collapse and expand the menu
• App.vue - strips down the default implementation and puts SlideMenu and Content side by side
• store/ui.js - vuex module to manage the state of the menu (collapsed, expanded)
• store/index.js - registers the ui module with the vuex store.

App.vue
<template> <div id="app
  <div id="app">
    <transition name="sliding"> <div id="app">
      <SlideMenu v-if="menuVisible" />
    </transition> <div id="app
    <Content /> <div id="app
  </div>
</template>

<script>
import SlideMenu from "./components/SlideMenu.vue";
import Content from "./components/Content.vue";
export default {
  name: "App",
  components: {
    SlideMenu,
    Content,
  },
  computed: {
    menuVisible() {
      return this.$store.state.ui.leftMenu.visible;
    },
  },
  mounted() {
    console.log("[STORE] ", this.$store);
    // $store.state.ui.leftMenu.visible
  },
};
</script>

<style lang="scss">
html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
  display: flex;
}

.sliding {
  &-enter {
    transform: translateX(-100%);
  }
  &-enter-active {
    transition: transform 0.2s ease;
  }
  &-enter-to {
    transform: translateY(0%);
  }

  &-leave {
    transform: translateY(0%);
  }
  &-leave-active {
    transition: transform 0.2s ease;
  }
  &-leave-to {
    transform: translateX(-100%);
  }
}
</style>

SlideMenu.vue
<template> <div class="slide-menu
  <div class="slide-menu">
    <h3>Slide Menu</h3>
  </div>
</template>

<script> </script
export default {};
</script>

<style lang="scss" scoped>
.slide-menu {
  background-color: aliceblue;
  width: 240px;
  flex: 0 0 auto;
}
</style>

Content.vue
<template> <div class="content-wrapper
  <div class="content-wrapper">
    <h3>content area</h3>
    <button v-if="menuVisible" @click="showMenu(false)">HIDE</button>
    <button v-else @click="showMenu(true)">SHOW</button>
  </div>
</template>

<script> </script
export default {
  mounted() {
    console.log("[menu visible?]", this.$store.state.ui.leftMenu.visible);
  },
  computed: {
    menuVisible() {
      return this.$store.state.ui.leftMenu.visible;
    },
  },
  methods: {
    showMenu(visible) {
      this.$store.state.ui.leftMenu.visible = visible;
    },
  },
};
</script> </script

<style lang="scss" scoped>
.content-wrapper {
  height: 100%;
  flex: 1 1 auto;
}
</style>

store/ui.js
/** /**
 * modules responsible for UI (menus, themes, etc...)
 */?
export default {
  state: () => ({
    leftMenu: {
      visible: true, // left menu state
    },
  }),
};

store/index.js
import Vue from "vue";
import Vuex from "vuex";
import ui from "./ui";

Vue.use(Vuex);

export default new Vuex.Store({
  /** Registering modules */
  modules: {
    ui,
  },
});

2. description