neo.mjs 6.24.0 → 6.26.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.24.0'
+         * @member {String} version='6.26.0'
          */
-        version: '6.24.0'
+        version: '6.26.0'
     }
 
     /**

package/apps/portal/view/ViewportController.mjs

@@ -28,9 +28,9 @@ class ViewportController extends Controller {
          */
         ntype: 'viewport-controller',
         /**
-         * @member {Number|null} activeIndex=null
+         * @member {Number|null} activeIndex_=null
          */
-        activeIndex: null,
+        activeIndex_: null,
         /**
          * @member {String|null} defaultHash='/home'
          */
@@ -305,7 +305,7 @@ class ViewportController extends Controller {
     /**
      *
      */
-    updateHeaderToolbar() {
+    async updateHeaderToolbar() {
         let me                  = this,
             {activeIndex, size} = me;
 
@@ -315,13 +315,20 @@ class ViewportController extends Controller {
                 vertical          = size === 'x-small',
                 hidden            = activeIndex !== 0 && vertical;
 
-            headerSocialIcons.hidden = hidden;
+            NeoArray.toggle(cls, 'hide-sidebar', hidden);
 
             if (!hidden) {
-                NeoArray.toggle(cls, 'separate-bar', vertical);
+                NeoArray.toggle(cls, 'separate-bar', vertical)
+            }
+
+            headerSocialIcons.cls = cls
 
-                headerSocialIcons.cls = cls
+
+            if (hidden && vertical) {
+                await me.timeout(200)
             }
+
+            headerSocialIcons.hidden = hidden;
         }
     }
 }

package/apps/portal/view/learn/MainContainer.mjs

@@ -29,17 +29,22 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module  : Container,
-            bind    : {hidden: data => data.size === 'x-small'},
-            cls     : ['sidenav-container'],
-            layout  : 'fit',
-            minWidth: 350,
-            tag     :'aside',
-            width   : 350,
+            module   : Container,
+            cls      : ['sidenav-container'],
+            layout   : 'fit',
+            reference: 'sidenav-container',
+            tag      : 'aside',
 
             items: [{
                 module   : ContentTreeList,
                 reference: 'tree'
+            }, {
+                ntype  : 'button',
+                bind   : {hidden: data => data.size !== 'x-small'},
+                cls    : ['sidenav-button'],
+                handler: 'onSideNavToggleButtonClick',
+                iconCls: 'fas fa-bars',
+                ui     : 'secondary'
             }]
         }, {
             module      : Splitter,
@@ -51,9 +56,7 @@ class MainContainer extends Container {
             module: PageContainer
         }, {
             module   : PageSectionsContainer,
-            bind     : {hidden: data => data.size !== 'large'},
-            reference: 'page-sections-container',
-            width    : 250
+            reference: 'page-sections-container'
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}

package/apps/portal/view/learn/MainContainerController.mjs

@@ -121,6 +121,13 @@ class MainContainerController extends Controller {
         this.navigateTo(this.getModel().getData('nextPageRecord').id)
     }
 
+    /**
+     * @param {Object} data
+     */
+    onPageSectionsToggleButtonClick(data) {
+        this.getReference('page-sections-container').toggleCls('neo-expanded')
+    }
+
     /**
      * @param {Object} data
      */
@@ -155,6 +162,13 @@ class MainContainerController extends Controller {
             })
         }
     }
+
+    /**
+     * @param {Object} data
+     */
+    onSideNavToggleButtonClick(data) {
+        this.getReference('sidenav-container').toggleCls('neo-expanded')
+    }
 }
 
 Neo.setupClass(MainContainerController);

package/apps/portal/view/learn/MainContainerModel.mjs

@@ -108,6 +108,8 @@ class MainContainerModel extends Component {
 
                 me.setData({nextPageText, nextPageRecord});
 
+                me.component.getReference('sidenav-container')?.toggleCls('neo-expanded', false)
+
                 break
             }
 

package/apps/portal/view/learn/PageSectionsContainer.mjs

@@ -20,21 +20,26 @@ class PageSectionsContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
+            ntype  : 'button',
+            bind   : {hidden: data => data.size === 'large'},
+            cls    : ['sections-container-button'],
+            handler: 'onPageSectionsToggleButtonClick',
+            iconCls: 'fas fa-bars',
+            ui     : 'secondary'
+        }, {
             vdom:
             {cn: [
                 {tag: 'h3', html: 'On this page'}
             ]}
-
         }, {
             module   : PageSectionsList,
+            listeners: {pageListSelect: 'up.onPageListSelect'},
             reference: 'list'
         }],
         /**
          * @member {Object} layout={ntype:'vbox'}
          */
-        layout: {
-            ntype: 'vbox'
-        }
+        layout: {ntype: 'vbox'}
     }
 
     /**
@@ -44,6 +49,13 @@ class PageSectionsContainer extends Container {
     get list() {
         return this.getReference('list')
     }
+
+    /**
+     * @param {Object} data
+     */
+    onPageListSelect(data) {
+        this.toggleCls('neo-expanded', false)
+    }
 }
 
 Neo.setupClass(PageSectionsContainer);

package/apps/portal/view/learn/PageSectionsList.mjs

