Coming up with navigation that looks good and responsive on small devices could be challenging. This will get you started with responsive navigation without necessary bloating the project with a third-party plugin.
The responsiveness was achieved with CSS grid. If you are yet to dive into this powerful and yet elegant way of achieving responsiveness, check here.
This tutorial assumes you are already familiar with Nuxt (framework for writing a universal application in Vue), its folder structure and Vuex (state management library for Vue).
Requirements.
I will be using the available nuxt-create-app
tool to scaffold this app quickly. Feel free to create the Nuxt app from scratch.
So, using nuxt-create-app,
you need to have npx installed on your device. npx
is shipped with NPM since 5.2.0
version.
However, you would need NPM and Node installed either to start the project from scratch or to use nuxt-create-app
tool.
Follow these simple steps to install Nuxt. We are going to keep the options very simple.
- Run
npx create-nuxt-app <project-name>
(in this case, navigation-nav is the name of our project. You can change it to whatever you like). - Select
none
for server-side frameworks, UI framework, testing framework. - Choose
spa
mode - Select
none
foraxios
andlinters
- Navigate to the project and run
npm install
- Finally
npm run dev
If everything goes well, you should see your application running onlocalhost:3000
Default layout
Components that are common to all pages will be placed here. This file will have the TheHeader
, TheSideNav
, TheFooter
, and the default nuxt
component.
App Links
Since the links are going to be the same in TheHeader
and TheSideNav
components, I will create a file in the components
directory and name it appLinks.vue
so it can be reused.
The Header
This file will have the brand name, the toggle button that displays on a smaller device and of course the app links we initially created.
The essence of this tutorial lies in this component and particularly in the toggle button.
The toggle element has v-on:click
directive attached to it ( I prefer the short form, @click). When this element is clicked, it dispatches the theToggleSidebar
action in the nav
module. The toggleSibebar
state determines if the sidebar would be displayed or not. This same code works hand in hand with the backdrop element inside theTheSideNav
component.
The Sidebar Navigation
This element has toggleSidebar
method in the computed
property of the TheSideNav
component. The value is boolean. This element also has a backdrop as earlier stated. When either the toggle button or the backdrop is clicked, the toggleSibebar
state in nav
module(store) is mutated to either true
or false
. Hence, that change is received in the computed
property via toggleSidebar
method we created.
I added a transition effect to the sidebar in order have a nice experience on the toggling of the sidebar. This was done effortlessly because of the Vue transition wrapper component.
The store
I opted for the module method. The classic way of managing state will be deprecated in the next Nuxt release. Our nav
module is pretty basic. It has the normal handlers state
, mutations
, actions
, and getters
.
Conclusion
We have succeeded in coming up with a cool navigation drawer that works well on small devices by using simple CSS grid and Vuex in Nuxt app.
Give me some claps if you find this tutorial useful.