Navigation

Overview

The flow of navigation for an app is generally as follows:

Splash Screen -> Walkthrough Screen (For First-Time Users) -> Authentication Screen (If Required) -> Home Screen

Nectar follows the same convention by default. But you can change the flow completely by configuring some parameters.

1. Open /assets/custom/js/config.js

2. Inside window.config.navigation object, you can make changes.

Splash Screen

splash: {
    enabled: !Framework7.device.standalone && !Framework7.device.cordova
}

The above code means that when a user visits your web app via web browser URL, the custom splash screen is shown. This custom splash screen is not native but just an HTML page defined in /partials/screens/splash.html

If the app is installed on user home screen or the app is Cordova based, then this custom splash screen is not shown. Instead native splash screen is shown defined in manifest.json or <meta> tags for PWAs and config.xml for Cordova.

Splash is mandatory for Cordova, optional for PWAs (In PWAs, splash screens are automatically created from the manifest.json or <meta> tags.)

If you want to disable splash screen for the website, then set:

splash: {
    enabled: false
}

Walkthrough Screen

Nectar comes with a Walkthrough screen, which is defined in /partials/screens/walkthrough.html

If you want to disable walkthrough screen, then set:

walkthrough: {
    enabled: false
}

By default, this walkthrough screen is enabled, and shown to the user when the web app is installed and opened for the first time. After that the walkthrough screen is not shown.

If you want to always show the walkthrough screen, then set:

walkthrough: {
    showFirstTimeOnly: false
}

Log In Screen

If your app needs user authentication, then set:

authentication: {
    required: true
}

If you want to present the user with Log In screen as the app starts, then set:

authentication: { 
    guestAccess: false // If true, the app will skip the Log In screen.
}

Even if your app needs user authentication, there are some screens which should be accessed by guest users. You can define such screens inside:

authentication: {
    ignoreRoutes: []
}

Home Screen

By default, the home screen is set to './partials/screens.home.html'

You can change it to other screen, for example,

home: {
    url: './partials/screens/dashboard.html'
}