Simple navigation/routes/statechart

controllers--menu.js

MyApp.menuController = SC.ArrayController.create({
  
  allowsEmptySelection: NO,
  
  allowsMultipleSelection: NO,
  
  content: [
    SC.Object.create({
      name: 'Dashboard', 
      route: 'dashboard',
      relatedView: 'dashboard'
    }),
    SC.Object.create({
      name: 'News',
      route: 'news',
      relatedView: 'news'
    }),
    SC.Object.create({
      name: 'Files',
      route: 'files',
      relatedView: 'files'
    })
  ],

  
  selectionChanged: function() {
    if(this.hasSelection()) {
      MyApp.Router.setRoute(this.get('selection').firstObject().route);
    }
  }.observes('MyApp.menuController.selection'),
  
  select: function(view) {
    var item = this.get('content').findProperty('relatedView', view);
    if(item) {
      this.selectObject(item);
    }
  }
  
});

resources--main_page.js

MyApp.mainPage = SC.Page.design({

  showModule: function(newViewName) {
    var container = this.getPath('mainPane.wrapper.content.mainSplit.bottomRightView');
    container.set('nowShowing', newViewName + 'View');
  },
    
  mainPane: SC.MainPane.design({

    childViews: 'wrapper'.w(),
        
    wrapper: SC.View.design({
      layerId: 'wrapper',
      layout: { top: 0, bottom: 0, left: 0, right: 0 },
      childViews: 'header content footer'.w(),

      header: MyApp.HeaderView,
      
      content: SC.View.design({
        layerId: 'content',
        layout: { top: 200, bottom: 0, left: 0, right: 0 },
        childViews: 'mainSplit'.w(),
        
        mainSplit: SC.SplitView.design({
          layerId: 'main-split',
          classNames: 'main-split'.w(),
          layout: { left: 0, top: 0, right: 0, bottom: 36 },
          
          layoutDirection: SC.LAYOUT_HORIZONTAL,
          autoresizeBehavior: SC.RESIZE_BOTTOM_RIGHT,
          defaultThickness: 125,
          topLeftMinThickness: 125,
          dividerThickness: 6,
          
          topLeftView: SC.ScrollView.design({
            layerId: 'navigation-container',
            contentView: MyApp.NavigationView
          }),
          
          dividerView: SC.SplitDividerView,

          bottomRightView: SC.ContainerView.design({
            layerId: 'main-content-container',
            nowShowing: 'dashboardView'
          })
        })
      }),
      
      footer: MyApp.FooterView
    })

  }),
  
  dashboardView: MyApp.DashboardView,
  
  newsView: MyApp.NewsView,
  
  filesView: MyApp.FilesView

});

router.js

MyApp.Router = SC.Object.create({
    
    routeChanged: function(route) {
      MyApp.statechart.sendEvent('routeChanged', route);
    },
    
    setRoute: function(route) {
      SC.routes.set('location', route);
    }
    
});

states--dashboard.js

MyApp.DashboardState = SC.State.design({
  
  enterState: function() {
    MyApp.Router.setRoute('dashboard');
    MyApp.menuController.select('dashboard');
    MyApp.mainPage.showModule('dashboard');
  }
  
});

states--logged_in.js

MyApp.LoggedInState = SC.State.design({
  
  initialSubstate: 'dashboard',
  
  enterState: function() {
    MyApp.getPath('mainPage.mainPane').append();
  },
  
  exitState: function() {
    MyApp.getPath('mainPage.mainPane').remove();
  },

  routeChanged: function(route) {
    var url = route.url;
    var routes = {
      dashboard: 'dashboard',
      news: 'news',
      files: 'files'
    };
    if(routes[url]) {
      MyApp.statechart.gotoState(routes[url]);
    }
  },
  
  dashboard: SC.State.plugin('MyApp.DashboardState'),

  news: SC.State.plugin('MyApp.NewsState'),
  
  files: SC.State.plugin('MyApp.FilesState')
  
});

views--menu.js

MyApp.MenuView = SC.SourceListView.design({

  layerId: 'navigation',
      
  actOnSelect: YES,
  contentValueKey: 'name',
  contentBinding: 'MyApp.menuController.arrangedObjects',
  selectionBinding: 'MyApp.menuController.selection',
  canReorderContent: NO
    
});