Third approach (Aside attached)

src/Lungo.js

@@ -1,6 +1,7 @@
 var Lungo = Lungo || {};
 
 Lungo.VERSION = '2.0';
+Lungo.DEVICE = null;
 
 Lungo.Element || (Lungo.Element = {});
 Lungo.Data || (Lungo.Data = {});

src/boot/Lungo.Boot.Layout.js

@@ -30,14 +30,8 @@ Lungo.Boot.Layout = (function(lng, undefined) {
     };
 
     var _initFirstSection = function() {
-        var section = lng.dom(ELEMENT.SECTION).first().addClass(CLASS.SHOW);
-        lng.Element.Cache.section = section;
-        lng.Element.Cache.article = section.children(ELEMENT.ARTICLE + "." + CLASS.ACTIVE);
-
-        lng.View.Article.switchReferenceItems(lng.Element.Cache.article.attr("id"), section);
-
-        var section_id = '#' + section.attr(ATTRIBUTE.ID);
-        lng.Router.History.add(section_id);
+        var section = lng.dom(ELEMENT.SECTION).first();
+        if (section) lng.Router.section(section.attr("id"));
     };
 
     var _initElement = function(selector, callback) {

src/modules/Lungo.Constants.js

@@ -69,6 +69,12 @@ Lungo.Constants = {
         SELECTOR: '{{value}}'
     },
 
+    DEVICE: {
+        phone: 'phone',
+        tablet: 'tablet',
+        tv: 'tv'
+    },
+
     ERROR: {
         DATABASE: 'ERROR: Connecting to Data.Sql.',
         DATABASE_TRANSACTION: 'ERROR: Data.Sql >> ',

src/modules/Lungo.Fallback.js

@@ -16,7 +16,8 @@ Lungo.Fallback = (function(lng, undefined) {
 
     var detectDevice = function() {
         env = lng.Core.environment();
-        _data("device", env.screen.width < 768 ? "phone": "tablet");
+        lng.DEVICE = env.screen.width < 768 ? "phone": "tablet";
+        _data("device", lng.DEVICE);
     };
 
     var _data = function(key, value) {

src/router/Lungo.Router.js

@@ -15,6 +15,8 @@ Lungo.Router = (function(lng, undefined) {
     var ERROR = lng.Constants.ERROR;
     var TRIGGER = lng.Constants.TRIGGER;
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+    var DEVICE = lng.Constants.DEVICE;
+
     var HASHTAG_CHARACTER = '#';
 
     /**
@@ -29,20 +31,25 @@ Lungo.Router = (function(lng, undefined) {
         var current =  lng.Element.Cache.section;
 
         if (_notCurrentTarget(section_id, current)) {
-            var target = current.siblings(ELEMENT.SECTION + section_id);
+            var query = ELEMENT.SECTION + section_id;
+            var target = (current) ? current.siblings(query) : lng.dom(query);
 
             if (target.length > 0) {
-                target_transition = target.data('transition');
-                if (target_transition) {
-                    _assignTransitionOrigin(current);
-                    _assignTransition(current, target_transition);
+                if (current) {
+                    _defineTransition(target, current);
+                    current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
                 }
-
-                current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
                 target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
+
+
+                _asideAttached(target);
+
+
                 lng.Element.Cache.section = target;
                 lng.Element.Cache.article = target.find(ELEMENT.ARTICLE + '.' + CLASS.ACTIVE);
 
+
+                console.error(lng.Element.Cache.aside);
                 lng.Router.History.add(section_id);
                 _sectionTriggers(current, target);
             }
@@ -125,6 +132,7 @@ Lungo.Router = (function(lng, undefined) {
         target = current.siblings(ELEMENT.SECTION + lng.Router.History.current());
 
         _assignTransition(target, target.data('transition-origin'));
+        _asideAttached(target);
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
         lng.Element.Cache.section = target;
         lng.Element.Cache.article = target.find(ELEMENT.ARTICLE + "." + CLASS.ACTIVE);
@@ -133,7 +141,7 @@ Lungo.Router = (function(lng, undefined) {
     };
 
     var _notCurrentTarget = function(target, element) {
-        return (target !== HASHTAG_CHARACTER + element.attr('id')) ? true : false;
+        return (!element || target !== HASHTAG_CHARACTER + element.attr('id')) ? true : false;
     };
 
     var _sectionId = function(element) {
@@ -141,10 +149,18 @@ Lungo.Router = (function(lng, undefined) {
     };
 
     var _sectionTriggers = function(current, target) {
-        current.trigger(TRIGGER.UNLOAD);
+        if (current) current.trigger(TRIGGER.UNLOAD);
         target.trigger(TRIGGER.LOAD);
     };
 
+    var _defineTransition = function(target, current) {
+        target_transition = target.data('transition');
+        if (target_transition) {
+            _assignTransitionOrigin(current);
+            _assignTransition(current, target_transition);
+        }
+    };
+
     var _assignTransition = function(section, transitionName) {
         section.data('transition', transitionName);
     };
@@ -153,6 +169,13 @@ Lungo.Router = (function(lng, undefined) {
         section.data('transition-origin', section.data('transition'));
     };
 
+    var _asideAttached = function(target) {
+        if (lng.Element.Cache.aside) lng.Element.Cache.aside.removeClass(CLASS.SHOW);
+        if (target.data("aside") && lng.DEVICE != DEVICE.phone) {
+            lng.View.Aside.show(target.data("aside"));
+        }
+    };
+
     return {
         section: section,
         article: article,

src/stylesheets/lungo.layout.aside.styl

@@ -9,15 +9,13 @@
 
 @import "constants.styl"
 
-
-
 aside
   width: ASIDE_WIDTH
-  visibility: hidden
+  display: none
   z-index: -1
   &.show
     z-index: 0
-    visibility: visible
+    display-box()
 
   &.right
     right: 0px

src/stylesheets/lungo.media.tablet.styl

@@ -10,16 +10,10 @@
     box-orient(horizontal)
     overflow: hidden
 
-  aside
-    z-index: 0
-    visibility: visible
-    position: relative
-    & > article
-      visibility: visible !important
-      display: block !important
-      z-index: 1
-
   section
     box-flex(1)
     &:not(.show)
       display: none !important
+
+  [data-router=aside]
+    display: none !important

src/view/Lungo.View.Aside.js

@@ -12,6 +12,7 @@ Lungo.View.Aside = (function(lng, undefined) {
     var ELEMENT = lng.Constants.ELEMENT;
     var CLASS = lng.Constants.CLASS;
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+    var DEVICE = lng.Constants.DEVICE;
 
     /**
      * Toggle an aside element
@@ -44,10 +45,12 @@ Lungo.View.Aside = (function(lng, undefined) {
         if (lng.Core.toType(aside) == 'string') aside = _findAside(lng.Core.parseUrl(aside));
         if (aside) {
             lng.Element.Cache.aside = aside;
-            var aside_stylesheet = _asideStylesheet(aside);
 
             aside.addClass(CLASS.SHOW);
-            lng.Element.Cache.section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
+            if (lng.DEVICE == DEVICE.phone) {
+                var aside_stylesheet = _asideStylesheet(aside);
+                lng.Element.Cache.section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
+            }
         }
 
         aside = null;
@@ -59,20 +62,23 @@ Lungo.View.Aside = (function(lng, undefined) {
      * @method hide
      */
     var hide = function(target) {
-        var aside = target || lng.Element.Cache.aside;
-        if (aside) {
-            lng.Element.Cache.section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT).removeClass(CLASS.SMALL);
+        if (lng.DEVICE == DEVICE.phone) {
 
-            var aside_stylesheet = _asideStylesheet(aside);
-            if (aside_stylesheet) {
-                lng.Element.Cache.section.removeClass(aside_stylesheet);
-            }
+            var aside = target || lng.Element.Cache.aside;
+            if (aside) {
+                lng.Element.Cache.section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT).removeClass(CLASS.SMALL);
 
-            setTimeout(function() {
-                lng.Element.Cache.aside = null;
-                aside.removeClass(CLASS.SHOW);
-            }, lng.Constants.TRANSITION.DURATION);
+                var aside_stylesheet = _asideStylesheet(aside);
+                if (aside_stylesheet) {
+                    lng.Element.Cache.section.removeClass(aside_stylesheet);
+                }
+
+                setTimeout(function() {
+                    lng.Element.Cache.aside = null;
+                    aside.removeClass(CLASS.SHOW);
+                }, lng.Constants.TRANSITION.DURATION);
 
+            }
         }
     };