Skip to content

Commit 3792045

Browse files
jsbroksjsbroks
committed
chore: init project
1 parent 0e37eb4 commit 3792045

14 files changed

+278
-66
lines changed

Diff for: ‎.eslintrc.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
module.exports = {
22
root: true,
33
env: {
4-
node: true,
4+
node: true
55
},
6-
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
6+
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
77
parserOptions: {
8-
parser: "babel-eslint",
8+
parser: 'babel-eslint'
99
},
1010
rules: {
11-
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
12-
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
13-
},
14-
};
11+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
13+
}
14+
}

Diff for: ‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"htmlWhitespaceSensitivity": "ignore"
6+
}

Diff for: ‎babel.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
presets: ["@vue/cli-plugin-babel/preset"],
3-
};
2+
presets: ['@vue/cli-plugin-babel/preset']
3+
}

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"@fortawesome/fontawesome-free": "^5.15.3",
1112
"core-js": "^3.6.5",
1213
"vue": "^3.0.0",
1314
"vue-router": "^4.0.0-0"

Diff for: ‎src/App.vue

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
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>
111
<template>
2-
<div id="nav">
3-
<router-link to="/">Home</router-link> |
4-
<router-link to="/about">About</router-link>
12+
<Sidebar />
13+
<div :style="{ 'margin-left': sidebarWidth }">
14+
<router-view />
515
</div>
6-
<router-view />
716
</template>
817

918
<style>

Diff for: ‎src/components/HelloWorld.vue

+35-28
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
<div class="hello">
33
<h1>{{ msg }}</h1>
44
<p>
5-
For a guide and recipes on how to configure / customize this project,<br />
5+
For a guide and recipes on how to configure / customize this project,
6+
<br />
67
check out the
7-
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
8-
>vue-cli documentation</a
9-
>.
8+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">
9+
vue-cli documentation
10+
</a>
11+
.
1012
</p>
1113
<h3>Installed CLI Plugins</h3>
1214
<ul>
@@ -15,24 +17,27 @@
1517
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
1618
target="_blank"
1719
rel="noopener"
18-
>babel</a
1920
>
21+
babel
22+
</a>
2023
</li>
2124
<li>
2225
<a
2326
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
2427
target="_blank"
2528
rel="noopener"
26-
>router</a
2729
>
30+
router
31+
</a>
2832
</li>
2933
<li>
3034
<a
3135
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
3236
target="_blank"
3337
rel="noopener"
34-
>eslint</a
3538
>
39+
eslint
40+
</a>
3641
</li>
3742
</ul>
3843
<h3>Essential Links</h3>
@@ -41,19 +46,19 @@
4146
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
4247
</li>
4348
<li>
44-
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
45-
>Forum</a
46-
>
49+
<a href="https://forum.vuejs.org" target="_blank" rel="noopener">
50+
Forum
51+
</a>
4752
</li>
4853
<li>
49-
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
50-
>Community Chat</a
51-
>
54+
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">
55+
Community Chat
56+
</a>
5257
</li>
5358
<li>
54-
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
55-
>Twitter</a
56-
>
59+
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">
60+
Twitter
61+
</a>
5762
</li>
5863
<li>
5964
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
@@ -62,9 +67,9 @@
6267
<h3>Ecosystem</h3>
6368
<ul>
6469
<li>
65-
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
66-
>vue-router</a
67-
>
70+
<a href="https://router.vuejs.org" target="_blank" rel="noopener">
71+
vue-router
72+
</a>
6873
</li>
6974
<li>
7075
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
@@ -74,33 +79,35 @@
7479
href="https://github.com/vuejs/vue-devtools#vue-devtools"
7580
target="_blank"
7681
rel="noopener"
77-
>vue-devtools</a
7882
>
83+
vue-devtools
84+
</a>
7985
</li>
8086
<li>
81-
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
82-
>vue-loader</a
83-
>
87+
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">
88+
vue-loader
89+
</a>
8490
</li>
8591
<li>
8692
<a
8793
href="https://github.com/vuejs/awesome-vue"
8894
target="_blank"
8995
rel="noopener"
90-
>awesome-vue</a
9196
>
97+
awesome-vue
98+
</a>
9299
</li>
93100
</ul>
94101
</div>
95102
</template>
96103

97104
<script>
98105
export default {
99-
name: "HelloWorld",
106+
name: 'HelloWorld',
100107
props: {
101-
msg: String,
102-
},
103-
};
108+
msg: String
109+
}
110+
}
104111
</script>
105112

106113
<!-- Add "scoped" attribute to limit CSS to this component only -->

Diff for: ‎src/components/sidebar/Sidebar.vue

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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>

Diff for: ‎src/components/sidebar/SidebarLink.vue

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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>

Diff for: ‎src/components/sidebar/state.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+
)

Diff for: ‎src/main.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { createApp } from "vue";
2-
import App from "./App.vue";
3-
import router from "./router";
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
44

5-
createApp(App).use(router).mount("#app");
5+
import '@fortawesome/fontawesome-free/js/all'
6+
7+
createApp(App).use(router).mount('#app')

0 commit comments

Comments
 (0)