61 lines
1.6 KiB
Plaintext
61 lines
1.6 KiB
Plaintext
|
---
|
||
|
|
import Layout from "./Layout.astro";
|
||
|
|
import Navbar from "../components/Navbar.astro";
|
||
|
|
import SideBar from "../components/widget/SideBar.astro";
|
||
|
|
import {pathsEqual} from "../utils/url-utils";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
title: string;
|
||
|
|
banner: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { title, banner } = Astro.props;
|
||
|
|
|
||
|
|
const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.pathname, '/page/1');
|
||
|
|
|
||
|
|
const pageWidth = "1200px";
|
||
|
|
const sidebarWidth = "280px";
|
||
|
|
|
||
|
|
---
|
||
|
|
<Layout title={title} banner={banner}>
|
||
|
|
<div class=`max-w-[1200px] grid grid-cols-[280px_auto] grid-auto-rows-[auto] mx-auto gap-4 relative`
|
||
|
|
transition:animate="none"
|
||
|
|
>
|
||
|
|
<div id="top-row" class="col-span-2 grid-rows-1" class:list={{
|
||
|
|
'min-h-[calc(var(--banner-height-home)_-_72px)]': isHomePage,
|
||
|
|
'min-h-[calc(var(--banner-height)_-_72px)]': !isHomePage}}
|
||
|
|
>
|
||
|
|
<Navbar transition:animate="fade" transition:persist></Navbar>
|
||
|
|
</div>
|
||
|
|
<SideBar class="max-w-[280px] col-span-1 grid-rows-2" transition:persist></SideBar>
|
||
|
|
|
||
|
|
<div class="grid-rows-2 grid-cols-2 overflow-hidden" transition:animate="slide">
|
||
|
|
<!-- the overflow-hidden here prevent long text break the layout-->
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</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>
|