VwwQmvw

index.html

<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

<div id="q-app">
 

 <q-layout view="hHh LpR lFf" >
    <!-- this view put header and footer fixed but tab is not fixed yet-->
    <q-page-container class="q-pa-lg q-my-lg">
      <q-page padding>
      <transition
  enter-active-class="animated fadeIn"
  appear
>
      <q-header :reveal="false">
        <q-toolbar inverted class="navBar">
          <q-btn
            flat
            round
            style="font-size: 1.2rem;"
            color="white"
            icon="menu"
            @click="left = !left"
          ></q-btn>
          
          <q-toolbar-title class="txtShamagri">shamagri</q-toolbar-title>
          
          <!-- <q-btn flat round color="grey-1" icon="search" 
          v-modal="mobileSearchBoxToggle"  @click="mobileSearchBoxToggle = !mobileSearchBoxToggle" 
          class="search-box_toggle-btn"></q-btn> -->
         
          
          <q-btn outline color="white" class="q-mr-sm" >Login</q-btn>
          <!-- notification is also available but i need number of notification on top of the icon or change in color  -->
        </q-toolbar>
        
        
      </q-header>
    </transition>
<q-drawer
           v-model="left"
          :width="200"
          :breakpoint="500"
          show-if-above
          bordered
          content-class="bg-grey-3"
        >
          <q-scroll-area class="fit">
            <q-list v-for="(menuItem, index) in menuList" :key="index">
              <q-item :to="menuItem.route" clickable :active="menuItem.label === 'Outbox'" v-ripple exact>
                <q-item-section avatar>
                  <img v-if="menuItem.iconSrc" :src="menuItem.iconSrc" alt="Icon" width="28" height="28">
                  <q-icon :name="menuItem.icon" ></q-icon>
                </q-item-section>
                <q-item-section>
                  {{ menuItem.label }}
                </q-item-section>
              </q-item>
  
             <q-separator v-if="menuItem.separator" ></q-separator>
  
            </q-list>
          </q-scroll-area>
        </q-drawer>
      <div class="content-wrapper">
        <div class="row card-container q-mb-md">
        <q-card inline class="my-card col q-my-sm">
          <div>
              <q-card-section class="relative-position">
                <div class="ellipsis">Expenses(March)</div>
              </q-card-section>
            <q-card-section>5000</q-card-section>
          </div>
        </q-card>
                  <q-separator inset ></q-separator>
        <q-card inline class="my-card col q-my-sm">
          <div>
            <q-card-section class="relative-position">
              <div class="ellipsis">Sales(March)</div>
            </q-card-section>
            <q-card-section>5000</q-card-section>
          </div>
        </q-card>
                  <q-separator inset ></q-separator>
        <q-card inline class="my-card col q-my-sm">
          <div>
            <q-card-section class="relative-position">
            <div class="ellipsis">Profit(March)</div>
          </q-card-section>
          <q-card-section>5000</q-card-section>
          </div>
        </q-card>
       </div>   
          <div class="chart row">
             <div class="col-12" v-if="show">
					<vue-apex-charts
						 type="area"
					 width="100%" height="500" :options="chartOptions" :series="series"></vue-apex-charts>
            </div>
          </div>
      </div>
      </q-page>

    </q-page-container>
    
  </q-layout>

  
</div>

script.js

const store = new Vuex.Store({
    state: {
      
        left: false,
			  toggleTheme: false,
			  headerReveal: false,
			 checkedNames: ['Jack', 'Mike']
    },
    mutations: {
				setLeft (state, val) {
    state.left = val
		},
		setToggleTheme  (state, val)  {
				state.toggleTheme = val
		},
		setHeader (state, val)  {
				state.header = val
		},



    },
    actions: {
       
    }
})

new Vue({
store,
  el: '#q-app',
	 components: {
  	VueApexCharts
  },
  data: function () {
    return {
      show: false,
        changeTheme: false,
      searchBox: "",
      mobileSearchBoxToggle: false,
      drawer:true,
      menuList : [
  {
    icon: 'face',
    label: 'Profile',
    route: '/profile',
    separator: true
  },
  {
    icon: 'home',
    label: 'Home',
    route: '/',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Goods',
    route: '/my_products',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Services',
    route: '/my_services',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Measurement',
    route: '/measurement',
    separator: true
  },
  {
    iconSrc: '',
    label: 'Bought',
    route: '/payment_bought',
    separator: false
  },
  {
    iconSrc: '',
    label: 'Sold',
    route: '/payment_sold',
    separator: true
  },
  {
    icon: 'settings',
    label: 'Settings',
    route: '/settings',
    separator: false
  },
  {
    icon: 'logout',
    label: 'Logout',
    route: '/logout',
    separator: false
  }
],
      chartOptions: {          
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth'
        },
        xaxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        },
        tooltip: {
            fixed: {
                enabled: false,
                position: 'top'
            }
        }
      },
			 window:{
        width: 0
      },
      series: [{
          name: 'Expenses',
          data: [31, 40, 28, 51, 42, 109, 100]
      }, {
          name: 'Sales',
          data: [11, 32, 45, 32, 34, 52, 41]
      }]  
    }
  },
  methods: {
  	notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
	},
  mounted() {
    this.$nextTick(() => { this.show = true })
  },
	    computed: {
        checkedNames: {
            get() {
                return this.$store.state.checkedNames
            },
            set(str) {
                this.$store.dispatch('updateChecked', str)
            }
        },
				   header: {
      get() {
        return this.$store.state.layoutDemo.header;
      },
      set(val) {
        this.$store.commit("layoutDemo/setHeader", val);
      }
    },
    left: {
      get() {
        return this.$store.state.left;
      },
      set(val) {
        this.$store.commit("setLeft", val);
      }
    },
    themeToggle: {
      get() {
        return this.$store.state.toggleTheme;
      },
      set(val) {
        this.$store.commit("setToggleTheme", val);
      }
    },
    }
})

vwwqmvw.markdown

VwwQmvw

A Pen by Teguh Badru Salam on CodePen.

License.