@@ -62,6 +62,8 @@ class PageSectionsList extends List {
         if (record) {
             me.isAnimating = true;
 
+            me.fire('pageListSelect', {record});
+
             await Neo.main.DomAccess.scrollIntoView({
                 querySelector: `[data-record-id='${record.id}']`,
                 windowId     : me.windowId

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.24.0'
+         * @member {String} version='6.26.0'
          */
-        version: '6.24.0'
+        version: '6.26.0'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.24.0",
+    "version": "6.26.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -44,6 +44,10 @@
         right         : 0;
         top           : 58px;
         z-index       : 9;
+
+        &.hide-sidebar {
+            animation: fade-out-animation 200ms linear forwards;
+        }
     }
 
     // find parallel class hide-sidebar

package/resources/scss/src/apps/portal/learn/ContentTreeList.scss

@@ -9,17 +9,33 @@
     &.neo-tree-list {
         .neo-list-container {
             .neo-list-item {
+                &.neo-list-item-leaf {
+                    .neo-list-item-content:after {
+                        content: none !important;
+                    }
+                }
+
                 .neo-list-item-content:before {
                     content: unset !important;
                 }
 
                 &.neo-list-folder {
+                    .neo-list-item-content:after {
+                        content: "\e5cc" !important;
+                    }
+
                     .neo-list-item-content:before {
                         content: unset !important;
                     }
 
-                    &.neo-folder-open .neo-list-item-content:before {
-                        content: unset !important;
+                    &.neo-folder-open {
+                        .neo-list-item-content:after {
+                            content: "\e5cf" !important;
+                        }
+
+                        .neo-list-item-content:before {
+                            content: unset !important;
+                        }
                     }
                 }
             }
@@ -78,28 +94,4 @@
             }
         }
     }
-
-    &.neo-tree-list {
-        .neo-list-container {
-            .neo-list-item {
-                &.neo-list-item-leaf {
-                    .neo-list-item-content:after {
-                        content: none !important;
-                    }
-                }
-
-                &.neo-list-folder {
-                    .neo-list-item-content:after {
-                        content: "\e5cc" !important;
-                    }
-
-                    &.neo-folder-open {
-                        .neo-list-item-content:after {
-                            content: "\e5cf" !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
 }

package/resources/scss/src/apps/portal/learn/MainContainer.scss

@@ -4,32 +4,39 @@
     .main-content-splitter {
         margin: 0;
     }
-}
 
-// todo: @mxmrtns this makes scrollbars globally(!) invisible
-// Scrollbar Behaviour
-/*::-webkit-scrollbar {
-    width: 6px;
-}
+    .sidenav-button {
+        display: none;
+    }
 
-::-webkit-scrollbar-track {
-background: transparent;
-}
+    .sidenav-container {
+        min-width: 350px;
+        width    : 350px;
+    }
 
-::-webkit-scrollbar-thumb {
-background: transparent;
-}
+    @media (max-width: 640px) {
+        .sidenav-container {
+            box-shadow: 0 5px 10px rgba(0,0,0,.3);
+            left      : -350px;
+            overflow  : visible;
+            position  : fixed;
+            transition: left 250ms ease-out;
+            z-index   : 101;
 
-.neo-tree-list:hover {
-    ::-webkit-scrollbar-thumb {
-        background: #b2b2b2;
-        border-radius: 100px;
-    }
-}
+            &.neo-expanded {
+                left: 0;
+            }
 
-.learn-content:hover {
-    ::-webkit-scrollbar-thumb {
-        background: #b2b2b2;
-        border-radius: 100px;
+            .sidenav-button {
+                box-shadow: 0 5px 10px rgba(0,0,0,.3);
+                display   : flex;
+                height    : 35px;
+                min-width : 35px;
+                position  : absolute;
+                right     : -42px;
+                width     : 35px;
+                z-index   : 101;
+            }
+        }
     }
-}*/
+}

package/resources/scss/src/apps/portal/learn/PageSectionsContainer.scss

@@ -3,12 +3,42 @@
     border          : none; // reset the default 1px
     display         : block;
     flex-shrink     : 0;
+    min-width       : 250px;
     position        : fixed;
     right           : 0;
     width           : 250px;
     z-index         : 1;
 
     h3 {
-        margin-left: 16px;
+        margin-bottom: .4em;
+        margin-left  : 16px;
+    }
+
+    .sections-container-button {
+        display: none;
+    }
+
+    @media (max-width: 1296px) {
+        background-color: #fff;
+        box-shadow      : 0 5px 10px rgba(0,0,0,.3);
+        overflow        : visible;
+        right           : -250px;
+        transition      : right 250ms ease-out;
+        z-index         : 100;
+
+        &.neo-expanded {
+            right: 0;
+        }
+
+        .sections-container-button {
+            background-color: #fff;
+            box-shadow      : 0 5px 10px rgba(0,0,0,.3);
+            display         : flex;
+            height          : 35px;
+            min-width       : 35px;
+            position        : absolute;
+            left            : -42px;
+            width           : 35px;
+        }
     }
 }

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.24.0'
+     * @default '6.26.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.24.0'
+    version: '6.26.0'
 };
 
 Object.assign(DefaultConfig, {