Merge pull request #26 from Sybit-Education/main

main --> dev, wrong branch

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.0",
     "bootstrap": "^4.5.3",

src/App.vue

@@ -1,9 +1,31 @@
 <template>
-  <div id="app" class="container">
+  <div id="app">
+    <sitenav />
+    <div class="container" :class="{'main-container': showNavbar}">
     <router-view/>
     <notifications group="error" position="top center"/>
+    </div>
   </div>
 </template>
 
 <script>
+import sitenav from '@/components/base/Sitenav'
+
+export default {
+  components: {
+    sitenav
+  },
+  computed: {
+    showNavbar () {
+      return this.$route.meta.displayNavbar ?? true
+    }
+  }
+}
 </script>
+
+<style lang="sass" scoped>
+@import 'assets/variables'
+.main-container
+  margin-left: $sitenav-size
+  width: auto
+</style>

src/assets/app.sass

@@ -5,9 +5,7 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss'
 @import 'node_modules/bootstrap-vue/src/index.scss'
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap')
-
-
-$primary: #b51683
+@import 'variables'
 
 
 body

src/assets/variables.sass

@@ -0,0 +1,5 @@
+// colors:
+$primary: #b51683
+
+//layout
+$sitenav-size: 200px

src/components/base/DashboardCard.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+  <b-card
+    :img-src="this.imgLink"
+    img-alt="Card Image"
+    img-height="200"
+    :title="this.title"
+    class="card my-4"
+    @click="router()"
+  >
+    <b-card-text>
+      {{text}}
+    </b-card-text>
+  </b-card>
+</div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'title'
+    },
+    text: {
+      type: String,
+      default: 'text'
+    },
+    link: {
+      type: String,
+      default: 'link'
+    },
+    imgLink: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    router () {
+      this.$router.push(this.link)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card {
+transition: box-shadow .2s ;
+transition: all .2s ease;
+}
+.card:hover {
+  transform: scale(1.03);
+  transition: all .2s ease;
+  box-shadow: 0 0 30px rgba(33,33,33,.2);
+  cursor: pointer;
+}
+</style>