<script lang="ts">
    import favicon from '$lib/assets/favicon.svg';
    let { children } = $props();
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
</svelte:head>

<main>
        <div class="menu-bottom">


        </div>  

        <div class="left-panel">
            <div class="pp">
                <img src="lumity.jpg">
            </div>
        </div>        

        <div class="content">
            {@render children()}
        </div>

    
</main>

<style>
    :global(body) {
        margin: 0;
        padding: 0;
    }

    main {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
    }

    .pp {
        border: 5px solid var(--primary);
        border-radius: 50%;

        margin-bottom: 90%;
        margin-top: 1em;

        background-color: var(--background-alpha);  

        img {
            border-radius: 50%;
            width: 100%;
            height:100%;
        }
    }

    .left-panel {
        display: flex;
        justify-content: top;

        flex-direction: column;
        
        width: 13%;
        padding-left: 3%;
        padding-right: 3%;

        background-color: var(--tertiary);
    }   

    .menu-left {
        display: flex;
        flex-direction: column;
        padding-left: 10%;

        min-height: 70vh;
        
        background-color: var(--primary-soft);  
        border: 0.15em solid var(--text);
        border-radius: 10px;
    }

    .marge-pattern {
        background-image: 
            linear-gradient(to right, var(--primary, #333) 10px, transparent 10px); 
        background-size: 
            100% 100%; 
        background-position: 
            0 0;
        background-repeat: 
            no-repeat;
    }


    .menu-bottom {
        position: fixed; 
        display: flex; 
        flex-direction: column;
        width: 30%;
        height: 20%;
        background-color: var(--primary-soft);
        bottom: 5%;
        right: 5%;

        border: 0.15em solid var(--text);

        overflow: hidden;
        z-index: 1000;

    }

    .content {
        display: flex;
        flex-direction: column;
        width: 60%;

        padding: 2rem;
        background-color: var(--background-alpha);  
        
        border-left: 4px solid var(--accent);
        border-right: 4px solid var(--accent);
        min-height: 100vh;
    }


    @media (max-width: 768px) {
        .content {
            padding: 1rem;
            border-left-width: 2px;
            width: 100%
        }   
        .menu-bottom {
            position: fixed; 

            flex-direction: row;
            
            width: 100%;
            height: 10%;

            bottom: 0;
            right:0;
        }
        .left-panel{
            position: fixed;
            z-index: 1000;
            width: 15%;
        }
    }
</style>
