hi, i want to make this layout for my app
if user not login, the view is showing getting started page. If user already logged in, view is showing dashboard.
i got problem when tab 3 active and click logout.
the page should go to login page again, but after login the active page is tab 3 and it’s content showing tab 1.
here is my app.js
var app = new Framework7({
root: ‘#app’,
name: ‘test’,
id: ‘com.test.app’,
routes: routes,
theme: ‘ios’,
statusbar: {
enable: true,
overlay: ‘auto’,
iosOverlaysWebView: false,
androidOverlaysWebView: false,
androidBackgroundColor: ‘#19bbbb’,
androidTextColor: ‘white’,
},
popup: {
closeOnEscape: true,
},
});
var mainView = app.views.create(’.view-main’);
$(document).on(“deviceready”, function() {
var currentUser = appStorage.getItem(“userIdMember”);
if (currentUser != null) {
mainView.router.navigate({url: ‘/’});
app.statusbar.show();
} else {
mainView.router.navigate({url: ‘/get-started/’});
}
});
and here my index.html
<div id="app"> <div class="statusbar"></div> <div class="views tabs safe-areas"> <div class="toolbar toolbar-bottom tabbar-labels bg-color-white tabbar-labels-bottom-custom"> <div class="toolbar-inner"> <a href="#view-tab1" class="tab-link tab-link-active"> <i class="icon hm-icon"></i> <span class="tabbar-label tabbar-label-bottom-custom">Tab 1</span> </a> <a href="#view-tab2" class="tab-link"> <i class="icon hr-icon"></i> <span class="tabbar-label tabbar-label-bottom-custom">Tab 2</span> </a> <a href="#view-tab3" class="tab-link"> <i class="icon ac-icon"></i> <span class="tabbar-label tabbar-label-bottom-custom">Tab 3</span> </a> </div> </div> <div id="view-tab1" class="view view-main view-init tab tab-active" data-url="/"> </div> <div id="view-tab2" class="view view-init tab" data-view="tab2" data-url="/tab2/"> </div> <div id="view-tab3" class="view view-init tab" data-view="tab3" data-url="/tab3/"> </div> </div> </div>
here the routes.js
var routes = [
{
path: ‘/’,
componentUrl: ‘./pages/dashboard.html’,
},
{
path: ‘/tab2/’,
componentUrl: ‘./pages/tab2.html’,
},
{
path: ‘/tab3/’,
componentUrl: ‘./pages/tab3.html’,
},
{
path: ‘/get-started/’,
componentUrl: ‘./pages/get-started.html’,
},
{
path: ‘/login/’,
componentUrl: ‘./pages/login.html’,
},
{
path: ‘/sign-up/’,
componentUrl: ‘./pages/sign-up.html’,
},
{
path: ‘/complete-profile/’,
componentUrl: ‘./pages/complete-profile.html’,
},
];
so, what is the best structure on my index.html and app.js if i want to make layout like that ?
sorry for my noob question