gypsy-crm-frontend-vu/components/cwg-pc-header.vue

<template>
    <header class="cwg-pc-header">
        <div class="left">
            <cwg-icon :name="!props.sidebarVisible ? 'crm-bars-staggered' : 'crm-angle-left'" :size="24" color="#e32326"
                @click="$emit('toggle-sidebar')" />
        </div>
        <div class="center"></div>
        <div class="right">
            <div class="lang-select">
                <image class="img flag" src="/static/flag-en.png" alt="en" />
                <text>English</text>
                <text class="arrow">▼</text>
            </div>
            <text class="icon sun" @click="toggleTheme">🌞</text>
            <text class="icon bell">🔔<text class="dot"></text></text>
            <text class="icon avatar">
                <image class="img" src="/static/avatar.png" alt="avatar" />
            </text>
            <text class="icon logo" @click="openRightDrawer">
                <image class="img" src="/static/logo.png" alt="logo" />
            </text>
        </div>
    </header>
</template>

<script setup lang="ts">
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
import useRouter from "@/hooks/useRouter";
const router = useRouter();
const props = defineProps({
    sidebarVisible: {
        type: Boolean,
        default: false
    },
})
const emit = defineEmits<{
    (e: 'open-right-drawer'): void
}>()

function toggleTheme() {
    globalStore.setGlobalTheme(globalStore.theme === 'light' ? 'dark' : 'light');
}

function openRightDrawer() {
    emit('open-right-drawer');
}
</script>

<style scoped lang="scss">
.cwg-pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 32px;
    position: relative;
    z-index: 10;
}

.left {
    display: flex;
    align-items: center;
}

.back-arrow {
    color: #e74c3c;
    font-size: 22px;
    cursor: pointer;
    margin-right: 16px;
}

.center {
    flex: 1;
}

.right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lang-select {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border-radius: 18px;
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
}

.flag {
    width: 22px;
    height: 16px;
    margin-right: 6px;
}

.arrow {
    margin-left: 4px;
    font-size: 12px;
}

.icon {
    font-size: 20px;
    position: relative;
    cursor: pointer;
}

.bell .dot {
    position: absolute;
    top: 0;
    right: -2px;
    width: 7px;
    height: 7px;
    background: #27ae60;
    border-radius: 50%;
    display: inline-block;
}

.avatar .img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eee;
}

.logo .img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
}
</style>