<template>
    <div
        :class="[
            'sidebar',
            isOpen ? 'w-64' : 'w-16'
        ]"
    >
        <!-- Toggle Button -->
        <div class="flex m-0 p-0">
            <button
                class="button"
                @click="toggleSidebar"
            >
                <img
                    v-if="isOpen"
                    src="../../assets/closed-menu.png"
                    alt="Close"
                    class="icon-logo"
                />
                <img
                    v-else
                    src="../../assets/logo-harmony.png"
                    alt="Close"
                    class="icon-logo"
                />
            </button>
            <h2 class="align-self-center text-3xl font-bold" v-if="isOpen">harmony.</h2>
        </div>

        <!-- Navigation Links -->
        <nav class="flex flex-col gap-4 px-3 mt-4 flex-grow">
            <Link href="/statistics" class="nav-link">
                <img src="../../assets/statistics.png" alt="Statistics" class="icon" />
                <span class="text-span">Статистика</span>
            </Link>

            <Link href="/tasks" class="nav-link">
                <img src="../../assets/tasks.png" alt="Tasks" class="icon" />
                <span class="text-span">Задачи</span>
            </Link>

            <Link href="/schedule" class="nav-link">
                <img src="../../assets/schedule.png" alt="Schedule" class="icon" />
                <span class="text-span">Распорядок дня</span>
            </Link>

            <Link v-if="$page.props.auth.user"  href="/account" class="nav-link mt-auto mb-2">
                <img src="../../assets/account.png" alt="Account" class="icon" />
                <span v-if="isOpen && $page.props.auth.user" class="text-span">Мой аккаунт</span>
            </Link>

            <Link v-else href="/login" class="nav-link mt-auto mb-2">
                <img src="../../assets/account.png" alt="Account" class="icon" />
                <span class="text-span">Войти в аккаунт</span>
            </Link>
        </nav>
    </div>
</template>