init

uni_modules/nutui-uni/components/sidenavbar/index.scss

@@ -0,0 +1,16 @@
+.nut-side-navbar {
+  display: block;
+  height: 100%;
+  overflow: auto;
+
+  &__content {
+    position: relative;
+    display: block;
+    background-color: $sidenavbar-content-bg-color;
+
+    &__list {
+      display: block;
+      width: 100%;
+    }
+  }
+}

uni_modules/nutui-uni/components/sidenavbar/index.ts

@@ -0,0 +1 @@
+export * from './sidenavbar'

uni_modules/nutui-uni/components/sidenavbar/sidenavbar.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumericProp } from '../_utils'
+
+export const SIDEN_NAVBAR_KEY = Symbol('sidennavbar')
+
+export const sidenavbarProps = {
+  ...commonProps,
+  /**
+   * @description 导航缩进宽度
+   */
+  offset: makeNumericProp(15),
+}
+
+export type SidenavbarProps = ExtractPropTypes<typeof sidenavbarProps>

uni_modules/nutui-uni/components/sidenavbar/sidenavbar.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { useProvide } from '../_hooks'
+import { getMainClass } from '../_utils'
+import { SIDEN_NAVBAR_KEY, sidenavbarProps } from './sidenavbar'
+
+const props = defineProps(sidenavbarProps)
+
+const componentName = `${PREFIX}-side-navbar`
+
+useProvide(SIDEN_NAVBAR_KEY, `${componentName}-item`)({ props })
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: `${PREFIX}-side-navbar`,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <!-- TODO 侧标导航样式有问题 -->
+  <view :class="classes" :style="customStyle">
+    <view class="nut-side-navbar__content">
+      <view class="nut-side-navbar__content__list">
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>