Skip to content

Commit

Permalink
add footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@constantgillet
constantgillet committed Apr 27, 2024
1 parent ec46ac2 commit 5cb723b
Showing 1 changed file with 195 additions and 132 deletions.
327 changes: 195 additions & 132 deletions app/routes/_app._main-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,167 +57,230 @@ export default function MainLayout() {

return (
<div>
<header
<div
className={css({
borderBottom: "1px solid var(--gray-a5)",
backgroundColor: "var(--color-panel)",
paddingY: "18px",
minHeight: "calc(100vh - 49px)",
})}
>
<div
className={cx(
container({
display: "flex",
justifyContent: "space-between",
})
)}
<header
className={css({
borderBottom: "1px solid var(--gray-a5)",
backgroundColor: "var(--color-panel)",
paddingY: "18px",
})}
>
<div
className={css({
display: "flex",
})}
className={cx(
container({
display: "flex",
justifyContent: "space-between",
})
)}
>
<div
className={css({
mr: "24px",
})}
>
<Link to={"/app"}>
<img
src="/images/rendless-logo.png"
alt="Logo"
width={120}
height={"auto"}
/>
</Link>
</div>
<div
className={css({
spaceX: "24px",
display: "flex",
gap: "4px",
})}
>
{links.map((link) => (
<Link key={link.href} to={link.href} title={link.label}>
<Button
variant="ghost"
size="3"
color="gray"
style={{
background: link.href.includes(pathname)
? "var(--gray-a3)"
: undefined,
}}
disabled={link.disabled}
>
<Icon name={link.iconName} size="md" />
{link.label}
</Button>
<div
className={css({
mr: "24px",
})}
>
<Link to={"/app"}>
<img
src="/images/rendless-logo.png"
alt="Logo"
width={120}
height={"auto"}
/>
</Link>
))}
</div>
<div
className={css({
spaceX: "24px",
display: "flex",
gap: "4px",
})}
>
{links.map((link) => (
<Link key={link.href} to={link.href} title={link.label}>
<Button
variant="ghost"
size="3"
color="gray"
style={{
background: link.href.includes(pathname)
? "var(--gray-a3)"
: undefined,
}}
disabled={link.disabled}
>
<Icon name={link.iconName} size="md" />
{link.label}
</Button>
</Link>
))}
</div>
</div>
</div>
<div className={css({ display: "flex", gap: 4 })}>
<div className={css({ display: "flex", gap: "2" })}>
<Link to={"https://docs.rendless.com"} className={linkClassName}>
Doc
<Icon
name="open"
size="md"
className={css({
transform: "translateY(-8px)",
ml: "1",
})}
/>
</Link>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="ghost" size="2" color="gray">
{user?.username}
<Avatar
fallback={user?.username[0] || ""}
size="1"
radius="full"
<div className={css({ display: "flex", gap: 4 })}>
<div className={css({ display: "flex", gap: "2" })}>
<Link
to={"https://docs.rendless.com"}
className={linkClassName}
>
Doc
<Icon
name="open"
size="md"
className={css({
transform: "translateY(-8px)",
ml: "1",
})}
/>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<Link to={"/account"}>
<DropdownMenu.Item>General settings</DropdownMenu.Item>
</Link>
<Link to={"/onboarding"}>
<DropdownMenu.Item>Onboarding</DropdownMenu.Item>
</Link>
<DropdownMenu.Separator />
<DropdownMenu.Item
onClick={() => {
signout();
}}
>
Logout
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="ghost" size="2" color="gray">
{user?.username}
<Avatar
fallback={user?.username[0] || ""}
size="1"
radius="full"
/>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<Link to={"/account"}>
<DropdownMenu.Item>General settings</DropdownMenu.Item>
</Link>
<Link to={"/onboarding"}>
<DropdownMenu.Item>Onboarding</DropdownMenu.Item>
</Link>
<DropdownMenu.Separator />
<DropdownMenu.Item
onClick={() => {
signout();
}}
>
Logout
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div>
</div>
</header>
<div
className={css({
spaceY: "24px",
})}
>
</header>
<div
className={css({
h: "160px",
position: "relative",
borderBottom: "1px solid var(--gray-a4)",
display: "flex",
justifyContent: "center",
alignItems: "center",
spaceY: "24px",
})}
>
<div className={cx(container())}>
<h1
<div
className={css({
h: "160px",
position: "relative",
borderBottom: "1px solid var(--gray-a4)",
display: "flex",
justifyContent: "center",
alignItems: "center",
})}
>
<div className={cx(container())}>
<h1
className={css({
fontSize: "2xl",
fontWeight: "semibold",
textTransform: "capitalize",
})}
>
{pageTitle}
</h1>
</div>

<div
className={css({
fontSize: "2xl",
fontWeight: "semibold",
textTransform: "capitalize",
position: "absolute",
top: 0,
left: 0,
w: "full",
h: "full",
backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E")`,
//background: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E")'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E)`,
maskImage: "linear-gradient(180deg,transparent,#000)",
})}
>
{pageTitle}
</h1>
></div>
<div
className={css({
top: 0,
left: 0,
w: "full",
h: "full",
position: "absolute",
background:
"linear-gradient(191deg, rgba(62, 99, 221, .15) 0%, rgba(0, 212, 255, 0) 44%)",
})}
></div>
</div>

<div
<div className={container()}>
<Outlet />
</div>
</div>
</div>
<footer className={css({})}>
<div
className={cx(
container(),
css({
borderTop: "1px solid var(--gray-a5)",
display: "flex",
py: "12px",
justifyContent: "space-between",
})
)}
>
<Link
to={"/app"}
className={css({
position: "absolute",
top: 0,
left: 0,
w: "full",
h: "full",
backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E")`,
//background: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E")'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E)`,
maskImage: "linear-gradient(180deg,transparent,#000)",
display: "flex",
gap: "2px",
alignItems: "center",
color: "var(--gray-10)",
})}
></div>
>
<img
src="/images/rendless-logo.png"
alt="Logo"
width={82}
height={"auto"}
className={css({
opacity: 0.5,
})}
/>
© 2024
</Link>
<div
className={css({
top: 0,
left: 0,
w: "full",
h: "full",
position: "absolute",
background:
"linear-gradient(191deg, rgba(62, 99, 221, .15) 0%, rgba(0, 212, 255, 0) 44%)",
display: "flex",
gap: "8px",
alignItems: "center",
})}
></div>
</div>
<div className={container()}>
<Outlet />
>
<Link to={"/terms"} className={linkClassName}>
Terms
</Link>
<Link to={"/privacy"} className={linkClassName}>
Privacy
</Link>
<Link to={"/contact"} className={linkClassName}>
Contact
</Link>
<Link to={"https://docs.rendless.com"} className={linkClassName}>
Doc
</Link>
</div>
</div>
</div>
</footer>
</div>
);
}

0 comments on commit 5cb723b

Please sign in to comment.