Initial Commit
This commit is contained in:
commit
ea7a3a8403
23 changed files with 13961 additions and 0 deletions
4
.env
Normal file
4
.env
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
VUE_APP_APIENDPOINT="/api/"
|
||||||
|
VUE_APP_APIVERSION="v1"
|
||||||
|
VUE_APP_GATEWAYENDPOINT="https://gateway.kaverti.com"
|
||||||
|
VUE_APP_STAGING=false
|
||||||
4
.env.development
Normal file
4
.env.development
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
VUE_APP_APIENDPOINT="/api/"
|
||||||
|
VUE_APP_APIVERSION="v1"
|
||||||
|
VUE_APP_GATEWAYENDPOINT="http://localhost:23981"
|
||||||
|
VUE_APP_STAGING=true
|
||||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
24
README.md
Normal file
24
README.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
#
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
yarn lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
24
assets/js/errorHandler.js
Normal file
24
assets/js/errorHandler.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
module.exports = function(vuex) {
|
||||||
|
return function (res, ignorePathErrorCb) {
|
||||||
|
let errors = []
|
||||||
|
|
||||||
|
if(res.response === undefined || res.response.data.errors === undefined) {
|
||||||
|
errors.push('Kaverti ran into an unknown issue while attempting to perform this action, try retrying it, or try it later.')
|
||||||
|
} else {
|
||||||
|
res.response.data.errors.forEach(error => {
|
||||||
|
let path = error.path
|
||||||
|
|
||||||
|
if(path && ignorePathErrorCb) {
|
||||||
|
ignorePathErrorCb(error, errors)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
errors.push(error.message[0].toUpperCase() + error.message.slice(1))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(errors.length) {
|
||||||
|
vuex.commit('setAjaxErrors', errors)
|
||||||
|
vuex.commit('setAjaxErrorsModalState', true)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
11
assets/scss/buefy.scss
Normal file
11
assets/scss/buefy.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
@import "~bulma/sass/utilities/functions";
|
||||||
|
|
||||||
|
// Set your colors etc..
|
||||||
|
$primary: #2baaff;
|
||||||
|
$primary-invert: findColorInvert($primary);
|
||||||
|
$twitter: #4099FF;
|
||||||
|
$twitter-invert: findColorInvert($twitter);
|
||||||
|
|
||||||
|
// Import Bulma and Buefy styles
|
||||||
|
@import "~bulma";
|
||||||
|
@import "~buefy/src/scss/buefy";
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
58
package.json
Normal file
58
package.json
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
{
|
||||||
|
"name": "kaverti-frontend",
|
||||||
|
"version": "",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/cli": "^4.5.10",
|
||||||
|
"axios": "^0.21.1",
|
||||||
|
"buefy": "^0.9.4",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"dotenv-webpack": "^6.0.0",
|
||||||
|
"socket.io": "^3.1.0",
|
||||||
|
"to-boolean": "^1.0.0",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-axios": "^3.2.2",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vue-socket.io": "^3.0.10",
|
||||||
|
"vuex": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"node-sass": "4.13.1",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
],
|
||||||
|
"_id": "@",
|
||||||
|
"readme": "ERROR: No README data found!"
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
41
public/index.html
Normal file
41
public/index.html
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<title>Kaverti</title>
|
||||||
|
<meta name="title" content="Kaverti">
|
||||||
|
<meta name="description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://kaverti.com">
|
||||||
|
<meta property="og:title" content="Kaverti">
|
||||||
|
<meta property="og:description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
|
||||||
|
<meta property="og:image" content="https://cdn.kaverti.com/opengraph-image.png">
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
<meta property="twitter:url" content="https://kaverti.com">
|
||||||
|
<meta property="twitter:title" content="Kaverti">
|
||||||
|
<meta property="twitter:description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
|
||||||
|
<meta property="twitter:image" content="https://cdn.kaverti.com/opengraph-image.png">
|
||||||
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces2016%2Ces2018%2Ces2019%2Ces2017%2Ces6%2Ces5%2Ces7%2Cdefault%2CIntl%2Cblissfuljs"></script>
|
||||||
|
<script>
|
||||||
|
function isIE() {
|
||||||
|
ua = navigator.userAgent;
|
||||||
|
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
|
||||||
|
return is_ie;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isIE()){
|
||||||
|
document.write('<h2>Kaverti does not support any Internet Explorer version, and we most likely will not implement support, this page will not render properly with all Internet Explorer versions, please use Chrome, Firefox, Opera, Edge, or another modern browser, if you\'re using a modern browser, please disregard this message, and report it on the forums.</h2>');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but Kaverti doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
src/App.vue
Normal file
32
src/App.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<style lang="scss">
|
||||||
|
@import './assets/scss/buefy';
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<div id="navigation">
|
||||||
|
<Navbar/>
|
||||||
|
</div>
|
||||||
|
<div id="router">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
<div id="footer">
|
||||||
|
<Footer/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Navbar from './components/Navbar'
|
||||||
|
import Footer from './components/Footer'
|
||||||
|
export default {
|
||||||
|
name: 'KavertiApp',
|
||||||
|
components: {
|
||||||
|
Navbar,
|
||||||
|
Footer
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if(this.$store.state.debug) {
|
||||||
|
this.$buefy.snackbar.open({message:`Warning: You are using a development build of Kaverti, expect instabilities.`, type: 'is-warning'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
5
src/components/Footer.vue
Normal file
5
src/components/Footer.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="footer">
|
||||||
|
<h1>© 2021 Kaverti</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
238
src/components/Navbar.vue
Normal file
238
src/components/Navbar.vue
Normal file
|
|
@ -0,0 +1,238 @@
|
||||||
|
<template>
|
||||||
|
<nav>
|
||||||
|
<b-modal :active="loginModal" @update:active="value => loginModal = value" :width="640" scroll="keep">
|
||||||
|
<b-form>
|
||||||
|
<div class="modal-card" style="width: auto">
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<p class="modal-card-title">Login to Kaverti</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="delete"
|
||||||
|
@click="$emit('close')"/>
|
||||||
|
</header>
|
||||||
|
<section class="modal-card-body">
|
||||||
|
<b-field label="Username or Email">
|
||||||
|
<b-input
|
||||||
|
:value="login.username"
|
||||||
|
v-model="login.username"
|
||||||
|
placeholder="Your username or email"
|
||||||
|
required>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
<b-field label="Password">
|
||||||
|
<b-input
|
||||||
|
type="password"
|
||||||
|
:value="login.password"
|
||||||
|
v-model="login.password"
|
||||||
|
password-reveal
|
||||||
|
placeholder="Your password"
|
||||||
|
required>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
</section>
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<b-button
|
||||||
|
label="Close"
|
||||||
|
@click="$emit('close')" />
|
||||||
|
<b-button
|
||||||
|
@click="doLogin()"
|
||||||
|
label="Login"
|
||||||
|
:loading="login.loading"
|
||||||
|
type="is-primary" />
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</b-form>
|
||||||
|
</b-modal>
|
||||||
|
<b-modal :active="registerModal" @update:active="value => registerModal = value" :width="640" scroll="keep">
|
||||||
|
<b-form>
|
||||||
|
<div class="modal-card" style="width: auto">
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<p class="modal-card-title">Register to Kaverti</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="delete"
|
||||||
|
@click="$emit('close')"/>
|
||||||
|
</header>
|
||||||
|
<section class="modal-card-body">
|
||||||
|
<b-field label="Username">
|
||||||
|
<b-input
|
||||||
|
:value="register.username"
|
||||||
|
v-model="register.username"
|
||||||
|
placeholder="Your username or email"
|
||||||
|
required>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-field label="Email">
|
||||||
|
<b-input
|
||||||
|
type="email"
|
||||||
|
:value="register.email"
|
||||||
|
v-model="register.email"
|
||||||
|
placeholder="Your username or email"
|
||||||
|
required>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-field label="Password">
|
||||||
|
<b-input
|
||||||
|
type="password"
|
||||||
|
:value="register.password"
|
||||||
|
v-model="register.password"
|
||||||
|
password-reveal
|
||||||
|
placeholder="Your password"
|
||||||
|
required>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-field label="Password Confirmation">
|
||||||
|
<b-input
|
||||||
|
type="password"
|
||||||
|
:value="register.confirm"
|
||||||
|
v-model="register.confirm"
|
||||||
|
password-reveal
|
||||||
|
placeholder="Your password"
|
||||||
|
required>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-checkbox v-model="register.agree">I agree to the <router-link to="/legal/tos">Terms of Service</router-link></b-checkbox>
|
||||||
|
</section>
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<b-button
|
||||||
|
label="Close"
|
||||||
|
@click="$emit('close')" />
|
||||||
|
<b-button
|
||||||
|
@click="doRegister()"
|
||||||
|
label="Register"
|
||||||
|
:loading="register.loading"
|
||||||
|
type="is-primary" />
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</b-form>
|
||||||
|
</b-modal>
|
||||||
|
<b-navbar>
|
||||||
|
<template #brand>
|
||||||
|
<b-navbar-item tag="router-link" :to="{ path: '/' }">
|
||||||
|
<img
|
||||||
|
src="https://cdn.kaverti.com/logo.png"
|
||||||
|
alt="Kaverti Logo"
|
||||||
|
>
|
||||||
|
</b-navbar-item>
|
||||||
|
</template>
|
||||||
|
<template #start>
|
||||||
|
<b-navbar-item href="#">
|
||||||
|
Home
|
||||||
|
</b-navbar-item>
|
||||||
|
<b-navbar-item href="#">
|
||||||
|
Documentation
|
||||||
|
</b-navbar-item>
|
||||||
|
<div v-if="$store.state.debug" class="navbar-item has-dropdown is-hoverable is-info">
|
||||||
|
<a class="navbar-link">
|
||||||
|
<p>Developer Options</p>
|
||||||
|
</a>
|
||||||
|
<div class="navbar-dropdown is-boxed">
|
||||||
|
<b-navbar-item tag="router-link" to="/debug">Debug Page</b-navbar-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #end>
|
||||||
|
<b-navbar-item tag="div">
|
||||||
|
<div class="buttons">
|
||||||
|
<b-button @click="registerModal = true" class="button is-primary">
|
||||||
|
<strong>Register</strong>
|
||||||
|
</b-button>
|
||||||
|
<b-button @click="loginModal = true" class="button is-light">
|
||||||
|
Log in
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
|
</b-navbar-item>
|
||||||
|
</template>
|
||||||
|
</b-navbar>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import AjaxErrorHandler from '../../assets/js/errorHandler'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loginModal: false,
|
||||||
|
registerModal: false,
|
||||||
|
login: {
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
loading: false
|
||||||
|
},
|
||||||
|
register: {
|
||||||
|
username: '',
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
confirm: '',
|
||||||
|
agree: false,
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
doRegister() {
|
||||||
|
this.register.loading = true
|
||||||
|
this.axios.post('/api/v1/users/register', {
|
||||||
|
username: this.register.username,
|
||||||
|
password: this.register.password,
|
||||||
|
email: this.register.email,
|
||||||
|
confirm: this.register.confirm,
|
||||||
|
agree: this.register.agree
|
||||||
|
}).then((res) => {
|
||||||
|
this.register.loading = false
|
||||||
|
this.$store.commit('setUsername', res.data.username)
|
||||||
|
this.$store.commit('setAvatar', res.data.avatar)
|
||||||
|
this.$store.commit('setID', res.data.id)
|
||||||
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
||||||
|
this.$store.commit('setEmail', res.data.email)
|
||||||
|
this.$store.commit('setAdmin', res.data.admin)
|
||||||
|
this.$store.commit('setToken', res.data.token)
|
||||||
|
}).catch(e => {
|
||||||
|
this.register.loading = false
|
||||||
|
|
||||||
|
AjaxErrorHandler(this.$store)(e, (error, errors) => {
|
||||||
|
let path = error.path
|
||||||
|
|
||||||
|
if (this.errors[path] !== undefined) {
|
||||||
|
this.errors[path] = error.message
|
||||||
|
} else {
|
||||||
|
errors.push(error.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
doLogin() {
|
||||||
|
this.login.loading = true
|
||||||
|
this.axios.post('/api/v1/users/login', {
|
||||||
|
username: this.register.username,
|
||||||
|
password: this.register.password,
|
||||||
|
email: this.register.email,
|
||||||
|
confirm: this.register.confirm,
|
||||||
|
agree: this.register.agree
|
||||||
|
}).then((res) => {
|
||||||
|
this.register.loading = false
|
||||||
|
this.$store.commit('setUsername', res.data.username)
|
||||||
|
this.$store.commit('setAvatar', res.data.avatar)
|
||||||
|
this.$store.commit('setID', res.data.id)
|
||||||
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
||||||
|
this.$store.commit('setEmail', res.data.email)
|
||||||
|
this.$store.commit('setAdmin', res.data.admin)
|
||||||
|
this.$store.commit('setToken', res.data.token)
|
||||||
|
}).catch(e => {
|
||||||
|
this.register.loading = false
|
||||||
|
|
||||||
|
AjaxErrorHandler(this.$store)(e, (error, errors) => {
|
||||||
|
let path = error.path
|
||||||
|
|
||||||
|
if (this.errors[path] !== undefined) {
|
||||||
|
this.errors[path] = error.message
|
||||||
|
} else {
|
||||||
|
errors.push(error.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
143
src/components/Sidebar.vue
Normal file
143
src/components/Sidebar.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
<template>
|
||||||
|
<div class="sidebar-page">
|
||||||
|
<section class="sidebar-layout">
|
||||||
|
<b-sidebar
|
||||||
|
position="static"
|
||||||
|
:mobile="mobile"
|
||||||
|
:expand-on-hover="expandOnHover"
|
||||||
|
:reduce="reduce"
|
||||||
|
type="is-light"
|
||||||
|
open
|
||||||
|
>
|
||||||
|
<div class="p-1">
|
||||||
|
<div class="block">
|
||||||
|
<img
|
||||||
|
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
|
||||||
|
alt="Lightweight UI components for Vue.js based on Bulma"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<b-menu class="is-custom-mobile">
|
||||||
|
<b-menu-list label="Menu">
|
||||||
|
<b-menu-item icon="information-outline" label="Info"></b-menu-item>
|
||||||
|
<b-menu-item active expanded icon="settings" label="Administrator">
|
||||||
|
<b-menu-item icon="account" label="Users"></b-menu-item>
|
||||||
|
<b-menu-item icon="cellphone-link" label="Devices"></b-menu-item>
|
||||||
|
<b-menu-item icon="cash-multiple" label="Payments" disabled></b-menu-item>
|
||||||
|
</b-menu-item>
|
||||||
|
<b-menu-item icon="account" label="My Account">
|
||||||
|
<b-menu-item icon="account-box" label="Account data"></b-menu-item>
|
||||||
|
<b-menu-item icon="home-account" label="Addresses"></b-menu-item>
|
||||||
|
</b-menu-item>
|
||||||
|
</b-menu-list>
|
||||||
|
<b-menu-list>
|
||||||
|
<b-menu-item label="Expo" icon="link"></b-menu-item>
|
||||||
|
</b-menu-list>
|
||||||
|
<b-menu-list label="Actions">
|
||||||
|
<b-menu-item icon="logout" label="Logout"></b-menu-item>
|
||||||
|
</b-menu-list>
|
||||||
|
</b-menu>
|
||||||
|
</div>
|
||||||
|
</b-sidebar>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
expandOnHover: false,
|
||||||
|
mobile: "reduce",
|
||||||
|
reduce: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.p-1 {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
.sidebar-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
// min-height: 100vh;
|
||||||
|
.sidebar-layout {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
min-height: 100%;
|
||||||
|
// min-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1023px) {
|
||||||
|
.b-sidebar {
|
||||||
|
.sidebar-content {
|
||||||
|
&.is-mini-mobile {
|
||||||
|
&:not(.is-mini-expand),
|
||||||
|
&.is-mini-expand:not(:hover) {
|
||||||
|
.menu-list {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
span:nth-child(2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-label:not(:last-child) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
.b-sidebar {
|
||||||
|
.sidebar-content {
|
||||||
|
&.is-mini {
|
||||||
|
&:not(.is-mini-expand),
|
||||||
|
&.is-mini-expand:not(:hover) {
|
||||||
|
.menu-list {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
span:nth-child(2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-label:not(:last-child) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-mini-expand {
|
||||||
|
.menu-list a {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
src/main.js
Normal file
16
src/main.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import Buefy from 'buefy'
|
||||||
|
import axios from 'axios'
|
||||||
|
import VueAxios from 'vue-axios'
|
||||||
|
Vue.use(VueAxios, axios)
|
||||||
|
Vue.use(Buefy)
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
34
src/router/index.js
Normal file
34
src/router/index.js
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
function route(view){
|
||||||
|
return() => import(`@/views/${view}.vue`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: route('Home')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'About',
|
||||||
|
component: route('About')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/debug',
|
||||||
|
name: 'Debug',
|
||||||
|
component: route('Debug')
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
25
src/store/index.js
Normal file
25
src/store/index.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import tb from 'to-boolean';
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
name: "Kaverti",
|
||||||
|
debug: tb(process.env.VUE_APP_STAGING),
|
||||||
|
errors: {
|
||||||
|
errors: [],
|
||||||
|
modal: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
turnOffDebug(state) {
|
||||||
|
state.debug = false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
5
src/views/About.vue
Normal file
5
src/views/About.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
23
src/views/Debug.vue
Normal file
23
src/views/Debug.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<div class="column">
|
||||||
|
<div class="box">
|
||||||
|
Debug mode turned on: {{$store.state.debug}}
|
||||||
|
<br>
|
||||||
|
<b-button v-if="$store.state.debug" @click="turnOffDebug">Turn off</b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Debug",
|
||||||
|
methods: {
|
||||||
|
turnOffDebug () {
|
||||||
|
this.$store.commit('turnOffDebug')
|
||||||
|
this.$buefy.snackbar.open(`Debug mode disabled, you will no longer have access to development features until you refresh.`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
11
src/views/Home.vue
Normal file
11
src/views/Home.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
DEBUG HOME
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Home'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
13
vue.config.js
Normal file
13
vue.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
const Dotenv = require('dotenv-webpack');
|
||||||
|
module.exports = {
|
||||||
|
devServer: {
|
||||||
|
proxy: 'http://localhost:23981'
|
||||||
|
},
|
||||||
|
publicPath: '/',
|
||||||
|
productionSourceMap: false,
|
||||||
|
configureWebpack: {
|
||||||
|
plugins: [
|
||||||
|
new Dotenv()
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue