add(NewNimbusServiceLayout):replace NimbusServiceLayout && fix layout sider

demo/demo.vue

@@ -56,6 +56,10 @@ export default {
             {
               name: 'Nimbus Service Layout',
               path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout'
+            },
+            {
+              name: 'New Nimbus Service Layout',
+              path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout-new'
             }
           ]
         },

demo/documentation/components/menu/enUS/basic.md

@@ -1,7 +1,7 @@
 # Basic
 ```html
 <div style="width:500px">
-  <n-menu :title="'Test'" 
+  <n-menu 
     v-model="selected" 
     :defaultOpenNames="initOpenKeys"
     :openNames="opens" 

demo/documentation/components/menu/enUS/items.md

@@ -1,6 +1,6 @@
 # items
 ```html
-<n-menu :title="'Test'" 
+<n-menu
   v-model="selected" 
   :defaultOpenNames="initOpenKeys"
   :openNames="opens" 

demo/documentation/components/newNimbusServiceLayout/enUS/basic.md

@@ -0,0 +1,70 @@
+# Basic
+```html
+<div style="position:relative;height: 600px">
+{{openNames}}111
+ <n-nimbus-service-layout
+    name="Oasis"
+    :items="items"
+    :disable-menu="disableMenu"
+    v-model="selected"
+    :open-names="openNames"
+    @openNamesChange="changeOpen"
+    @select="changeSelect"
+  >
+   <template v-slot:drawer-header-icon>
+              <md-musical-notes />
+            </template>
+            Take me to the place where you go<br>
+            Where nobody knows if it's night or day<br>
+            But please don't put your life in the hands<br>
+            Of a Rock n Roll band<br>
+            Who'll throw it all away
+            <n-button @click="disableMenu = !disableMenu">
+              toggleDisableMenu
+            </n-button>
+          </n-nimbus-service-layout>
+  </n-nimbus-service-layout>
+</div>
+
+```
+```js
+import mdMusicalNotes from 'naive-ui/lib/icons/md-musical-notes'
+export default {
+  components: {
+    mdMusicalNotes
+  },
+  data () {
+    return {
+       disableMenu: false,
+       selected: null,
+       openNames: [],
+      items: [
+        {
+          name: 'n-config-provider',
+          path: '/en-US/dark/n-config-provider'
+        },
+        {
+          name: `Morning Glory`,
+          childItems: [
+            {
+              name: 'Hello',
+              path: '/en-US/dark/n-nimbus-service-layout?param=777'
+            },
+          ]
+        },
+      ]
+    }
+  },
+  methods: {
+    changeOpen (names) {
+      console.log('names', names)
+    },
+    changeSelect (val) {
+      console.log('changeSelect', val)
+    }
+  }
+};
+```
+```css
+
+```

demo/documentation/components/newNimbusServiceLayout/enUS/index.md

@@ -0,0 +1,5 @@
+# NimbusServiceLayout
+<!--single-column-->
+```demo
+basic
+```

demo/init.js

@@ -10,6 +10,7 @@ import start from './documentation/intro/start'
 import devGuildlines from './documentation/intro/devGuidelines'
 
 import nimbusServiceLayoutDemo from './documentation/components/nimbusServiceLayoutDemo'
+import newNimbusServiceLayout from './documentation/components/newNimbusServiceLayout'
 import gradientText from './documentation/components/gradientText'
 import checkbox from './documentation/components/checkbox'
 import button from './documentation/components/button'
