---
import Layout from "./Layout.astro";
import Navbar from "@components/Navbar.astro";
import SideBar from "@components/widget/SideBar.astro";
import {pathsEqual} from "@utils/url-utils";
import Footer from "@components/Footer.astro";
import BackToTop from "@components/control/BackToTop.astro";
import {siteConfig} from "@/config";

interface Props {
    title: string;
    banner?: string;
}

const { title, banner } = Astro.props
const isHomePage = pathsEqual(Astro.url.pathname, '/')
const enableBanner = siteConfig.banner.enable

---

<Layout title={title} banner={banner}>
<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
    mx-auto gap-4 relative px-0 md:px-4"
     transition:animate="none"
>
    <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
        'h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]': enableBanner && isHomePage,
        'h-[calc(var(--banner-height)_-_4.5rem)]': enableBanner && !isHomePage,}]}
    >
        <Navbar transition:animate="fade" transition:persist></Navbar>
    </div>
    <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem]" transition:persist></SideBar>

    <div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide">
        <!-- the overflow-hidden here prevent long text break the layout-->
        <slot></slot>

    </div>

    <div class="grid-rows-3 col-span-2 mt-4" transition:persist transition:animate="fade">
        <Footer transition:persist></Footer>
    </div>
    <BackToTop></BackToTop>
</div>
</Layout>

<style>
#top-row {
    view-transition-name: rrrr;
}
/* i don't know how this work*/
html::view-transition-old(rrrr) {
    mix-blend-mode: normal;
    animation: none;
    height: auto;
    overflow: clip;
    object-fit: none;
}
html::view-transition-new(rrrr) {
    mix-blend-mode: normal;
    animation: none;
    height: auto;
    overflow: clip;
    object-fit: none;
}
</style>
<style lang="stylus" is:global>
.banner-closed
    #top-row
      height: 4.5rem;
</style>