├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── HelloWorld.vue
    │   └── sidebar
    │   │   ├── Sidebar.vue
    │   │   ├── SidebarLink.vue
    │   │   └── state.js
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   ├── About.vue
    │   ├── Dashboard.vue
    │   └── Home.vue
└── yarn.lock


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


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "none",
5 |   "htmlWhitespaceSensitivity": "ignore"
6 | }
7 | 


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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-sidebar",
 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 |     "@fortawesome/fontawesome-free": "^5.15.3",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.0.0-0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-plugin-router": "~4.5.0",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "@vue/compiler-sfc": "^3.0.0",
22 |     "@vue/eslint-config-prettier": "^6.0.0",
23 |     "babel-eslint": "^10.1.0",
24 |     "eslint": "^6.7.2",
25 |     "eslint-plugin-prettier": "^3.3.1",
26 |     "eslint-plugin-vue": "^7.0.0",
27 |     "prettier": "^2.2.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingwithjustin/vue3-sidebar/37920454cafc0ba7df630ec03ebe6ef8a559c429/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 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/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Sidebar from '@/components/sidebar/Sidebar'
 3 | import { sidebarWidth } from '@/components/sidebar/state'
 4 | export default {
 5 |   components: { Sidebar },
 6 |   setup() {
 7 |     return { sidebarWidth }
 8 |   }
 9 | }
10 | </script>
11 | <template>
12 |   <Sidebar />
13 |   <div :style="{ 'margin-left': sidebarWidth }">
14 |     <router-view />
15 |   </div>
16 | </template>
17 | 
18 | <style>
19 | #app {
20 |   font-family: Avenir, Helvetica, Arial, sans-serif;
21 |   -webkit-font-smoothing: antialiased;
22 |   -moz-osx-font-smoothing: grayscale;
23 |   text-align: center;
24 |   color: #2c3e50;
25 | }
26 | 
27 | #nav {
28 |   padding: 30px;
29 | }
30 | 
31 | #nav a {
32 |   font-weight: bold;
33 |   color: #2c3e50;
34 | }
35 | 
36 | #nav a.router-link-exact-active {
37 |   color: #42b983;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingwithjustin/vue3-sidebar/37920454cafc0ba7df630ec03ebe6ef8a559c429/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,
  6 |       <br />
  7 |       check out the
  8 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
  9 |         vue-cli documentation
 10 |       </a>
 11 |       .
 12 |     </p>
 13 |     <h3>Installed CLI Plugins</h3>
 14 |     <ul>
 15 |       <li>
 16 |         <a
 17 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 18 |           target="_blank"
 19 |           rel="noopener"
 20 |         >
 21 |           babel
 22 |         </a>
 23 |       </li>
 24 |       <li>
 25 |         <a
 26 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
 27 |           target="_blank"
 28 |           rel="noopener"
 29 |         >
 30 |           router
 31 |         </a>
 32 |       </li>
 33 |       <li>
 34 |         <a
 35 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 36 |           target="_blank"
 37 |           rel="noopener"
 38 |         >
 39 |           eslint
 40 |         </a>
 41 |       </li>
 42 |     </ul>
 43 |     <h3>Essential Links</h3>
 44 |     <ul>
 45 |       <li>
 46 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 47 |       </li>
 48 |       <li>
 49 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener">
 50 |           Forum
 51 |         </a>
 52 |       </li>
 53 |       <li>
 54 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener">
 55 |           Community Chat
 56 |         </a>
 57 |       </li>
 58 |       <li>
 59 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">
 60 |           Twitter
 61 |         </a>
 62 |       </li>
 63 |       <li>
 64 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 65 |       </li>
 66 |     </ul>
 67 |     <h3>Ecosystem</h3>
 68 |     <ul>
 69 |       <li>
 70 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener">
 71 |           vue-router
 72 |         </a>
 73 |       </li>
 74 |       <li>
 75 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 76 |       </li>
 77 |       <li>
 78 |         <a
 79 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 80 |           target="_blank"
 81 |           rel="noopener"
 82 |         >
 83 |           vue-devtools
 84 |         </a>
 85 |       </li>
 86 |       <li>
 87 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">
 88 |           vue-loader
 89 |         </a>
 90 |       </li>
 91 |       <li>
 92 |         <a
 93 |           href="https://github.com/vuejs/awesome-vue"
 94 |           target="_blank"
 95 |           rel="noopener"
 96 |         >
 97 |           awesome-vue
 98 |         </a>
 99 |       </li>
