<script setup lang="ts">
import { ref , onMounted, watch } from 'vue'
import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
import logoDark from '@assets/logo_biale.svg';
import logoWhite from '@assets/logo_czarne.svg';

const logoR11 = ref( logoDark );


function changeLogoForTheme(){
    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
}

function isDarkModeSet(){
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

onMounted( () => {
    changeLogoForTheme();
} )

</script>

<template>
    <aside class="relative top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
        <div class="h-full px-3 pt-2 pb-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
            <a href="https://release11.com/">
                <img :src="logoR11" class="w-72 h-16 p-2 pt-0 dark:bg-gray-800"/>
            </a>
            <div class="flex flex-col font-medium items-center">
                <sidebar-menu-element-component category-name="XML">
                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                    <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
                    <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
                </sidebar-menu-element-component>

                <sidebar-menu-element-component category-name="Formatter">
                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                    <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
                    <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
                </sidebar-menu-element-component>


                <sidebar-menu-element-component category-name="REST">
                    <SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" />
                </sidebar-menu-element-component>

            </div>
        </div>
    </aside>
</template>