vue3+uniapp+wx 左侧导航栏

vue3+uniapp+wx 左侧导航栏

<template>
  <view class="collect-page">
    <view class="content"></view>

    <view class="right-nav">
      <view
        class="nav-item"
        v-for="(item, index) in sections"
        :key="index"
        :class="{ active: activeIndex === index }"
        @tap="handleClick(index)"
      >
        <view class="text-bg">
          <view class="active-text h-full flex items-center justify-center relative z-10 text-hex-333 -left-4px">
            {{ item.title }}
          </view>
        </view>
        <view class="text relative">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const sections = ref([
  { id: '1', title: '路线' },
  { id: '2', title: '地点' },
  { id: '3', title: '笔记' },
  { id: '4', title: '游记' }
])

const activeIndex = ref(0)

const handleClick = (index: number) => {
  activeIndex.value = index
}
</script>

<style lang="scss">
.collect-page {
  display: flex;
  height: 100vh;
  position: relative;
}

.content {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.section {
  margin-bottom: 20px;
}

.right-nav {
  position: fixed;
  right: 0px;
  top: 0px;
  display: flex;
  flex-direction: column;
  background-color: #a5bc80;
  height: 100%;
  padding: 30px 0px;
  overflow: hidden;
}

.nav-item {
  color: #ffffff;
  margin: 0 auto;
  width: 55px;
  line-height: 24px;
  font-size: 16px;
  padding: 30px 20px 30px 15px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  position: relative;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;

  .text-bg {
    position: absolute;
    top: -15px;
    left: -4px;
    width: calc(50% + 4px);
    height: calc(100% + 30px);

    filter: drop-shadow(0px 1px 3px rgba(50, 50, 0, 0.5));
    z-index: 10;

    transform: translateX(-100%);
    transform-style: preserve-3d;
    backface-visibility: hidden;

    transition: all 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      clip-path: polygon(0% 0%, 0% 100%, 100% 80%, 100% 20%);
    }
  }

  .text {
    transition: all 0.3s ease;
    transform: translateX(0);
  }

  &.active {
    color: #000000;

    .text {
      opacity: 0;
      transform: translateX(4px);
    }

    .text-bg {
      transform: translateX(0);
    }
  }
}
</style>