<!DOCTYPE html>
<html lang="en" class='w-full h-full'>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel='stylesheet' href='/dist/styles.css'>
    <title>AhoPanel</title>
</head>

<body class='w-full h-full'>
    <div class='w-full sm:w-1/2 h-full bg-rhino-400 inline-block float-left'>
        <div>
            <div class='bg-rhino-500'>
                <h2 class='w-full text-left text-white p-3 text-3xl font-bold'><i class="fas fa-bolt mr-3"></i>ahoPanel
                </h2>
            </div>
            <div class='m-2'>
                <img src='https://images-platform.99static.com/kMoKZjRdwOlG2ppB6u0eeqE0L-4=/783x767:1504x1488/500x500/top/smart/99designs-contests-attachments/121/121158/attachment_121158757'
                    class='rounded-full w-16 h-16 border-2 border-white inline-block'>
                <h2 class='inline-block text-white ml-2'>
                    <%=adminName%><a href='ahoPanel/exit'><i class="fas fa-sign-out-alt ml-4"></i></a>
                </h2>
            </div>
            <a href='#' id='hambMenu' class='absolute right-1 sm:right-1/2'>
                <div class='text-4xl'><i class="fal fa-window-close text-red-700"></i></div>
            </a>
            <div class='h-32 text-white bg-rhino-600 shadow-inner transition-all duration-1000 opacity-100 visible'>
                <div class='p-2'>
                    <a class="text-2xl" href='/ahoPanel/create/blog'><i
                            class="fas fa-plus-square mr-2 text-cyan-300"></i>Add a
                        blog</a>
                </div>
                <div class='p-2'>
                    <a class="text-2xl" href='/ahoPanel/delete/blog'><i class="fal fa-trash-alt mr-2 text-red-700"></i>Delete a
                        blog</a>
                </div>
            </div>
        </div>
    </div>
    <div class='sm:w-1/2 sm:h-full hidden sm:inline-block '>
        <img class="w-full h-full"
            src='https://images-platform.99static.com/kMoKZjRdwOlG2ppB6u0eeqE0L-4=/783x767:1504x1488/500x500/top/smart/99designs-contests-attachments/121/121158/attachment_121158757'>

    </div>
</body>

<script>
    var test = document.getElementById('hambMenu')
    test.addEventListener('click', function () {
        if (test.nextElementSibling.classList.contains('visible')) {
            test.nextElementSibling.classList.replace('opacity-100', 'opacity-0')
            test.nextElementSibling.classList.replace('visible', 'invisible')
            test.innerHTML = `<div class='text-4xl'><i class="fal fa-plus-square text-cyan-300"></i></div>`
        }
        else {
            test.nextElementSibling.classList.replace('opacity-0', 'opacity-100')
            test.nextElementSibling.classList.replace('invisible', 'visible')
            test.innerHTML = `<div class='text-4xl'><i class="fal fa-window-close text-red-700"></i></div>`
        }
    })
</script>

</html>