Layout cleanup

app/components/SideNav.module.css

@@ -8,8 +8,12 @@
 	top: 0;
 	left: 0;
 	height: 100dvh;
-	display: flex;
+	display: none;
 	flex-direction: column;
+
+	@media screen and (min-width: 600px) {
+		display: flex;
+	}
 }
 
 .sideNavCollapsed {
@@ -314,9 +318,3 @@
 .listLinkBadgeWarning {
 	background-color: var(--color-text-second);
 }
-
-@media screen and (max-width: 599px) {
-	.sideNav {
-		display: none;
-	}
-}

app/components/layout/NavDialog.tsx

@@ -11,6 +11,7 @@ import { Image } from "../Image";
 import { LogInButtonContainer } from "./LogInButtonContainer";
 import styles from "./NavDialog.module.css";
 
+// xxx: deprecate?
 export function NavDialog({
 	isOpen,
 	close,

app/components/layout/TopNavMenus.module.css

@@ -1,7 +1,10 @@
 .container {
-	display: flex;
+	display: none;
 	align-items: center;
-	gap: var(--s-1);
+
+	@media screen and (min-width: 600px) {
+		display: flex;
+	}
 }
 
 .menuButton {
@@ -57,9 +60,3 @@
 .menuItemIcon {
 	flex-shrink: 0;
 }
-
-@media screen and (max-width: 1000px) {
-	.container {
-		display: none;
-	}
-}

app/components/layout/TopRightButtons.module.css

@@ -7,7 +7,7 @@
 .searchAndAddContainer {
 	display: grid;
 	grid-template-columns: 2fr 1fr;
-	gap: var(--s-3);
+	gap: var(--s-2);
 }
 
 .searchWrapper > button,

app/components/layout/TopRightButtons.tsx

@@ -11,12 +11,10 @@ export function TopRightButtons({
 	showSupport,
 	showSearch,
 	isLoggedIn,
-	openNavDialog: _openNavDialog,
 }: {
 	showSupport: boolean;
 	showSearch: boolean;
 	isLoggedIn: boolean;
-	openNavDialog: () => void;
 }) {
 	const { t } = useTranslation(["common", "front"]);
 

app/components/layout/index.module.css

@@ -19,7 +19,7 @@
 	width: 100%;
 	height: var(--layout-nav-height);
 	align-items: center;
-	gap: var(--s-3);
+	gap: var(--s-2);
 	border-bottom: 1.5px solid var(--color-border);
 	background-color: var(--color-bg);
 	font-weight: var(--weight-extra);
@@ -170,11 +170,9 @@
 }
 
 .mobileLogo {
-	display: none;
-}
+	display: flex;
 
-@media screen and (max-width: 599px) {
-	.mobileLogo {
-		display: flex;
+	@media screen and (min-width: 600px) {
+		display: none;
 	}
 }

app/components/layout/index.tsx

@@ -38,7 +38,6 @@ import sideNavStyles from "../SideNav.module.css";
 import { Footer } from "./Footer";
 import styles from "./index.module.css";
 import { LogInButtonContainer } from "./LogInButtonContainer";
-import { NavDialog } from "./NavDialog";
 import { NotificationContent, useNotifications } from "./NotificationPopover";
 import notificationPopoverStyles from "./NotificationPopover.module.css";
 import { TopNavMenus } from "./TopNavMenus";
@@ -166,7 +165,6 @@ export function Layout({
 	children: React.ReactNode;
 	data?: RootLoaderData;
 }) {
-	const [navDialogOpen, setNavDialogOpen] = React.useState(false);
 	const [sideNavCollapsed, setSideNavCollapsed] = useSideNavCollapsed(
 		data?.sidenavCollapsed ?? false,
 	);
@@ -192,7 +190,6 @@ export function Layout({
 
 	return (
 		<>
-			<NavDialog isOpen={navDialogOpen} close={() => setNavDialogOpen(false)} />
 			<SideNav
 				collapsed={sideNavCollapsed}
 				footer={
@@ -310,11 +307,6 @@ export function Layout({
 					<Link to="/" className={clsx(styles.siteLogo, styles.mobileLogo)}>
 						<SiteLogoContent />
 					</Link>
-					{sideNavCollapsed ? (
-						<div className={styles.headerCollapsedBreadcrumbs}>
-							<SiteTitle />
-						</div>
-					) : null}
 					<SideNavCollapseButton
 						onToggle={() => setSideNavCollapsed(!sideNavCollapsed)}
 					/>
@@ -327,7 +319,6 @@ export function Layout({
 						)}
 						showSearch={Boolean(data?.user)}
 						isLoggedIn={Boolean(data?.user)}
-						openNavDialog={() => setNavDialogOpen(true)}
 					/>
 				</header>
 				{showLeaderboard ? <MyRampUnit /> : null}