Tabbed Views layout with login and sign up page

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 :slightly_smiling_face:?
sorry for my noob question

Minimum code on jsfiddle?

i don’t know how to minimum code framework7 dude :sweat_smile:,
but this is my best try https://jsfiddle.net/rezplague/dx8eyqr9/36/

The code in this example does not work

as i said before, i dont know to minimum code framework7 on jsfiddle :sweat_smile:. sorry
but here my sample on github https://github.com/faarisaziz/test-view-tab

i am using phonegap and use framework7 for style. do you have suggestion for me making apps like the layout i sent? the structure i still don’t get it. :pensive:

Jsfiddle template: https://jsfiddle.net/nolimits4web/o2ejupu1/

Isn’t it easier to have onboarding pages in LoginScreen that is on top of your Views?

i think so, but the tabbed view always opened before i login. the tabbed views need to load after login because i need user id. how to do that?

Then don’t insert or don’t init initial views before login. And on login, just init tabbed views so they will load pages. Or after login generate HTML and add it:

//after login
app.root.append(`
  <div class="views">
    ...
  </div>
`);
// and init each view with app.views.create
app.views.create('#view-1');
app.views.create('#view-2');
...
1 Like

ok, i will try it. thanks for the answer :grin: