<script setup>
import { Link } from "@inertiajs/vue3";
import NewDropdown from "./NewDropdown.vue";
import NavLink from "../NavLink.vue";
</script>

<template>
    <nav class="min-w-[12rem]">
        <div class="h-[5rem] px-5 flex items-center mb-12">
            <Link
                :href="route('userFiles')"
                method="get"
                as="button"
                type="button"
                id="logotext"
                class="text-5xl flex"
            >
                <span>DR</span>
                <span class="text-3xl" id="lightning">&#11085;</span>
                <span>VE</span>
            </Link>
        </div>
        <div class="px-6">
            <NewDropdown />

            <div class="py-5">
                <NavLink
                    :href="route('userFiles')"
                    :active="$page.url === '/my-files'"
                    >My Files</NavLink
                >
                <NavLink href="/">Shared with Me</NavLink>
                <NavLink href="/">Shared by Me</NavLink>
                <NavLink href="/">Recycle Bin</NavLink>
            </div>
        </div>
    </nav>
</template>
