vue.js and sidebar example
10,543
It's in the scss. Doh! Thanks for the help. Here it is with css and now is working.
/* main css, body, etc */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #fff;
background-color: #2c3e50;
-webkit-font-smoothing: antialiased;
}
strong {
font-weight: 600;
}
.info {
position: absolute;
top: 50%;
right: 50%;
transform: translateX(50%);
text-align: center;
}
.title {
font-size: 24px;
font-weight: 600;
}
.description {
margin-top: 20px;
}
/* responsive grid */
* {
box-sizing: border-box;
}
.container {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
[class*="col-"] {
float: left;
padding: 15px;
background: #e4e4e4;
}
.row {
margin-bottom: 25px;
}
.row::after {
content: "";
clear: both;
display: block;
}
/*
Sidebar styles...
*/
.sidebar {
position: relative;
width: 340px;
height: 100vh;
padding: 30px;
background-color: #34495e;
transform: translateX(100%);
transition: transform 0.6s ease(out-cubic);
}
.sidebar.isOpen {
transform: translateX(0);
}
.sidebar-opener {
position: absolute;
top: 20px;
right: 100%;
margin-right: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
cursor: pointer;
}
.sidebar-opener:hover {
text-decoration: underline;
}
.sidebar-menu {
font-weight: 600;
color: #fff;
}
.sidebar-menu-item,
.sidebar-menu-item--small {
cursor: pointer;
}
.sidebar-menu-item:hover,
.sidebar-menu-item--small:hover {
text-decoration: underline;
}
.sidebar-menu-item + .sidebar-menu-item,
.sidebar-menu-item--small + .sidebar-menu-item, .sidebar-menu-item +
.sidebar-menu-item--small,
.sidebar-menu-item--small +
.sidebar-menu-item--small {
margin-top: 20px;
}
.sidebar-menu-item {
font-size: 36px;
}
.sidebar-menu-item + .sidebar-menu-item--small {
margin-top: 30px;
}
.sidebar-menu-item--small {
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ecf0f1;
}
/* The famed Zap agency logo (TM) */
.zap-emoji {
height: 120px;
}
![Teoman Kirac](https://i.stack.imgur.com/5nseX.jpg?s=256&g=1)
Author by
Teoman Kirac
Updated on June 26, 2022Comments
-
Teoman Kirac about 2 years
I am trying to get this sidebar (https://codepen.io/andymerskin/pen/wGbEOp) to work in my webpacked vue.js project. I can't get it to translate or transition! but it changes in console as it should and no errors whatsoever. PLease help. I am completely overlooking something and have been at it for far too long. Thanks for your help in advance. ;)
I have 2 components; body and sidebar. Sidebar is being called in body.vue.
Here is my Body.vue;
<template> <div id="main"> <div class="info"> <h1 class="title"> <pre><zap-slideout></pre> </h1> <p class="description">Give it a jolt. Click <strong>Open</strong> at the top.</p> </div> <div> <sidebar></sidebar> </div> </div> </template> <script> import Sidebar from '../components/Sidebar' export default { components: { 'sidebar': Sidebar } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> a { color: #42b983; } </style>
and my Sidebar.vue;
<template> <div id="sidebar" class="sidebar" :class="{ isOpen: isOpen }"> <div class="sidebar-opener" @click="toggle">{{openerText}}</div> <ul class="sidebar-menu"> <li class="sidebar-menu-item"> <img class="zap-emoji" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/19332/zap-emoji.svg" alt="Zap Emoji" /> </li> <li class="sidebar-menu-item" v-for="item in menu">{{item}}</li> <li class="sidebar-menu-item--small" v-for="item in smallMenu">{{item}}</li> </ul> </div> </template> <script type="text/javascript"> export default { data: () => ({ openerText: 'Open', isOpen: false, menu: [ 'Home', 'Work', 'Contact' ], smallMenu: [ 'Tips', 'Resources', 'Shenanigans' ] }), methods: { open () { this.openerText = 'Close' this.isOpen = true }, close () { this.openerText = 'Open' this.isOpen = false }, toggle () { if (this.isOpen) { this.close() } else { this.open() } } } } </script>
and my main.js;
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Sidebar from './components/Sidebar' Vue.component('sidebar', Sidebar) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
and my App.vue;
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style lang="css"> @import "../public/style.css"; </style>
and my index.js
import Vue from 'vue' import Router from 'vue-router' import Body from '@/components/Body' import Sidebar from '@/components/Sidebar.vue' Vue.component('sidebar', Sidebar) Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Body', component: Body } ] })
and my css;
/* main css, body, etc */ body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #fff; background-color: #2c3e50; -webkit-font-smoothing: antialiased; } strong { font-weight: 600; } .info { position: absolute; top: 50%; right: 50%; transform: translateX(50%); text-align: center; } .title { font-size: 24px; font-weight: 600; } .description { margin-top: 20px; } /* Sidebar styles... */ .sidebar { position: relative; width: 340px; height: 100vh; padding: 30px; background-color: #34495e; transform: translateX(100%); transition: transform 0.6s ease(out-cubic); &.isOpen { transform: translateX(0); } } .sidebar-opener { position: absolute; top: 20px; right: 100%; margin-right: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; cursor: pointer; &:hover { text-decoration: underline; } } .sidebar-menu { font-weight: 600; color: #fff; } .sidebar-menu-item, .sidebar-menu-item--small { cursor: pointer; &:hover { text-decoration: underline; } & + & { margin-top: 20px; } } .sidebar-menu-item { font-size: 36px; & + .sidebar-menu-item--small { margin-top: 30px; } } .sidebar-menu-item--small { font-size: 18px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.08em; color: #ecf0f1; } /* The famed Zap agency logo (TM) */ .zap-emoji { height: 120px; }