butterflyvu/src/layouts/Document.astro

---
// Environment Variables
import {
    ORG_NAME,
    FEEDBACK_ENABLED,
    FEELBACK_ENABLED,
    REVERT_LAYOUT,
    WHITELABEL
} from '@utils/GetConfig'

// Properties
const { Title, Feedback, Feelback } = Astro.props

// Components
import Head from '@components/global/Head.astro'
import Header from '@components/global/Header.astro'
import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";

// Styles
import "@styles/feelback.css";
---

<Head/>
<Header/>
<div class="page">
    <div class="content">
        <div class="sidebar">
            <h2>Sidebar Header</h2>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <h2>Sidebar Header</h2>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <h2>Sidebar Header</h2>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
            <a href="#">Document Title</a>
        </div>
        <div class="document">
            <h1>{Title}</h1>
            <slot/>
            <!-- <hr/>
            <p>Last Updated: null</p> -->
            {
                FEEDBACK_ENABLED ?
                    // Feelback
                    FEELBACK_ENABLED ?
                        <FeelbackYesNo
                            contentSetId="2308b02b-8f9f-437e-9780-5ad4c0db016e"
                            preset="like-dislike"
                            textQuestion="Did this article help?"
                            textAnswer="Thank you for your feedback."
                        />
                        :
                        null
                    :
                    null
           }
        </div>
    </div>
    <div class="footer">
        <div class="footer-start">
            <p>© {ORG_NAME}. All right reserved.</p>
        </div>
        <div class="footer-end">
            {WHITELABEL ?
                <p>Built with <a href="#">Pandora Butterfly</a></p>
                :
                null
            }
        </div>
    </div>
</div>

<!-- Style is temporary here -->
<style is:global lang="scss">
body {
    max-width: 1200px;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    background: #0f0f0f;
    color: white;
}

a {
    color: white;
    text-decoration: underline;
}

blockquote {
    margin: 0px;
    background: #323232;
    border-radius: 4px;
    padding: 12px 24px;
    border-left: 4px white solid;
    p {
        margin: 0px;
    }
}

header {
    background: #232323;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    .header-content {
        max-width: 1200px;
        margin: auto;
    }
}

.page {
    position: relative;
    min-height: 100vh;
    .content {
        padding-top: 90px;
        display: grid;
        display: flex;
        flex-direction: row;
        gap: 24px;
        .sidebar {
            min-width: 250px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            a {
                text-decoration: none;
                font-size: 14px;
                color: #898989;
            }
        }
        .document {
            background: #232323;
            border-radius: 4px;
            padding: 12px 24px;
            height: max-content;
            .feelback-q {
                justify-content: center;
                padding: 24px 0px;
                svg {
                    color: white;
                }
                .feelback-btn.active {
                    background: white;
                    border-radius: 3rem;
                    svg {
                        color: black;
                    }
                }
            }
        }
    }
    .footer {
        position: absolute;
        padding-bottom: 24px;
        bottom: 0;
        width: 100%;
        height: 2.5rem;
        display: flex;
        justify-content: space-between;
    }
}
</style>

{REVERT_LAYOUT ?
    <style>
        .content {
            flex-direction: row-reverse;
        }
    </style>
    :
    null
}