added: header fixed & sidebar fixed variant in Full.vue (issue: #15)

Author: adenvt

.php_cs

@@ -1,7 +1,11 @@
 <?php
 
 $finder = PhpCsFixer\Finder::create()
-    ->exclude('vendor')
+    ->exclude([
+        'vendor',
+        'storage',
+        'bootstrap/cache',
+    ])
     ->in(__DIR__)
 ;
 

composer.lock

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "dev": "npm run development",
     "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
@@ -30,25 +30,25 @@
     "eslint": "^5.12.0",
     "eslint-config-adenvt": "^2.1.0",
     "eslint-config-standard": "^12.0.0",
-    "eslint-formatter-pretty": "^2.0.0",
+    "eslint-formatter-pretty": "^2.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-unicorn": "^7.0.0",
     "eslint-plugin-varspacing": "^1.2.1",
     "eslint-plugin-vue": "^5.1.0",
-    "laravel-mix": "^4.0.13",
+    "laravel-mix": "^4.0.14",
     "node-sass": "^4.11.0",
     "offline-plugin": "^5.0.6",
     "pre-commit": "^1.2.2",
     "prettier": "1.15.3",
     "resolve-url-loader": "^3.0.0",
-    "sass": "^1.15.3",
+    "sass": "^1.16.1",
     "sass-loader": "^7.1.0",
-    "stylelint": "^9.9.0",
+    "stylelint": "^9.10.0",
     "stylelint-config-sass-guidelines": "^5.3.0",
-    "stylelint-scss": "^3.4.4",
+    "stylelint-scss": "^3.5.1",
     "uglifyjs-webpack-plugin": "^2.1.1",
     "vue-loader": "^15.5.1",
     "vue-template-compiler": "^2.6.6",
@@ -74,10 +74,10 @@
     "vue-loading-spinner": "^1.0.11",
     "vue-notification": "^1.3.14",
     "vue-router": "^3.0.2",
-    "vue-sweetalert2": "^1.6.3",
+    "vue-sweetalert2": "^1.6.4",
     "vuejs-datepicker": "^1.5.4",
     "vuelidate": "^0.7.4",
-    "vuex": "^3.0.1",
+    "vuex": "^3.1.0",
     "vuex-easy-access": "^3.1.5"
   },
   "pre-commit": [

package-lock.json

@@ -62,7 +62,19 @@ import HeaderDropdown from './HeaderDropdown.vue'
 export default {
   name      : 'CHeader',
   components: { HeaderDropdown },
-  methods   : {
+  props     : {
+    fixed: {
+      type   : Boolean,
+      default: true,
+    },
+  },
+  mounted () {
+    if (this.fixed) $('body').addClass('header-fixed')
+  },
+  beforeDestroy () {
+    $('body').removeClass('header-fixed')
+  },
+  methods: {
     sidebarToggle (e) {
       e.preventDefault()
       document.body.classList.toggle('sidebar-hidden')

package.json

@@ -134,6 +134,16 @@ export default {
       required: true,
       default : () => [],
     },
+    fixed: {
+      type   : Boolean,
+      default: false,
+    },
+  },
+  mounted () {
+    if (this.fixed) $('body').addClass('sidebar-fixed')
+  },
+  beforeDestroy () {
+    $('body').removeClass('sidebar-fixed')
   },
   methods: {
     handleClick (e) {

resources/js/coreui/components/Header/Header.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="app">
-    <app-header />
+    <app-header :fixed="fixedHeader || fixedSidebar" />
     <div class="app-body">
-      <sidebar :nav-items="nav" />
+      <sidebar
+        :nav-items="nav"
+        :fixed="fixedSidebar"
+      />
       <notifications
         :style="{ 'margin-top': offset }"
         class="custom-notifications"
@@ -34,8 +37,10 @@ export default {
   },
   data () {
     return {
-      nav   : nav.items,
-      offset: true,
+      nav         : nav.items,
+      offset      : true,
+      fixedHeader : true,
+      fixedSidebar: true,
     }
   },
   computed: {
@@ -47,9 +52,11 @@ export default {
     },
   },
   mounted () {
+    $('body').addClass('app sidebar-lg-show pace-done')
     $(window).on('scroll', this.setPosNotify)
   },
   beforeDestroy () {
+    $('body').removeClass('app sidebar-lg-show pace-done')
     $(window).off('scroll', this.setPosNotify)
   },
   methods: {

resources/js/coreui/components/Sidebar/Sidebar.vue

@@ -1,4 +1,4 @@
-@import '~vue-loading-spinner/dist/vue-loading-spinner.css';
+// @import '~vue-loading-spinner/dist/vue-loading-spinner.css';
 
 .spinner-container {
   align-items: center;