<template>
  <div class="flex-column layout-wrap">
    <Header></Header>
    <Menu @itemSelected="handleItemSelected"></Menu>
    <div class="wrapper flex" :class="loginUser != null ? 'main' : 'login'">
      <SideMenu :selectedId="selectedId" class="gd-2"></SideMenu>
      <Login v-if="!isUserLoggedIn" @login="handleLogin" />

      <router-view v-else />
    </div>
  </div>
</template>

<script>
import Header from '../pages/layout/Header.vue';
import Menu from '../pages/layout/Menu.vue';
import SideMenu from '../pages/layout/sideMenu.vue';
// import axios from 'axios';
import Login from './login/Login.vue';

const App = {
  data: () => {
    return {
      selectedId: true,
      SideMenu: true,
      isUserLoggedIn: true,
    }
  },
  methods: {
    handleItemSelected(id) {
      this.selectedId = id;
    },
    handleLogin() {
      this.isUserLoggedIn = true;
    }

  },
  watch: {

  },
  computed: {

  },
  components: {
    'Header': Header,
    'Menu': Menu,
    'SideMenu': SideMenu,
    'Login': Login,
  },
  mounted() {
    console.log('Vue mounted');

  }
}

export default App;
</script>
<style></style>