├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── views
    │   ├── Profile.vue
    │   ├── Messages.vue
    │   ├── Overview.vue
    │   ├── Settings.vue
    │   └── Dashboard.vue
    ├── App.vue
    ├── router
    │   └── index.js
    └── components
    │   └── Sidebar.vue
├── babel.config.js
├── .gitignore
├── .eslintrc.js
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeordyO/simple-vue-sidebar/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeordyO/simple-vue-sidebar/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   router,
 9 |   render: h => h(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # youtubesidebar
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/views/Profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="profile">
 3 |         Profile
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | .profile {
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |     height: 100%;
19 |     width: 100%;
20 |     font-size: 40px;
21 |     color: rgb(167, 167, 167);
22 |     font-weight: 600;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/src/views/Messages.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="messages">
 3 |         Messages
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | .messages {
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |     height: 100%;
19 |     width: 100%;
20 |     font-size: 40px;
21 |     color: rgb(167, 167, 167);
22 |     font-weight: 600;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/src/views/Overview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="overview">
 3 |         Overview
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | .overview {
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |     height: 100%;
19 |     width: 100%;
20 |     font-size: 40px;
21 |     color: rgb(167, 167, 167);
22 |     font-weight: 600;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/src/views/Settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="settings">
 3 |         Settings
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | .settings {
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |     height: 100%;
19 |     width: 100%;
20 |     font-size: 40px;
21 |     color: rgb(167, 167, 167);
22 |     font-weight: 600;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'App'
10 |   }
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: 'Roboto', sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 | }
21 | 
22 | body {
23 |   margin: 0px;
24 |   padding: 0px;
25 |   box-sizing: border-box;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="dashboard">
 3 |         <Sidebar/>
 4 |         <div class="content">
 5 |             <router-view/>
 6 |         </div>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Sidebar from '../components/Sidebar'
12 | export default {
13 |     name: 'home',
14 | 
15 |     components: {
16 |         Sidebar
17 |     }
18 | }
19 | </script>
20 | 
21 | <style>
22 | .dashboard {
23 |     display: grid;
24 |     grid-template-columns: 1fr 5fr;
25 |     background-color: teal;
26 |     height: 100vh;
27 |     width: 100vw;
28 | }
29 | 
30 | .content {
31 |     background-color: white;
32 |     border-radius: 10px;
33 |     margin: 6px 6px 6px 0px;
34 | }
35 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "youtubesidebar",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.2.0"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-plugin-router": "~4.5.0",
19 |     "@vue/cli-service": "~4.5.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import dashboard from '../views/Dashboard'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '',
10 |     component: dashboard,
11 |     children: [
12 |       {
13 |         path: '',
14 |         component: () => import(/* webpackChunkName: "Overview" */ '../views/Overview.vue')
15 |       },
16 |       {
17 |         path: 'messages',
18 |         component: () => import(/* webpackChunkName: "Messages" */ '../views/Messages.vue')
19 |       },
20 |       {
21 |         path: 'profile',
22 |         component: () => import(/* webpackChunkName: "Profile" */ '../views/Profile.vue')
23 |       },
24 |       {
25 |         path: 'settings',
26 |         component: () => import(/* webpackChunkName: "Settings" */ '../views/Settings.vue')
27 |       }
28 |     ]
29 |   }
30 | ]
31 | 
32 | const router = new VueRouter({
33 |   mode: 'history',
34 |   base: process.env.BASE_URL,
35 |   routes
36 | })
37 | 
38 | export default router
39 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="sidebar">
  3 |         <div class="title">
  4 |             Simple Sidebar
  5 |         </div>
  6 |         <div class="menu-items">
  7 |             <router-link to="/" active-class="active" tag="button" exact class="side-btn">
  8 |                 <div class="link-container">
  9 |                     Overview
 10 |                 </div>
 11 |             </router-link>
 12 |             <router-link to="/messages" active-class="active" tag="button" exact class="side-btn">
 13 |                 <div class="link-container">
 14 |                     Messages
 15 |                 </div>
 16 |             </router-link>
 17 |             <router-link to="/profile" active-class="active" tag="button" exact class="side-btn">
 18 |                 <div class="link-container">
 19 |                     Profile
 20 |                 </div>
 21 |             </router-link>
 22 |             <router-link to="/settings" active-class="active" tag="button" exact class="side-btn">
 23 |                 <div class="link-container">
 24 |                     Settings
 25 |                 </div>
 26 |             </router-link>
 27 |         </div>
 28 |     </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | export default {
 33 |     
 34 | }
 35 | </script>
 36 | 
 37 | <style scoped>
 38 | .title {
 39 |     color: white;
 40 |     font-size: 24px;
 41 |     margin-top: 10px;
 42 | }
 43 | 
 44 | .menu-items {
 45 |     display: flex;
 46 |     flex-direction: column;
 47 |     margin-top: 40px;
 48 |     margin-left: 6px;
 49 | }
 50 | 
 51 | .menu-items > * {
 52 |     margin-top: 60px;
 53 | }
 54 | 
 55 | .side-btn {
 56 |     border: none;
 57 |     padding: 16px 0px;
 58 |     cursor: pointer;
 59 |     font-size: 16px;
 60 |     font-weight: 500;
 61 |     color: white;
 62 |     background-color: transparent;
 63 | }
 64 | 
 65 | .side-btn:focus {
 66 |     outline: none;
 67 | }
 68 | 
 69 | .side-btn.active {
 70 |     position: relative;
 71 |     background-color: white;
 72 |     color: teal;
 73 |     font-weight: 600;
 74 |     margin-left: 10px;
 75 |     border-radius: 30px 0 0 30px;
 76 | }
 77 | 
 78 | .side-btn.active::before {
 79 |     top: -30px;
 80 | }
 81 | 
 82 | .side-btn.active::after {
 83 |     bottom: -30px;
 84 | }
 85 | 
 86 | .side-btn.active::before, .side-btn.active::after {
 87 |     position: absolute;
 88 |     content: "";
 89 |     right: 0;
 90 |     height: 30px;
 91 |     width: 30px;
 92 |     background-color: white;
 93 | }
 94 | 
 95 | .side-btn.active .link-container::before {
 96 |     top: -60px;
 97 | }
 98 | 
 99 | .side-btn.active .link-container::after {
100 |     bottom: -60px;
101 |     z-index: 99;
102 | }
103 | 
104 | .side-btn.active .link-container::before, .side-btn.active .link-container::after {
105 |     position: absolute;
106 |     content: "";
107 |     right: 0px;
108 |     height: 60px;
109 |     width: 60px;
110 |     border-radius: 50%;
111 |     background-color: teal;
112 | }
113 | </style>


--------------------------------------------------------------------------------