<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="new RegExp('files.*', 'gi').test($page.url)"
                    >My Files</NavLink
                >
                <NavLink
                    :href="route('sharedWith')"
                    :active="
                        new RegExp('shared-with-me.*', 'gi').test($page.url)
                    "
                    >Shared with Me</NavLink
                >
                <NavLink
                    :href="route('sharedBy')"
                    :active="new RegExp('shared-by-me.*', 'gi').test($page.url)"
                    >Shared by Me</NavLink
                >
                <NavLink
                    :href="route('recycleBin')"
                    :active="new RegExp('recycle-bin.*', 'gi').test($page.url)"
                    >Recycle Bin</NavLink
                >
            </div>
        </div>
    </nav>
</template>
