diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 6365f2f49..b00ca0b56 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -1,7 +1,8 @@
-import { useLocation } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import type { RootLoaderData } from "~/root";
+import { LOGO_PATH } from "~/utils/urls";
import { Image } from "../Image";
import { ColorModeToggle } from "./ColorModeToggle";
import { Footer } from "./Footer";
@@ -31,6 +32,14 @@ export const Layout = React.memo(function Layout({
return (
+
+
+
{!isCatchBoundary ? : null}
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 078694087..871612f73 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -10,11 +10,22 @@
position: relative;
z-index: 501;
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
padding: var(--s-4);
background-color: var(--bg);
}
+.layout__logo {
+ display: flex;
+ width: var(--item-size);
+ height: var(--item-size);
+ align-items: center;
+ justify-content: center;
+ background-color: var(--bg-lighter);
+ background-image: url("/svg/background-pattern.svg");
+ border-radius: var(--rounded);
+}
+
.layout__avatar {
width: var(--item-size);
height: var(--item-size);
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index 3fb9ddc53..dd697e2e0 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -33,6 +33,7 @@ export const SEED_URL = "/seed";
export const COMMON_PREVIEW_IMAGE = "/img/layout/common-preview.png";
export const ERROR_GIRL_IMAGE_PATH = `/img/layout/error-girl`;
+export const LOGO_PATH = `/img/layout/logo`;
export const userPage = (discordId: string) => `/u/${discordId}`;
export const userBuildsPage = (discordId: string) =>
diff --git a/public/img/layout/logo.avif b/public/img/layout/logo.avif
new file mode 100644
index 000000000..761be81d3
Binary files /dev/null and b/public/img/layout/logo.avif differ
diff --git a/public/img/layout/logo.png b/public/img/layout/logo.png
new file mode 100644
index 000000000..01097dadb
Binary files /dev/null and b/public/img/layout/logo.png differ