100 |     </ul>
101 |   </div>
102 | </template>
103 | 
104 | <script>
105 | export default {
106 |   name: 'HelloWorld',
107 |   props: {
108 |     msg: String
109 |   }
110 | }
111 | </script>
112 | 
113 | <!-- Add "scoped" attribute to limit CSS to this component only -->
114 | <style scoped>
115 | h3 {
116 |   margin: 40px 0 0;
117 | }
118 | ul {
119 |   list-style-type: none;
120 |   padding: 0;
121 | }
122 | li {
123 |   display: inline-block;
124 |   margin: 0 10px;
125 | }
126 | a {
127 |   color: #42b983;
128 | }
129 | </style>
130 | 


--------------------------------------------------------------------------------
/src/components/sidebar/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import SidebarLink from './SidebarLink'
 3 | import { collapsed, toggleSidebar, sidebarWidth } from './state'
 4 | 
 5 | export default {
 6 |   props: {},
 7 |   components: { SidebarLink },
 8 |   setup() {
 9 |     return { collapsed, toggleSidebar, sidebarWidth }
10 |   }
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <div class="sidebar" :style="{ width: sidebarWidth }">
16 |     <h1>
17 |       <span v-if="collapsed">
18 |         <div>V</div>
19 |         <div>S</div>
20 |       </span>
21 |       <span v-else>Vue Sidebar</span>
22 |     </h1>
23 | 
24 |     <SidebarLink to="/" icon="fas fa-home">Home</SidebarLink>
25 |     <SidebarLink to="/dashboard" icon="fas fa-columns">Dashboard</SidebarLink>
26 |     <SidebarLink to="/analytics" icon="fas fa-chart-bar">Analytics</SidebarLink>
27 |     <SidebarLink to="/friends" icon="fas fa-users">Friends</SidebarLink>
28 |     <SidebarLink to="/image" icon="fas fa-image">Images</SidebarLink>
29 | 
30 |     <span
31 |       class="collapse-icon"
32 |       :class="{ 'rotate-180': collapsed }"
33 |       @click="toggleSidebar"
34 |     >
35 |       <i class="fas fa-angle-double-left" />
36 |     </span>
37 |   </div>
38 | </template>
39 | 
40 | <style>
41 | :root {
42 |   --sidebar-bg-color: #2f855a;
43 |   --sidebar-item-hover: #38a169;
44 |   --sidebar-item-active: #276749;
45 | }
46 | </style>
47 | 
48 | <style scoped>
49 | .sidebar {
50 |   color: white;
51 |   background-color: var(--sidebar-bg-color);
52 | 
53 |   float: left;
54 |   position: fixed;
55 |   z-index: 1;
56 |   top: 0;
57 |   left: 0;
58 |   bottom: 0;
59 |   padding: 0.5em;
60 | 
61 |   transition: 0.3s ease;
62 | 
63 |   display: flex;
64 |   flex-direction: column;
65 | }
66 | 
67 | .sidebar h1 {
68 |   height: 2.5em;
69 | }
70 | 
71 | .collapse-icon {
72 |   position: absolute;
73 |   bottom: 0;
74 |   padding: 0.75em;
75 | 
76 |   color: rgba(255, 255, 255, 0.7);
77 | 
78 |   transition: 0.2s linear;
79 | }
80 | 
81 | .rotate-180 {
82 |   transform: rotate(180deg);
83 |   transition: 0.2s linear;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/sidebar/SidebarLink.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { computed } from 'vue'
 3 | import { useRoute } from 'vue-router'
 4 | import { collapsed } from './state'
 5 | 
 6 | export default {
 7 |   props: {
 8 |     to: { type: String, required: true },
 9 |     icon: { type: String, required: true }
10 |   },
11 |   setup(props) {
12 |     const route = useRoute()
13 |     const isActive = computed(() => route.path === props.to)
14 |     return { isActive, collapsed }
15 |   }
16 | }
17 | </script>
18 | 
19 | <template>
20 |   <router-link :to="to" class="link" :class="{ active: isActive }">
21 |     <i class="icon" :class="icon" />
22 |     <transition name="fade">
23 |       <span v-if="!collapsed">
24 |         <slot />
25 |       </span>
26 |     </transition>
27 |   </router-link>
28 | </template>
29 | 
30 | <style scoped>
31 | .fade-enter-active,
32 | .fade-leave-active {
33 |   transition: opacity 0.1s;
34 | }
35 | 
36 | .fade-enter,
37 | .fade-leave-to {
38 |   opacity: 0;
39 | }
40 | 
41 | .link {
42 |   display: flex;
43 |   align-items: center;
44 | 
45 |   cursor: pointer;
46 |   position: relative;
47 |   font-weight: 400;
48 |   user-select: none;
49 | 
50 |   margin: 0.1em 0;
51 |   padding: 0.4em;
52 |   border-radius: 0.25em;
53 |   height: 1.5em;
54 | 
55 |   color: white;
56 |   text-decoration: none;
57 | }
58 | 
59 | .link:hover {
60 |   background-color: var(--sidebar-item-hover);
61 | }
62 | 
63 | .link.active {
64 |   background-color: var(--sidebar-item-active);
65 | }
66 | 
67 | .link .icon {
68 |   flex-shrink: 0;
69 |   width: 25px;
70 |   margin-right: 10px;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/sidebar/state.js:
--------------------------------------------------------------------------------
 1 | import { ref, computed } from 'vue'
 2 | 
 3 | export const collapsed = ref(false)
 4 | export const toggleSidebar = () => (collapsed.value = !collapsed.value)
 5 | 
 6 | export const SIDEBAR_WIDTH = 180
 7 | export const SIDEBAR_WIDTH_COLLAPSED = 38
 8 | export const sidebarWidth = computed(
 9 |   () => `${collapsed.value ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH}px`
10 | )
11 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | 
5 | import '@fortawesome/fontawesome-free/js/all'
6 | 
7 | createApp(App).use(router).mount('#app')
8 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from '../views/Home.vue'
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: '/',
 7 |     name: 'Home',
 8 |     component: Home
 9 |   },
10 |   {
11 |     path: '/dashboard',
12 |     name: 'Dashboard',
13 |     component: () => import('../views/Dashboard.vue')
14 |   },
15 |   {
16 |     path: '/about',
17 |     name: 'About',
18 |     component: () => import('../views/About.vue')
19 |   }
20 | ]
21 | 
22 | const router = createRouter({
23 |   history: createWebHistory(process.env.BASE_URL),
24 |   routes
25 | })
26 | 
27 | export default router
28 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>The sidebar is {{ collapsed ? 'closed' : 'open' }}</h1>
 3 |   <button @click="toggleSidebar">Toggle Sidebar</button>
 4 | </template>
 5 | 
 6 | <script>
 7 | import { collapsed, toggleSidebar } from '@/components/sidebar/state'
 8 | 
 9 | export default {
10 |   setup() {
11 |     return { collapsed, toggleSidebar }
12 |   }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | 
12 | export default {
13 |   name: 'Home',
14 |   components: {
15 |     HelloWorld
16 |   }
17 | }
18 | </script>
19 | 


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