Vanilla Ionic Toolbar

by ethanpil

HTML

<script 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">
<ion-app>
  <ion-menu content-id="main-content" swipe-gesture="false" persistent="true">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu Content</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">This is the menu content.</ion-content>
  </ion-menu>

  <ion-header>
    <ion-toolbar>
      <ion-title>App</ion-title>
      <ion-buttons slot="end">
        <ion-button>
          <ion-menu-toggle> 
             <ion-button><ion-icon slot="icon-only" name="person-circle"></ion-icon></ion-button>
          </ion-menu-toggle>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <ion-tabs id="main-content">  <ion-tab tab="home">
      <ion-nav id="home-nav"></ion-nav>
      <div id="home-page">
        <ion-content>  <div class="example-content">Listen now content</div>
        </ion-content>
      </div>
    </ion-tab>
    <ion-tab tab="radio">
      <ion-nav id="radio-nav"></ion-nav>
      <div id="radio-page">
        <ion-content>  <div class="example-content">Radio content</div>
        </ion-content>
      </div>
    </ion-tab>
    <ion-tab tab="library">
      <ion-nav id="library-nav"></ion-nav>
      <div id="library-page">
        <ion-content>  <div class="example-content">Library content</div>
        </ion-content>
      </div>
    </ion-tab>
    <ion-tab tab="search">
      <ion-nav id="search-nav"></ion-nav>
      <div id="search-page">
        <ion-content>  <div class="example-content">Search content</div>
        </ion-content>
      </div>
    </ion-tab>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home">
        <ion-icon name="play-circle"></ion-icon>
        Listen Now
      </ion-tab-button>
      <ion-tab-button tab="radio">
        <ion-icon name="radio"></ion-icon>
        Radio
 ...

CSS

.example-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

JavaScript

// https://medium.com/@stepan.rumyantsev/can-i-use-ionic-and-capacitor-with-vanilla-javascript-without-a-framework-like-react-or-angular-8f4e3f146278
  const homeNav = document.querySelector('#home-nav');
  const homePage = document.querySelector('#home-page');
  homeNav.root = homePage;

  const radioNav = document.querySelector('#radio-nav');
  const radioPage = document.querySelector('#radio-page');
  radioNav.root = radioPage;

  const libraryNav = document.querySelector('#library-nav');
  const libraryPage = document.querySelector('#library-page');
  libraryNav.root = libraryPage;

  const searchNav = document.querySelector('#search-nav');
  const searchPage = document.querySelector('#search-page');
  searchNav.root = searchPage;