SideNav match quick access initial

app/components/SideNav.module.css

@@ -7,7 +7,9 @@
 	position: sticky;
 	top: 0;
 	left: 0;
-	height: fit-content;
+	height: 100dvh;
+	display: flex;
+	flex-direction: column;
 }
 
 .sideNavTop {
@@ -17,6 +19,7 @@
 	display: flex;
 	align-items: center;
 	padding-inline: var(--s-2);
+	flex-shrink: 0;
 }
 
 .sideNavTopCentered {
@@ -30,7 +33,8 @@
 	padding: var(--s-1-5);
 	padding-block-end: var(--s-2);
 	overflow-y: auto;
-	height: calc(100dvh - (var(--layout-nav-height) * 2));
+	flex: 1;
+	min-height: 0;
 }
 
 .sideNavFooter {
@@ -41,6 +45,7 @@
 	padding: var(--s-1-5) var(--s-2-5);
 	background-color: var(--color-bg-high);
 	border-top: 1.5px solid var(--color-border);
+	flex-shrink: 0;
 }
 
 .sideNavFooterUser {
@@ -118,6 +123,39 @@
 	outline: 2px solid var(--color-bg-high);
 }
 
+.sideNavGameStatus {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	padding: var(--s-1-5) var(--s-2-5);
+	text-decoration: none;
+	color: var(--color-text);
+	border-top: 1.5px solid var(--color-border);
+	font-size: var(--fonts-xs);
+	font-weight: var(--semi-bold);
+	flex-shrink: 0;
+	border-radius: 0;
+}
+
+.sideNavGameStatus:hover {
+	background-color: var(--color-bg-higher);
+}
+
+.sideNavGameStatusIcon {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background-color: var(--color-bg-higher);
+	display: grid;
+	place-items: center;
+	flex-shrink: 0;
+}
+
+.sideNavGameStatusIcon img {
+	width: 24px;
+	height: 24px;
+}
+
 .sideNavHeader {
 	color: var(--color-text-high);
 	padding: var(--s-1-5) var(--s-2);

app/components/SideNav.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-aria-components";
 import { SendouButton } from "~/components/elements/Button";
 import { CrossIcon } from "~/components/icons/Cross";
+import { Image } from "./Image";
 import styles from "./SideNav.module.css";
 
 export function SideNav({
@@ -129,3 +130,22 @@ export function SideNavPanel({
 export function SideNavFooter({ children }: { children: React.ReactNode }) {
 	return <div className={styles.sideNavFooter}>{children}</div>;
 }
+
+export function SideNavGameStatus({
+	iconUrl,
+	text,
+	href,
+}: {
+	iconUrl: string;
+	text: string;
+	href: string;
+}) {
+	return (
+		<a href={href} className={styles.sideNavGameStatus}>
+			<div className={styles.sideNavGameStatusIcon}>
+				<Image path={iconUrl} alt="" />
+			</div>
+			<span>{text}</span>
+		</a>
+	);
+}

app/components/layout/index.tsx

@@ -7,7 +7,7 @@ import { Link, useLocation, useMatches } from "react-router";
 import { useUser } from "~/features/auth/core/user";
 import type { RootLoaderData } from "~/root";
 import type { Breadcrumb, SendouRouteHandle } from "~/utils/remix.server";
-import { SETTINGS_PAGE, userPage } from "~/utils/urls";
+import { navIconUrl, SETTINGS_PAGE, userPage } from "~/utils/urls";
 import { Avatar } from "../Avatar";
 import { SendouButton } from "../elements/Button";
 import { SendouPopover } from "../elements/Popover";
@@ -19,7 +19,13 @@ import { HamburgerIcon } from "../icons/Hamburger";
 import { LogInIcon } from "../icons/LogIn";
 import { TwitchIcon } from "../icons/Twitch";
 import { UsersIcon } from "../icons/Users";
-import { SideNav, SideNavFooter, SideNavHeader, SideNavLink } from "../SideNav";
+import {
+	SideNav,
+	SideNavFooter,
+	SideNavGameStatus,
+	SideNavHeader,
+	SideNavLink,
+} from "../SideNav";
 import sideNavStyles from "../SideNav.module.css";
 import { Footer } from "./Footer";
 import styles from "./index.module.css";
@@ -155,9 +161,16 @@ export function Layout({
 			) : null}
 			<SideNav
 				footer={
-					<SideNavFooter>
-						<SideNavUserPanel />
-					</SideNavFooter>
+					<>
+						<SideNavGameStatus
+							iconUrl={navIconUrl("sendouq")}
+							text="Match #92432 started!"
+							href="/q/match/123"
+						/>
+						<SideNavFooter>
+							<SideNavUserPanel />
+						</SideNavFooter>
+					</>
 				}
 				top={<SiteTitle />}
 				topCentered={isFrontPage}