<!-- 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">
      <q-btn
          flat
          dense
          round
          @click="MenuSetup.opened = !MenuSetup.opened"
          aria-label="Menu"
          icon="menu"
          color="black"
          :title="MenuSetup.opened ? $t('layout.collapse_menu') : $t('layout.collapse_menu')"
        ></q-btn>
      <q-toolbar-title class="w3-text-black w3-xlarge">{{$t("menu."+VarMenuPage)}}</q-toolbar-title>
      <change-password ></change-password>
      <more-menu></more-menu>
    </q-toolbar>
  </q-layout-header>

  <!-- optional -->
  <q-layout-drawer :width="280" :overlay="VarMenuIsOverlay" style="width:200px" 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>