Ionic Spilt Pane - Main content not using full width when using pure JavaScript

Ionic Framework
1

I’m creating a clickable prototype with Ionic and just using JavaScript without a framework (no Angular/React/Vue…similar to the sample code on the docs site).

I can get the split pane to show the side menu, but the main content is missing and it’s not using the full width (see image below).

image
image1135×896 7.15 KB

Here’s the code I’m using.

HTML

<!DOCTYPE html>
<html lang="en" class="ios" mode="ios">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test App</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
    <link rel="stylesheet" href="styles.css" />>
    <script type="module">
        import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
        window.menuController = menuController;
    </script>
</head>

<body>
    <ion-app>
        <ion-split-pane when="md">

            <!--  side menu  -->
            <ion-menu>
                <ion-content>
                    <ion-toolbar translucent>
                        <ion-title>Menu</ion-title>
                    </ion-toolbar>
                    <ion-list>
                        <a>
                            <ion-item>
                                <ion-icon name="home"></ion-icon>
                                <ion-label>Home</ion-label>
                            </ion-item>
                        </a>
                        <a href="/users.html">
                            <ion-item>
                                <ion-icon name="people"></ion-icon>
                                <ion-label>Users</ion-label>
                            </ion-item>
                        </a>
                        <a href="/info.html">
                            <ion-item>
                                <ion-icon name="information-circle"></ion-icon>
                                <ion-label>Info</ion-label>
                            </ion-item>
                        </a>
                    </ion-list>
                </ion-content>
            </ion-menu>

            <!-- main content -->
            <ion-router-outlet main>
                <ion-toolbar>
                    <ion-buttons slot="start">
                      <ion-menu-button></ion-menu-button>
                    </ion-buttons>
                    <ion-title>Home</ion-title>
                  </ion-toolbar>
                <ion-content>
                    <p>hello</p>
                </ion-content>
            </ion-router-outlet>

        </ion-split-pane>
    </ion-app>
</body>

</html>

CSS

:root {
    --ion-safe-area-top: 20px;
    --ion-safe-area-bottom: 22px;
}

ion-menu ion-content ion-list a {
    text-decoration: none;
}

ion-menu ion-content ion-list a ion-item ion-label {
    margin-left: 10px;
}

@media only screen and (min-width: 768px) {
    ion-split-pane {
        --side-max-width: 200px;
    }
}

There’s no sample code on the docs site so I’m not sure what I’m doing wrong.