fix height problems

This commit is contained in:
2026-06-18 01:58:53 +02:00
parent 0d79adb104
commit c742b8e457
4 changed files with 58 additions and 16 deletions

View File

@@ -1,11 +1,16 @@
'use client'
import type { ReactNode } from "react";
import { Sidebar, SidebarContent, SidebarProvider } from "~/components/ui/sidebar";
import type { RouterOutputs } from "~/server/routers/_app"
import SidebarTriggerDisappearsOnMobile from "./SidebarTriggerDisappearsOnMobile";
import CvCategory from "./CvCategory";
import { useTimeLine } from "~/app/_providers/GsapProvicer";
export default function CvPage(props: { cv: RouterOutputs['categoryv2']['listAllWithEntries'] }) {
export default function CvPage(props: {
cv: RouterOutputs['categoryv2']['listAllWithEntries'],
descriptions: Record<string, ReactNode>,
}) {
useTimeLine(props.cv)
const { descriptions } = props
const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
props.cv?.filter((c) => c.layoutPosition === pos) ?? []
const sidebarCategories = byPosition("sidebar")
@@ -21,7 +26,7 @@ export default function CvPage(props: { cv: RouterOutputs['categoryv2']['listAll
<Sidebar>
<SidebarContent className="p-2 lg:pt-[3.2rem]">
{sidebarCategories.map((cat, i) => (
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
<CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
))}
</SidebarContent>
</Sidebar>
@@ -31,18 +36,18 @@ export default function CvPage(props: { cv: RouterOutputs['categoryv2']['listAll
<div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
<div id="header" className="flex w-full h-fit flex-row gap-4 flex-wrap">
{headerCategories.map((cat, i) => (
<CvCategory layout="row" position={i} category={cat} key={cat.id} />
<CvCategory layout="row" position={i} category={cat} descriptions={descriptions} key={cat.id} />
))}
</div>
<div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
<div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col1Categories.map((cat, i) => (
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
<CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
))}
</div>
<div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col2Categories.map((cat, i) => (
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
<CvCategory layout="col" position={i} category={cat} descriptions={descriptions} key={cat.id} />
))}
</div>
</div>