@@ -151,6 +152,7 @@ const routes = [
       { path: '/start', component: start },
       { path: '/dev-guildlines', component: devGuildlines },
       { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
+      { path: '/n-nimbus-service-layout-new', component: newNimbusServiceLayout },
       { path: '/n-layout', component: layout },
       { path: '/n-gradient-text', component: gradientText },
       {

index.js

@@ -27,6 +27,7 @@ import Tabs from './packages/common/Tabs'
 import TimePicker from './packages/common/TimePicker'
 import Layout from './packages/common/Layout'
 import ServiceLayout from './packages/nimbus/ServiceLayout'
+import NewServiceLayout from './packages/nimbus/NewServiceLayout'
 import NimbusIcon from './packages/deprecated/Icon'
 import Scrollbar from './packages/common/Scrollbar'
 import Steps from './packages/common/Steps'
@@ -109,6 +110,7 @@ function install (Vue) {
   Card.install(Vue)
   Icon.install(Vue)
   ServiceLayout.install(Vue)
+  NewServiceLayout.install(Vue)
   Loader.install(Vue)
   Layout.install(Vue)
   GradientText.install(Vue)

packages/common/Layout/src/LayoutSider.vue

@@ -16,9 +16,7 @@
     }"
   >
     <n-scrollbar v-if="!useNativeScrollbar">
-      <div class="n-layout-sider__content">
-        <slot />
-      </div>
+      <slot />
     </n-scrollbar>
     <div v-else class="n-layout-sider__content">
       <slot />

packages/common/Menu/src/menu.vue

@@ -47,10 +47,6 @@ export default {
       type: String,
       default: null
     },
-    title: {
-      type: String,
-      default: null
-    },
     indent: {
       type: Number,
       default: 32
@@ -61,11 +57,15 @@ export default {
     },
     defaultOpenNames: {
       type: Array,
-      default: null
+      default: () => {
+        return []
+      }
     },
     openNames: {
       type: Array,
-      default: null
+      default: () => {
+        return null
+      }
     },
     hasIcon: {
       type: Boolean,
@@ -88,11 +88,11 @@ export default {
       this.$emit('input', value)
     },
     openKeysChangeCallback (val) {
-      let indexs = this.openNames
-      if (!this.openNames.includes(val)) {
-        indexs.push(val)
-      } else {
+      let indexs = this.openNames || []
+      if (this.openNames && this.openNames.includes(val)) {
         indexs.splice(indexs.findIndex(item => item === val), 1)
+      } else {
+        indexs.push(val)
       }
       this.$emit('openNamesChange', indexs)
     }

packages/common/Menu/src/subMenu.vue

@@ -76,16 +76,18 @@ export default {
       return padding
     },
     openNames () {
-      return this.NMenu.openNames || this.NMenu.defaultOpenNames
+      return this.NMenu.openNames || this.NMenu.defaultOpenNames || []
     },
     isCollapsed () {
-      return !this.openNames.includes(this.name)
+      return !(this.openNames && this.openNames.includes(this.name))
     }
   },
   methods: {
     handleClick () {
+      console.log('enter Clickkkkk')
       if (!this.disabled) {
         this.NMenu.openKeysChangeCallback(this.name)
+        console.log('this.openNames', this.openNames)
         this.$emit('click', this)
       }
     }

packages/nimbus/NewServiceLayout/index.js

@@ -0,0 +1,7 @@
+import NewNimbusServiceLayout from './src/main.vue'
+
+NewNimbusServiceLayout.install = function (Vue) {
+  Vue.component(NewNimbusServiceLayout.name, NewNimbusServiceLayout)
+}
+
+export default NewNimbusServiceLayout

packages/nimbus/NewServiceLayout/src/main.vue

@@ -0,0 +1,218 @@
+
+<script>
+import Scrollbar from '../../../common/Scrollbar'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+import toggleButton from './toggleButton'
+
+export default {
+  name: 'NNimbusServiceLayout',
+  components: {
+    Scrollbar,
+    toggleButton
+  },
+  mixins: [withapp, themeable],
+  props: {
+    icon: {
+      type: String,
+      default: 'md-settings'
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    paddingBody: {
+      type: Boolean,
+      default: true
+    },
+    disableMenu: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: null
+    },
+    openNames: {
+      type: Array,
+      default: () => {
+        return null
+      }
+    },
+    defaultOpenNames: {
+      type: Array,
+      default: () => {
+        return null
+      }
+    }
+
+  },
+  data () {
+    return {
+      activeItem: null,
+      collapsed: false
+    }
+  },
+  computed: {
+    subMenuNames () {
+      const subMenuNames = []
+      function traverse (items) {
+        items.forEach(item => {
+          if (item.childItems) {
+            subMenuNames.push(item.name)
+            traverse(item.childItems)
+          }
+        })
+      }
+      traverse(this.items)
+      return subMenuNames
+    }
+  },
+  watch: {
+    $route (to, from) {
+      this.syncActiveItemWithPath(to.path, this.items)
+    }
+  },
+  created () {
+    if (this.$route) {
+      this.syncActiveItemWithPath(this.$route.path, this.items)
+    }
+  },
+  methods: {
+    syncActiveItemWithPath (path, items) {
+      for (const item of items) {
+        if (item.childItems) {
+          this.syncActiveItemWithPath(path, item.childItems)
+        } else if (item.path === path) {
+          this.$emit('input', item.name)
+          this.activeItem = item.name
+          return
+        }
+      }
+    }
+  },
+  render (h) {
+    let _this = this
+    const siderProps = {
+      'show-toggle-button': true,
+      'show-trigger': true,
+      'collapsed': this.collapsed,
+      'collapse-mode': 'transform',
+      'bordered': true,
+      'mode': 'absolute',
+      'show-content': !this.collapsed,
+      'use-native-scrollbar': false
+    }
+    const createMenu = items => {
+      return items.map(item => {
+        const props = {
+          title: item.name,
+          name: item.name,
+          disabled: !!item.disabled
+        }
+        if (item.childItems) {
+          return h('NSubMenu', {
+            props
+          },
+          createMenu(item.childItems)
+          )
+        } else {
+          return h('NMenuItem', {
+            props: props,
+            on: {
+              click: function () {
+                if (_this.$router && item.path) {
+                  _this.$router.push(item.path)
+                }
+              }
+            }
+          })
+        }
+      })
+    }
+    return h('NLayout', {
+      staticClass: 'n-new-nimbus-service-layout',
+      class: {
+        [`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
+      },
+      props: {
+        mode: 'absolute'
+      }
+    }, [
+      h('NLayoutHeader', {
+        staticClass: 'n-new-nimbus-service-layout__header',
+        class: {
+          'n-new-nimbus-service-layout__header--hide': !this.$slots.nav
+        },
+        props: {
+          bordered: true
+        }
+      }, this.$slots.nav),
+
+      h('NLayout', {
+        staticClass: 'n-nimbus-service-layout-container',
+        class: {
+          'n-nimbus-service-layout-container--has-top': this.$slots.nav
+        },
+        props: {
+          mode: 'absolute'
+        }
+      }, [
+        h('NLayoutSider', {
+          class: 'n-nimbus-service-layout-container-sider',
+          props: siderProps,
+          on: {
+            collapse: () => {
+              this.collapsed = true
+            },
+            expand: () => {
+              this.collapsed = false
+            }
+          }
+        },
+        [
+          h('div', {
+            style: { 'padding-left': '24px', 'font-size': '16px', 'font-weight': 700 },
+            class: 'n-nimbus-service-layout-container-sider-header'
+          }, [
+            h('NIcon', {
+              staticClass: 'n-nimbus-service-layout-container-sider-header__icon',
+              class: {
+                'n-nimbus-service-layout-container-sider-header__icon--hide': !this.$slots['drawer-header-icon']
+              },
+              props: { size: 22 }
+            },
+            this.$slots['drawer-header-icon']),
+            h('span', {}, this.name)
+          ]
+          ),
+          h('NMenu',
+            {
+              props: {
+                value: this.value || this.activeItem,
+                openNames: this.openNames,
+                defaultOpenNames: this.defaultOpenNames || this.subMenuNames,
+                indent: 24
+              },
+              on: this.$listeners
+            },
+            createMenu(this.items)
+          )]
+        ),
+        // this.$slots.default
+        h('NLayout', {
+          props: {
+            'mode': 'absolute',
+            'use-native-scrollbar': false
+          },
+          class: 'n-new-nimbus-service-layout-container__content'
+        }, this.$slots.default)
+      ])
+    ])
+  }
+}
+</script>

packages/nimbus/NewServiceLayout/src/toggleButton.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg
+    viewBox="0 0 56.06 56.06"
+  >
+    <path
+      d="M50,22A28,28,0,1,0,78,50,28.06,28.06,0,0,0,50,22ZM65.09,52.16h-25l7.1,7.1a2.16,2.16,0,0,1-3.05,3.05L33.38,51.52a2.15,2.15,0,0,1,0-3L44.16,37.69a2.16,2.16,0,0,1,3.05,3.05l-7.1,7.1h25a2.16,2.16,0,0,1,0,4.32Z"
+      transform="translate(-21.97 -21.97)"
+    />
+  </svg>
+</template>

packages/nimbus/ServiceLayout/src/main.vue

@@ -130,7 +130,7 @@ import toggleButton from './toggleButton'
 import isEqual from 'lodash/isEqual'
 
 export default {
-  name: 'NNimbusServiceLayout',
+  name: 'NOldNimbusServiceLayout',
   components: {
     Scrollbar,
     toggleButton

styles/Layout.scss

@@ -117,6 +117,14 @@
         left: 0;
         top: 0;
         bottom: 0;
+        @include e(content) {
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          overflow: auto;
+        }
       }
     }
     @include m(bordered) {

styles/NewNimbusServiceLayout.scss

@@ -0,0 +1,34 @@
+@import './mixins/mixins.scss';
+
+@include themes-mixin() {
+  @include b(new-nimbus-service-layout) {
+    // color: $service-layout-color;
+    // height: 100%;
+    color: $service-layout-color;
+    background-color: $service-layout-body-background-color;
+    @include e(header) {
+      height: 64px;
+      @include m(hide) {
+        display: none;
+      }
+    }
+    @include b(nimbus-service-layout-container) {
+      @include b(nimbus-service-layout-container-sider-header) {
+        display: flex;
+        @include e(icon) {
+          margin-right: 5px;
+          @include m(hide) {
+            display: none;
+          }
+        }
+      }
+      @include m(has-top) {
+        top: 64px;    
+      }
+    }
+    
+    // @include e(content) {
+    //   background-color: red;
+    // }
+  }
+}

styles/index.scss

@@ -56,6 +56,7 @@
 @import './Layout.scss';
 @import './Avatar.scss';
 @import "./NimbusServiceLayout.scss";
+@import "./NewNimbusServiceLayout.scss";
 @import "./Popover.scss";
 @import "./AdvancedTable.scss";
 @import "./NimbusIcon.scss";