Components and loaders.

client/package.json

@@ -26,7 +26,9 @@
     "vue": "^2.5.13",
     "vue-loader": "^13.7.0",
     "vue-template-compiler": "^2.5.13",
-    "css-loader": "^0.28.9"
+    "css-loader": "^0.28.9",
+    "sass-loader": "^6.0.6",
+    "node-sass": "^4.7.2"
   },
   "scripts": {
     "build": "webpack --progress --colors",

client/src/index.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+const styles = require('./styles/index.scss');
 const { Global, Logger, Utils, PluginManager, BDIpc, WebpackModules, SocketProxy, Events } = require('./modules');
 //const { UI } = require('./modules/ui/index.jsx');
 
@@ -22,7 +23,13 @@ class BetterDiscord {
             const { UI } = require('./modules/ui/vueui.js');
             this.ui = new UI();
         });
-        // this.UI = new UI();
+
+        //Inject styles to head for now
+        const style = document.createElement('style');
+        style.id = 'bd-main';
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(styles));
+        document.head.appendChild(style);
     }
 
 }

client/src/modules/ui/components/bdsettings.vue

@@ -1,11 +1,48 @@
 <template>
     <div class="bd-settings" :class="{active: isActive}">
+        <SidebarView>
+            <Sidebar slot="sidebar">
+                <SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
+            </Sidebar>
+        </SidebarView>
+        
     </div>
 </template>
 
 <script>
+
+    const sidebarItems = [
+        { text: 'Internal', t: 'header' },
+        { id: 0, contentid: "core", text: 'Core', active: false, t: 'button' },
+        { id: 1, contentid: "ui", text: 'UI', active: false, t: 'button' },
+        { id: 2, contentid: "emotes", text: 'Emotes', active: false, t: 'button' },
+        { id: 3, contentid: "css", text: 'CSS Editor', active: false, t: 'button' },
+        { text: 'External', t: 'header' },
+        { id: 4, contentid: "plugins", text: 'Plugins', active: false, t: 'button' },
+        { id: 5, contentid: "themes", text: 'Themes', active: false, t: 'button' }
+    ];
+
+    function itemOnClick(id) {
+        console.log(`Item Clicked! ${id}`);
+    }
+
+
+    import { SidebarItem, SidebarView, Sidebar } from './sidebar/index.js';
     export default {
-        props: ['isActive']
+        props: ['isActive'],
+        components: {
+            SidebarItem,
+            SidebarView,
+            Sidebar
+        },
+        data() {
+            return {
+                sidebarItems
+            }
+        },
+        methods: {
+            itemOnClick
+        }
     }
 </script>
 

client/src/modules/ui/components/sidebar/Button.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">{{item.text}}</div>
+</template>
+<script>
+    export default {
+        props: ['item', 'onClick']
+    }
+</script>
+<style lang="scss">
+    .bd-item {
+        border-radius: 3px;
+        margin-bottom: 2px;
+        padding-bottom: 6px;
+        padding-top: 6px;
+        padding: 6px 10px;
+        color: #b9bbbe;
+        cursor: pointer;
+        font-size: 17px;
+        line-height: 20px;
+        position: relative;
+        flex-shrink: 0;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
+        &:hover
+
+    {
+        background: rgba(0,0,0,0.4);
+    }
+
+    &.active {
+        color: #FFF;
+        background: rgba(0,0,0,0.4);
+    }
+
+    }
+</style>

client/src/modules/ui/components/sidebar/Header.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class='bd-header'>{{item.text}}</div>
+</template>
+<script>
+    export default {
+        props: ['item']
+    }
+</script>
+<style>
+.bd-header {
+    padding: 6px 0;
+    margin-left: 10px;
+    margin-top: 15px;
+    color: rgba(255,255,255,0.15);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    text-transform: uppercase;
+    font-weight: 600;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
+}
+</style>

client/src/modules/ui/components/sidebar/Item.vue

@@ -0,0 +1,17 @@
+<template>
+    <SidebarButton v-if="item.t == 'button'" :item="item" :onClick="onClick" />
+    <SidebarHeader v-else-if="item.t == 'header'" :item="item" />
+</template>
+<script>
+
+import { SidebarHeader, SidebarButton } from './';
+
+export default {
+	components: {
+        SidebarHeader,
+        SidebarButton
+	},
+    props: ['item', 'onClick']
+}
+
+</script>

client/src/modules/ui/components/sidebar/Sidebar.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class='bd-sidebar'>
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+<style lang="scss">
+    .bd-sidebar {
+        padding: 0;
+    }
+
+    .logo {
+        height: 30px;
+        margin-top: 10px;
+        margin-left: 10px;
+    }
+
+    h1 {
+        font-size: 16px;
+        font-weight: 500;
+        color: #4D7DEC;
+        margin-left: 10px;
+        border-bottom: 1px solid rgba(255,255,255,0.06);
+        padding-bottom: 13px;
+        text-transform: uppercase;
+    }
+</style>

