OnsenUIのons-splitterで、画面の幅によりサイドメニューの表示状態を切り替えたい

###前提・実現したいこと
初めて質問します。

現在、以下の環境で、Webアプリを作成してます。

OnsenUI : v2.4.2
ngx-onsenui : v4.0.0-rc.1
Angular : v4.2.4

その中で、ons-splitterコンポーネントでハンバーガーメニューを作成してますが、画面の幅が800px以上の場合は、コンテンツの左側にサイドメニューを
常に開いた状態、それ以外の場合は、アイコンクリックでサイドメニューを開閉するようにしたいと思ってます。

OnsenUIのドキュメントでは、ons-splitter-sideコンポーネントの、collapse属性に、メディアクエリーを指定できるとの記述があったので、
collapse="(max-width:800px)" のように指定してみました。

すると、画面幅が800px未満の場合は意図したとおりに動作しますが、800px以上の場合はサイドメニューが、コンテンツ上に重なって表示されてしまいます。

ただし、画面幅(ブラウザの幅)を一度800px未満にして(メニューが非表示になる)、その後再度800px以上にすると、コンテンツの左側に、再度メニュー
が開いたままになり、意図した表示になります。

これを、画面幅が800px以上の場合は、初回表示から、コンテンツの左側にサイドメニューが開いたままになるようにしたいのですが、どなたか設定の仕方を
教えていただけないでしょうか？

以下に、該当のソースコードと、試したことを記述します。
追加で必要な情報等あれば、追記します。

###該当のソースコード

<ons-splitter>
    <!-- サイドメニュー -->
    <ons-splitter-side [page]="sideMenu" class="side-menu" side="left" width="220px" swipe-target-width="100px" animation="overlay" collapse="(max-width:800px)" swipeable>
    </ons-splitter-side>

    <!-- コンテンツ -->
    <ons-splitter-content [page]="content"></ons-splitter-content>
</ons-splitter>