monacaでタブバーが混在したページでサイドメニューを表示させたい

前提・実現したいこと

monacaを使いアプリ作成をはじめました。
サイドメニューとタブバーを組み合わせたテンプレートを作ってみたのですが、
サイドメニューがうまく表示されません。
まだmonacaのテンプレートの理解が足りないのかと思いますが、
サイドメニューが表示されるよう問題点をどうかご教示お願いいたします。

発生している問題・エラーメッセージ

実機（iOS）monaca Debuggerで確認したのですがエラーメッセージ等はで出ておりません。

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }


    document.addEventListener("init", function(event) {
      var page = event.target;
      if(page.id === "home-page"){
        //スプリッターの設定
        window.fn = {};

        window.fn.open = function() {
          var menu = document.getElementById('menu');
          menu.open();
        };

        window.fn.load = function(page) {
          var content = document.getElementById('content');
          var menu = document.getElementById('menu');
          content.load(page)
            .then(menu.close.bind(menu));
        };
      }
    });

    //ログインボタンクリック
    function login(){
          navi.pushPage("home.html");
    }

  </script>
</head>
<body>

  <ons-navigator id="navi" page="login.html"></ons-navigator>

  <template id="login.html">
    <ons-page id="login-page">
      <div style="text-align: center; margin-top: 20px;">
        <p><ons-input id="username" modifier="underbar" type="email" placeholder="ユーザー名" float></ons-input></p>
        <p><ons-input id="password" modifier="underbar" type="password" placeholder="パスワード" float></ons-input></p>
        <p>
          <label class="left"><ons-checkbox input-id="check-1" id="chk-username"></ons-checkbox></label>
          <label for="check-1" class="center">メールアドレスを保存する</label>
        </p>
        <p>
          <label class="left"><ons-checkbox input-id="check-2" id="chk-password"></ons-checkbox></label>
          <label for="check-2" class="center">パスワードを保存する</label>
        </p>
        <div id="message" style="color:red;"></div>
        <p style="margin: 30px;">
          <ons-button id="send" onclick="login()" modifier="large">ログイン</ons-button>
        </p>
      </div>
    </ons-page>
  </template>

  <template id="home.html">
    <ons-page id="home-page">
      <ons-splitter>
  <ons-splitter-side id="menu" side="top" width="220px"  swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('top.html')" tappable>
          ホーム
        </ons-list-item>
        <ons-list-item onclick="fn.load('mail.html')" tappable>
          お知らせ
        </ons-list-item>
        <ons-list-item onclick="fn.load('att.html')" tappable>
          連絡
        </ons-list-item>
        <ons-list-item onclick="fn.load('setting.html')" tappable>
          設定
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="top.html"></ons-splitter-content>
</ons-splitter>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()"><ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center" id="toolbar-title"></div>
      </ons-toolbar>
      <ons-tabbar position="bottom" swipeable>
        <ons-tab label="ホーム" page="top.html" icon="ion-ios-home, material:md-home" active></ons-tab>
        <ons-tab label="お知らせ" page="mail.html" icon="ion-ios-mail, material:md-inbox"></ons-tab>
        <ons-tab label="連絡" page="att.html" icon="ion-ios-person, material:md-face"></ons-tab>
        <ons-tab label="設定" page="setting.html" icon="ion-ios-settings, material:md-settings">
        </ons-tab>
      </ons-tabbar>
    </ons-page>
  </template>

  <template id="top.html">
    <ons-page id="top-page">
      トップページ
    </ons-page>
  </template>

  <template id="mail.html">
    <ons-page>
      お知らせページ
    </ons-page>
  </template>

  <template id="att.html">
    <ons-page>
      連絡ページ
    </ons-page>
  </template>

  <template id="setting.html">
    <ons-page>
      設定ページ
    </ons-page>
  </template>

</body>
</html>