@oxygen-cms/ui 1.5.0 → 1.6.0

package/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
     "env": {
         "browser": true,
         "es2021": true,
+        "node": true,
         "jest/globals": true
     },
     "extends": [

package/.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {
@@ -48,7 +48,7 @@
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-vue": "^7.17.0",
     "jest": "^26.6.3",
-    "node-sass": "^4.13.1",
+    "sass-embedded": "^1.49.9",
     "postcss-loader": "^3.0.0",
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^8.0.2",

package/src/UserPermissions.js

@@ -23,10 +23,11 @@ export default class UserPermissions {
         let keyParts = key.split('.');
 
         if(keyParts.length !== 2) {
-            throw new Error('TreePermissionsSystem Requires a Dot-Seperated Permissions Key');
+            throw new Error('TreePermissionsSystem Requires a Dot-Seperated Permissions Key: ' + key);
         }
 
         // check for the specific key
+        // console.log(key + " = " + result);
         return this.hasKey(keyParts[0], keyParts[1]);
     }
 

package/src/UserPreferences.test.js

@@ -4,17 +4,11 @@ jest.mock('./AuthApi');
 
 test('gets and sets preferences', async () => {
     UserPreferences.setBuefy({});
-    UserPreferences.authApi.userDetails.mockResolvedValue({
-        user: {
-            preferences: {
-                foo: 'bar',
-                baz: { qux: 'fub '}
-            }
-        }
+    let prefs = new UserPreferences({
+        foo: 'bar',
+        baz: { qux: 'fub '}
     });
 
-    let prefs = await UserPreferences.load();
-
     expect(prefs.get('foo')).toBe('bar');
     expect(prefs.has('fob')).toBe(false);
     expect(prefs.has('baz.qux')).toBe(true);

package/src/api.js

@@ -57,7 +57,7 @@ export class FetchBuilder {
         this.headers.set('X-XSRF-TOKEN', xsrfToken);
     }
 
-    async fetch(url) {
+    async fetchRaw(url) {
         await this.setXsrfTokenHeader()
 
         let v = { ... this};
@@ -72,7 +72,11 @@ export class FetchBuilder {
             }
         }
 
-        let response = await window.fetch(url.toString(), this);
+        return await window.fetch(url.toString(), this);
+    }
+
+    async fetch(url) {
+        let response = await this.fetchRaw(url);
 
         let data = {};
         try {

package/src/components/AuthenticationLog.vue

@@ -132,8 +132,7 @@ export default {
           }
         },
         async fetchData() {
-            this.fetchSessions();
-            this.fetchLogins();
+            await Promise.all([this.fetchSessions(), this.fetchLogins()]);
         },
         geoIP(ip) {
             if(this.ipInfo.has(ip)) {
@@ -154,12 +153,12 @@ export default {
         },
         updateInfoForIp(ip) {
             let geolocationInfo = this.ipInfo.has(ip) ? this.getGeolocationInfo(this.ipInfo.get(ip)) : '';
-            for(let item of this.paginatedItems.items) {
+            for(let item of (this.paginatedItems.items || [])) {
                 if(item.ipAddress === ip) {
                     item.geolocationInfo = geolocationInfo;
                 }
             }
-            for(let item of this.sessions.items) {
+            for(let item of (this.sessions.items || [])) {
               if(item.ipAddress === ip) {
                 item.geolocationInfo = geolocationInfo;
               }
@@ -169,7 +168,6 @@ export default {
             let ua = new UAParser(userAgent);
             let browser = ua.getBrowser();
             let device = ua.getDevice();
-            // console.log(device);
             return browser.name + ' ' + browser.version + ' on ' + ua.getOS().name + ', ' + (device.vendor ? device.vendor : '(unknown device)');
         },
         getGeolocationInfo(data) {

package/src/components/ImportExport.vue

@@ -15,6 +15,7 @@
 <script>
 import {FetchBuilder} from "../api";
 import {API_ROOT} from "../CrudApi";
+import download from "downloadjs";
 
 export default {
     name: "ImportExport",
@@ -26,15 +27,13 @@ export default {
     methods: {
         async processDownload() {
             this.exporting = true;
-            let builder = (new FetchBuilder(this.$buefy, 'post'))
-                .cookies();
-            await builder.setXsrfTokenHeader();
-            let response = await window.fetch(API_ROOT + "import-export/export", { ... builder });
+            let response = await (new FetchBuilder(this.$buefy, 'post'))
+                .cookies()
+                .fetchRaw(API_ROOT + "import-export/export");
             this.$buefy.notification.open({ message: 'Export successful', type: 'is-success', queue: false });
             let blob = await response.blob();
-            let file = window.URL.createObjectURL(blob);
+            download(blob, 'database ' + (new Date()).toLocaleString() + '.zip');
             this.exporting = false;
-            window.location.assign(file);
         }
     }
 }

package/src/components/LegacyPage.vue

@@ -60,9 +60,6 @@ export default {
         legacyPrefix: { type: String, required: true },
         adminPrefix: { type: String, required: true }
     },
-    'watch': {
-        'fullPath': 'onFullPathChanged'
-    },
     data() {
         return {
             loadingPath: null,
@@ -76,6 +73,9 @@ export default {
         loading() { return this.loadingPath !== null; },
         userPreferences() { return this.$store.getters.userPreferences; }
     },
+    'watch': {
+        'fullPath': 'onFullPathChanged'
+    },
     async mounted() {
         this.loadingPath = 'prefs';
 

package/src/components/MainMenu.vue

@@ -0,0 +1,99 @@
+<template>
+    <div v-if="userPermissions">
+        <b-menu-list>
+            <b-menu-item icon="home" tag="router-link" to="/dashboard" label="Dashboard"></b-menu-item>
+        </b-menu-list>
+
+        <b-menu-list v-for="(category, label) in categoriesWithPermission(items)"
+                     :key="label"
+                     :label="label">
+            <b-menu-item v-for="(group, groupLabel) in groupsWithPermission(category)"
+                         :key="groupLabel"
+                         :icon="group.icon"
+                         :tag="userPermissions.has(group.listPermission) ? 'router-link' : null"
+                         :expanded="group.groupPrefix ? $route.fullPath.startsWith(group.groupPrefix) : null"
+                         :to="group.listAction">
+                <template #label>
+                    {{ groupLabel }}
+                    <b-button v-if="userPermissions.has(group.addPermission)"
+                              tag="router-link"
+                              type="is-text"
+                              class="is-pulled-right show-if-active"
+                              :icon-right="group.addIcon"
+                              :to="group.addAction"></b-button>
+                </template>
+                <b-menu-item v-for="(item, itemLabel) in itemsWithPermission(group.items)" :key="itemLabel" :label="itemLabel" tag="router-link" :to="item.to"></b-menu-item>
+            </b-menu-item>
+        </b-menu-list>
+
+        <b-menu-list v-if="userPermissions && userPermissions.hasOneOf(['preferences.getValue', 'users.getList', 'groups.getList', 'importExport.getList'])" label="System">
+            <b-menu-item v-if="userPermissions && userPermissions.has('preferences.getValue')" icon="cogs" tag="router-link" to="/preferences" label="Preferences"></b-menu-item>
+            <b-menu-item v-if="userPermissions && userPermissions.has('users.getList')" icon="users" tag="router-link" to="/users" label="Users and Permissions"></b-menu-item>
+        </b-menu-list>
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: "MainMenu",
+    props: {
+        items: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        userPermissions() { return this.$store.getters.userPermissions; }
+    },
+    methods: {
+        categoriesWithPermission(categories) {
+            return Object.fromEntries(Object.entries(categories).filter(([,category]) => this.userPermissions.hasOneOf(Object.values(category).flatMap((group) => this.getPermissionsForGroup(group))) ));
+        },
+        getPermissionsForGroup(group) {
+            let values = Object.values(group.items).map(s => s.permission);
+            if(group.addPermission) { values.push(group.addPermission); }
+            if(group.listPermission) { values.push(group.listPermission); }
+            return values;
+        },
+        itemsWithPermission(items) {
+            return Object.fromEntries(Object.entries(items).filter(([, item]) => this.userPermissions.has(item.permission)));
+        },
+        groupsWithPermission(groups) {
+            return Object.fromEntries(Object.entries(groups).filter(([, group]) => this.userPermissions.hasOneOf(this.getPermissionsForGroup(group))));
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .show-if-active {
+        visibility: hidden;
+        opacity: 0;
+        padding: 0;
+        transition: visibility 0.2s ease, opacity 0.2s ease;
+        height: auto;
+
+        .router-link-active & {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .menu-list li:hover & {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+
+    .left-navigation-container.is-collapsed .show-if-active {
+        visibility: hidden !important;
+        opacity: 0 !important;
+    }
+</style>
+
+<style>
+.show-if-active .icon:first-child:last-child {
+    margin-left: 0;
+    margin-right: 0;
+}
+</style>

package/src/components/auth/Login.vue

@@ -8,7 +8,7 @@
             </b-notification>
 
             <b-field label="Username" label-position="inside" :type="!submitting && hasFailedLogin ? 'is-danger' : ''">
-                <b-input v-model="username" name="username" ref="username"></b-input>
+                <b-input ref="username" v-model="username" name="username"></b-input>
             </b-field>
 
             <b-field label="Password" label-position="inside" :type="!submitting && hasFailedLogin ? 'is-danger' : ''">
@@ -31,7 +31,7 @@
             <br>
 
             <b-field key="totpCode" label="2FA Code" label-position="inside" :type="!submitting && hasFailedLogin ? 'is-danger' : ''" :message="!submitting && hasFailedLogin ? 'Incorrect code. Try again.' : ''">
-                <b-input v-model="totpCode" name="totpCode" type="number" placeholder="e.g.: 123456" minlength="6" required @keyup.enter.native="submitLogin" ref="totpCode" />
+                <b-input ref="totpCode" v-model="totpCode" name="totpCode" type="number" placeholder="e.g.: 123456" minlength="6" required @keyup.enter.native="submitLogin" />
             </b-field>
 
             <br>

package/src/components/dashboard/EventsPanel.vue

@@ -0,0 +1,20 @@
+<template>
+    <article>
+        <p class="title">Events<b-icon icon="calendar-alt" size="is-medium"></b-icon></p>
+        <p class="subtitle">Promotion for upcoming concerts and events</p>
+        <div class="buttons">
+            <b-button tag="router-link" to="/upcoming-events" icon-left="list">Manage Events</b-button>
+            <b-button tag="router-link" to="/upcoming-events/create" icon-left="plus" type="is-success">Create New Event</b-button>
+        </div>
+    </article>
+</template>
+
+<script>
+export default {
+    name: "EventsPanel"
+}
+</script>
+
+<style scoped lang="scss">
+    @import './panel.scss';
+</style>

package/src/components/dashboard/MainDashboard.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="full-height scroll-container">
+        <div class="has-background-white-ter">
+            <div class="container hero is-medium">
+                <div class="hero-body">
+                    <h1 class="title" style="font-size: 3rem;">
+                        <transition name="fade">
+                            <span v-if="user">Welcome, {{ user.fullName }}</span>
+                        </transition>
+                    </h1>
+                    <br>
+                    <h2 class="subtitle">The Oxygen CMS administration panel allows you to edit the site content, manage events and more.</h2>
+                </div>
+            </div>
+        </div>
+
+        <div class="has-background-white">
+            <div class="container hero">
+                <div class="hero-body">
+                    <section class="tile is-ancestor">
+                        <div class="tile is-parent">
+                            <div class="tile is-child heading-box">
+                                <h2 class="title">Manage site</h2>
+                            </div>
+                        </div>
+                    </section>
+
+                    <div class="grid-loading">
+                        <b-loading :active="!userPermissions" :is-full-page="false"></b-loading>
+                        <transition name="fade">
+                            <section v-if="userPermissions" class="tile is-ancestor">
+                                <div v-for="(group, i) in panels"  :key="i" class="tile is-vertical">
+                                    <div v-if="userPermissions && userPermissions.hasOneOf(group.map(panel => panel.permission))" class="tile is-parent is-vertical">
+                                        <div v-for="panel in group" :key="panel.name" class="tile is-child notification">
+                                            <component :is="panel.component"></component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        </transition>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <component :is="item" v-for="(item, i) in extraRows" :key="i"></component>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "MainDashboard",
+        props: {
+            panels: {
+                type: Array,
+                required: true
+            },
+            extraRows: {
+                type: Array,
+                default: () => { return []; }
+            }
+        },
+        data() {
+            return {
+            }
+        },
+        computed: {
+            userPermissions() { return this.$store.getters.userPermissions; },
+            user() { return this.$store.state.user; }
+        },
+    }
+</script>
+
+<style scoped>
+    .title .icon {
+        margin-left: 1rem;
+    }
+
+    .grid-loading {
+        position: relative;
+        min-height: 30rem;
+    }
+
+    .notification {
+        text-align: center;
+    }
+</style>

package/src/components/dashboard/MediaPanel.vue

@@ -0,0 +1,21 @@
+<template>
+    <article>
+        <p class="title">Photos &amp; Files <b-icon icon="photo-video" size="is-medium"></b-icon></p>
+        <p class="subtitle">Photos, videos, audio, PDFs.</p>
+        <div class="buttons">
+            <b-button tag="router-link" to="/media/list" icon-left="list">Manage Photos & Files</b-button>
+            <b-button tag="router-link" type="is-success" to="/media/list?upload=true" icon-left="upload">Upload</b-button>
+            <b-button tag="router-link" to="/media/responsive-images" type="is-light" icon-left="mail-bulk">Generate Responsive Images</b-button>
+        </div>
+    </article>
+</template>
+
+<script>
+export default {
+    name: "MediaPanel"
+}
+</script>
+
+<style scoped lang="scss">
+    @import './panel.scss';
+</style>

package/src/components/dashboard/PagesPartialsPanel.vue

@@ -0,0 +1,24 @@
+<template>
+    <article>
+        <p class="title">Pages<b-icon icon="file-alt" size="is-medium"></b-icon></p>
+        <p class="subtitle">Manage the content of the website</p>
+        <div class="buttons">
+            <b-button tag="router-link" to="/pages" icon-left="list">Manage Pages</b-button>
+            <b-button tag="router-link" to="/partials" icon-left="puzzle-piece">Manage Partials</b-button>
+        </div>
+        <b-button tag="a" href="/" icon-left="eye" type="is-primary" rounded>View Live Site</b-button>
+    </article>
+</template>
+
+<script>
+export default {
+    name: "PagesPartialsPanel",
+    computed: {
+        userPermissions() { return this.$store.getters.userPermissions; },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import './panel.scss';
+</style>

package/src/components/dashboard/panel.scss

@@ -0,0 +1,8 @@
+.buttons {
+    justify-content: center;
+}
+
+.title .icon {
+    display: inline-block;
+    margin-left: 1rem;
+}

package/src/components/preferences/Preferences.vue

@@ -0,0 +1,82 @@
+<template>
+    <PreferencesList>
+        <template #default="slotProps">
+            <b-tab-item v-if="slotProps.canAccessPrefs(['appearance.themes', 'appearance.pages', 'appearance.events'].concat(getExtraPrefsPermissions('appearance')))" label="Website Theme">
+                <PreferencesThemeChooser @theme-changed="onThemeChanged" />
+                <PreferencesPageTemplates :current-theme="currentTheme" />
+                <PreferencesEventTemplates :current-theme="currentTheme" />
+                <PreferencesSiteAppearance :current-theme="currentTheme" />
+                <component :is="pref.component" v-for="pref in getExtraPrefs('appearance')" :key="pref.key" :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="slotProps.canAccessPrefs(getExtraPrefsPermissions('external'))" label="External Integrations">
+                <component :is="pref.component" v-for="pref in getExtraPrefs('external')" :key="pref.key" :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="slotProps.canAccessPrefs(['modules.auth'])" label="Authentication & Security">
+                <PreferencesAuthentication :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="slotProps.canAccessPrefs(['appearance.auth'])" label="Admin Look & Feel">
+                <PreferencesAdminAppearance :current-theme="currentTheme" />
+            </b-tab-item>
+            <b-tab-item v-if="userPermissions.has('importExport.getExport')" label="Website Data">
+                <ImportExport />
+            </b-tab-item>
+        </template>
+    </PreferencesList>
+</template>
+
+<script>
+
+import PreferencesList from './PreferencesList.vue';
+import PreferencesPageTemplates from './PreferencesPageTemplates.vue';
+import PreferencesEventTemplates from './PreferencesEventTemplates.vue';
+import PreferencesThemeChooser from './PreferencesThemeChooser.vue';
+import PreferencesAuthentication from './PreferencesAuthentication.vue';
+import PreferencesAdminAppearance from './PreferencesAdminAppearance.vue';
+import PreferencesSiteAppearance from './PreferencesSiteAppearance.vue';
+import ImportExport from '../ImportExport.vue';
+
+export default {
+    name: "Preferences",
+    components: {
+        PreferencesList,
+        PreferencesPageTemplates,
+        PreferencesEventTemplates,
+        PreferencesThemeChooser,
+        PreferencesAuthentication,
+        PreferencesAdminAppearance,
+        PreferencesSiteAppearance,
+        ImportExport
+    },
+    props: {
+        extraPrefs: {
+            type: Object,
+            default: () => { return {}; }
+        }
+    },
+    data() {
+        return {
+            currentTheme: null,
+        }
+    },
+    computed: {
+        userPermissions() {
+            return this.$store.getters.userPermissions;
+        }
+    },
+    methods: {
+        onThemeChanged(currentTheme) {
+            this.currentTheme = currentTheme;
+        },
+        getExtraPrefsPermissions(category) {
+            return (this.extraPrefs[category] ?? []).map(pref => pref.key);
+        },
+        getExtraPrefs(category) {
+            return (this.extraPrefs[category] ?? []);
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/icons.js

@@ -73,7 +73,8 @@ import {
     faLandmark,
     faFolderOpen,
     faImages,
-    faMinusCircle
+    faMinusCircle,
+    faCalendarPlus, faPaperPlane
 } from "@fortawesome/free-solid-svg-icons";
 
 export const addIconsToLibrary = () => {
@@ -86,5 +87,5 @@ export const addIconsToLibrary = () => {
         faFileExcel, faFileCsv, faChevronCircleDown, faChevronCircleUp, faTrash,
         faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faUser, faFolder, faHome, faFilePdf, faSignOutAlt, faTag,
         faFolderPlus, faTimes, faQuestionCircle, faFileUpload, faLandmark,
-        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages);
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages, faCalendarPlus, faPaperPlane);
 };

package/src/main.js

@@ -12,6 +12,7 @@ import { AuthRoutes, makeAuthenticatedRoute } from "./routes";
 import createStore from "./store/index";
 import { checkAuthenticated } from "./AuthApi";
 import Error404 from "./components/Error404.vue";
+import MainMenu from "./components/MainMenu.vue";
 
 /**
  * Creates the Vue.js Oxygen application, allowing for a few points of customization (i.e.: adding modules)
@@ -21,13 +22,13 @@ import Error404 from "./components/Error404.vue";
  * @param beforeMount
  */
 export default class OxygenUI {
-    app;
-
     constructor(Vue) {
+        this.app = null;
         this.Vue = Vue;
         this.authenticatedRoutes = []
         this.unauthenticatedRoutes = []
-        this.rootComponents = { App }
+        this.mainMenuItems = {}
+        this.rootComponents = { App, MainMenu }
         this.beforeMountHooks = []
     }
 
@@ -41,6 +42,17 @@ export default class OxygenUI {
         this.authenticatedRoutes.push(route);
     }
 
+    addMainMenuGroup(category, group) {
+        if(!this.mainMenuItems[category]) {
+            this.mainMenuItems[category] = {};
+        }
+        if(!group.items) {
+            group.items = {};
+        }
+        this.mainMenuItems[category][group.name] = group;
+        return group;
+    }
+
     addUnauthenticatedRoutes(routes) {
         for (let route of routes) {
             this.unauthenticatedRoutes.push(route);
@@ -92,6 +104,9 @@ export default class OxygenUI {
 
         this.app = new this.Vue({
             router: router,
+            data: {
+                mainMenuItems: this.mainMenuItems
+            },
             components: this.rootComponents,
             store
         });
@@ -110,3 +125,5 @@ export default class OxygenUI {
     }
 }
 
+export const WEB_CONTENT = 'Web Content';
+

package/src/modules/LegacyPages.js

@@ -1,6 +1,40 @@
 import LegacyPage from "../components/LegacyPage.vue";
+import { WEB_CONTENT } from "../main.js";
 
 export default function(ui) {
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Pages',
+        icon: 'file-alt',
+        listAction: '/pages',
+        listPermission: 'pages.getList',
+        addIcon: 'plus',
+        addPermission: 'pages.postCreate',
+        addAction: '/pages/create',
+        items: {
+        }
+    });
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Partials',
+        icon: 'puzzle-piece',
+        listAction: '/partials',
+        listPermission: 'partials.getList',
+        addIcon: 'plus',
+        addPermission: 'partials.postCreate',
+        addAction: '/partials/create',
+        items: {
+        }
+    });
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Events',
+        icon: 'calendar-alt',
+        listAction: '/upcoming-events',
+        listPermission: 'upcomingEvents.getList',
+        addIcon: 'calendar-plus',
+        addPermission: 'upcomingEvents.postCreate',
+        addAction: '/upcoming-events/create',
+        items: {
+        }
+    });
     ui.addAuthenticatedRoutes([
         {
             // will match everything, try to render a legacy Oxygen page...

package/src/modules/Media.js

@@ -1,7 +1,22 @@
 import MediaPage from "../components/media/MediaPage.vue";
 import MediaResponsiveImages from "../components/media/MediaResponsiveImages.vue";
+import {WEB_CONTENT} from "../main";
 
 export default function(ui) {
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Photos & Files',
+        icon: 'photo-video',
+        groupPrefix: '/media',
+        addAction: '/media/list/?upload=true',
+        addIcon: 'upload',
+        addPermission: 'media.postCreate',
+        listAction: '/media/list',
+        listPermission: 'media.getList',
+        items: {
+            'Deleted Photos & Files': { to: '/media/trash', permission: 'media.getList' },
+            'Responsive Images': { to: '/media/responsive-images', permission: 'media.postMakeResponsive' }
+        }
+    });
     ui.addAuthenticatedRoutes([
         {
             path: 'media/list/:currentPath(.*)?',

package/src/styles/_variables.scss

@@ -10,7 +10,6 @@ $menu-item-active-color: lighten($grey, 4%);
 
 // $menu-item-hover-background-color: rgba(255, 255, 255, 0.1);
 // $menu-item-hover-color: $white-bis;
-
 //$navbar-item-active-color: #fff;
 //$navbar-item-hover-background-color: #f3f3f9;
 //

package/src/styles/app.scss

@@ -5,7 +5,7 @@
 @import "~buefy/src/scss/buefy";
 
 .navbar {
-  box-shadow: 0px 0px 2px $dark;
+  box-shadow: 0 0 2px $dark;
 }
 
 .navbar-item {