<template>
    <div class="side_bar">

        <div class="nav_item" v-for="item in navList">
            <img class="icon" :src="item.icon" :alt="item.label">
            <span class="label">{{ item.label }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import dataIcon from "@/assets/img/main_nav_data_icon.svg"
import fileIcon from "@/assets/img/main_nav_file_icon.svg"
import groupIcon from "@/assets/img/main_nav_group_icon.svg"
import uavIcon from "@/assets/img/main_nav_uav_icon.svg"
import userIcon from "@/assets/img/main_nav_user_icon.svg"


const navList = [
    {
        icon: dataIcon,
        label: "数据"
    },
    {
        icon: userIcon,
        label: "人员"
    },
    {
        icon: groupIcon,
        label: "组织"
    },
    {
        icon: uavIcon,
        label: "设备"
    },
    {
        icon: fileIcon,
        label: "文件"
    },
]

</script>

<style lang="less" scoped>
.side_bar {
    width: 60px;
    height: 100%;
    position: relative;
    background-color: antiquewhite;
    background: linear-gradient(180deg, #114F99 23%, rgba(18, 25, 76, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        background-color: aquamarine;
        background: linear-gradient(180deg, #45adf3, rgba(69, 173, 243, 0.1) 100%);
        width: 2px;
    }

    .nav_item{
        display: flex;
        flex-direction: column;
        cursor: pointer;
        margin-top: 16px;
        .icon{
            width: 24px;
            height: 24px;
        }
        .label{
            font-size: 14px;
            margin-top: 3px;
            color: rgba(255, 255, 255, 0.64);
        }
    }

}
</style>