<!-- main wrapping component -->
<q-layout view="Hhh Lpr lFf">
  <q-window-resize-observable @resize="fnOnScreenResize"></q-window-resize-observable>
  <q-layout-header  >
    <q-toolbar color="grey-3">

      <!--側滑清單，圖片 logo -->
      <q-toolbar-title class="text-left q-pa-xs" style="height: 100%; display: flex; align-items: center;" >
         <q-btn flat dense round 
          @click="MenuSetup.opened = !MenuSetup.opened" 
          aria-label="Menu" 
          icon="menu" 
          color="black"
          class="q-mr-sm"
          :title="MenuSetup.opened ? $t('layout.collapse_menu') : $t('layout.collapse_menu')"
          ></q-btn>
          <img :src="WebSetup.logoImg" border="0" style="height: 80%; width: auto; cursor: pointer; " @click="FnPageSwitch(WebSetup.homeHref)"> {{WebSetup.company}}
      </q-toolbar-title>

      <!-- 標題 -->
      <q-toolbar-title class="w3-text-black h4 text-center">
        {{ WebSetup.caption }}
      </q-toolbar-title>

      <!-- 時間，登出 -->
      <q-toolbar-title class="text-right q-pa-xs" style="display: flex; justify-content: flex-end; align-items: center;">
        <span class="q-mr-md w3-text-black" style="text-align: right; font-size: 1rem">{{SystemTime}}</span>
        <change-password class="q-mr-md"></change-password>
        <more-menu></more-menu>
      </q-toolbar-title>
      
    </q-toolbar>
  </q-layout-header>

  <!-- optional -->
  <q-layout-drawer :overlay="VarMenuIsOverlay" side="left" v-model="MenuSetup.opened">
    <!-- MENU -->
    <main-menu :page-name="VarMenuPage" :menu="VarMenu"></main-menu>
  </q-layout-drawer>
  <q-page-container>
  <!-- 要加上 div q-resize-observable menu 縮放時, 才有效 //-->
  <div :style="VarPageContainerCss">
  <q-resize-observable @resize="fnOnContainerResize"></q-resize-observable>