client/src/modules/ui/components/sidebar/View.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class='bd-sidebar-view' :class="{active: contentVisible, animating: animating}">
+        <div class='bd-sidebar-region'>
+            <div class='bd-settingsWrap'>
+                <div class='bd-scroller'>
+                    <slot name="sidebar" />
+                </div>
+            </div>
+        </div>
+        <div class='bd-content-region'>
+            <slot name="content" />
+            <div class='bd-content-tools' />
+        </div>
+    </div>
+</template>
+<script>
+export default {
+  props: {
+    contentVisible: {
+      default: false
+    },
+    animating: {
+      default: false
+    }
+  }
+}
+</script>
+<style>
+    .bd-settingsWrap {
+        padding: 20px 15px 15px 15px;
+    }
+
+    .bd-scroller {
+        width: 100%;
+        padding-right: 20px;
+    }
+
+    .bd-sidebar-view {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        box-sizing: border-box;
+    }
+
+        .bd-sidebar-view:not(.active) {
+        }
+
+        .bd-sidebar-view .bd-content-region {
+            transform: translateX(-100%);
+        }
+
+            .bd-sidebar-view .bd-content-region .bd-content-tools {
+                width: 100px;
+                min-width: 100px;
+            }
+
+        .bd-sidebar-view.active .bd-content-region {
+            animation: slidein .6s forwards;
+        }
+
+        .bd-sidebar-view .bd-content > div:not(.active) {
+            opacity: 0;
+        }
+
+        .bd-sidebar-view .bd-content .animating {
+            animation: fade-out .4s forwards;
+        }
+
+        .bd-sidebar-view .bd-content {
+            animation: fade-in .4s forwards;
+        }
+
+    .bd-sidebar-region {
+        background: #202225;
+        -webkit-box-flex: 1;
+        -webkit-box-pack: end;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        padding-top: 50px;
+        z-index: 5;
+    }
+
+    .bd-content-region {
+        background: #2F3136;
+        -ms-flex: 1 1 800px;
+        -ms-flex-align: start;
+        -webkit-box-align: start;
+        -webkit-box-flex: 1;
+        align-items: flex-start;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        flex: 1 1 70%;
+        position: relative;
+        z-index: 1;
+        padding-left: 15px;
+    }
+
+    .bd-sidebar-view .bd-settingsWrap {
+        display: flex;
+        height: 100%;
+        -webkit-box-flex: 1;
+        flex: 1;
+        min-height: 1px;
+        box-sizing: border-box;
+    }
+
+        .bd-sidebar-view .bd-settingsWrap .scroller {
+            display: flex;
+            height: 100%;
+            -webkit-box-flex: 1;
+            flex: 1;
+            min-height: 1px;
+            contain: layout;
+            overflow-y: scroll;
+        }
+
+    @keyframes slidein {
+        0% {
+            transform: translateX(-100%);
+            opacity: .2;
+        }
+
+        70% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+
+        100% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slideout {
+        0% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+
+        100% {
+            transform: translateX(-100%);
+            opacity: .2;
+        }
+    }
+
+    @keyframes slideoutin {
+        0% {
+            transform: translateX(-10%);
+            opacity: 1;
+        }
+
+        20% {
+            transform: translateX(-100%);
+            opacity: .2;
+        }
+
+        70% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+
+        100% {
+            transform: translateX(-10%);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-out {
+        0% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+</style>

client/src/modules/ui/components/sidebar/index.js

@@ -0,0 +1,5 @@
+export { default as SidebarHeader } from './Header.vue';
+export { default as SidebarButton } from './Button.vue';
+export { default as SidebarItem } from './Item.vue';
+export { default as SidebarView } from './View.vue';
+export { default as Sidebar } from './Sidebar.vue';

client/webpack.config.js

@@ -17,6 +17,12 @@ const vueLoader = {
     loader: 'vue-loader'
 }
 
+const scssLoader = {
+    test: /\.scss$/,
+    exclude: /node_modules/,
+    loader: ['css-loader', 'sass-loader']
+}
+
 module.exports = {
     entry: './src/index.js',
     output: {
@@ -24,7 +30,7 @@ module.exports = {
         filename: 'betterdiscord.client.js'
     },
     module: {
-        loaders: [jsLoader, vueLoader]
+        loaders: [jsLoader, vueLoader, scssLoader]
     },
     externals: {
         'electron': 'window.require("electron")'