Merge branch 'css-rework-sidenav' of https://github.com/sendou-ink/sendou.ink into css-rework-sidenav

app/components/Main.tsx

@@ -18,7 +18,6 @@ export const Main = ({
 	halfWidth?: boolean;
 	bigger?: boolean;
 	style?: React.CSSProperties;
-	sideNav?: React.ReactNode;
 }) => {
 	const error = useRouteError();
 	const isMinorSupporter = useHasRole("MINOR_SUPPORT");

app/components/layout/index.module.css

@@ -60,7 +60,7 @@
 }
 
 .siteLogoS {
-	font-size: 15px;
+	font-size: 14px;
 	position: relative;
 	top: -4px;
 }
@@ -68,7 +68,7 @@
 .siteLogoInk {
 	font-size: 12px;
 	position: relative;
-	top: 5px;
+	bottom: -4px;
 }
 
 .siteLogo:focus-visible {

app/features/components-showcase/routes/components.tsx

@@ -1,6 +1,6 @@
 import { parseDate } from "@internationalized/date";
 import { Check, Plus, Search, SquarePen, Trash } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Ability } from "~/components/Ability";
 import { AddNewButton } from "~/components/AddNewButton";
 import { Alert } from "~/components/Alert";
@@ -41,7 +41,6 @@ import { Pagination } from "~/components/Pagination";
 import { Placement } from "~/components/Placement";
 import { RelativeTime } from "~/components/RelativeTime";
 import { Section } from "~/components/Section";
-import { ListLink, SideNav } from "~/components/SideNav";
 import { StageSelect } from "~/components/StageSelect";
 import { SubmitButton } from "~/components/SubmitButton";
 import { SubNav, SubNavLink } from "~/components/SubNav";
@@ -99,7 +98,7 @@ export const SECTIONS = [
 
 export default function ComponentsShowcasePage() {
 	return (
-		<Main className="stack lg" sideNav={<ComponentsSideNav />}>
+		<Main className="stack lg">
 			<h1>Components</h1>
 			{SECTIONS.map(({ id, component: Component }) => (
 				<Component key={id} id={id} />
@@ -108,69 +107,6 @@ export default function ComponentsShowcasePage() {
 	);
 }
 
-function ComponentsSideNav() {
-	const [activeSection, setActiveSection] = useState<string | null>(null);
-
-	useEffect(() => {
-		const sectionIds = SECTIONS.map((s) => s.id);
-		const elements = sectionIds
-			.map((id) => document.getElementById(id))
-			.filter(Boolean) as HTMLElement[];
-
-		const observer = new IntersectionObserver(
-			(entries) => {
-				const visibleEntries = entries.filter((entry) => entry.isIntersecting);
-
-				if (visibleEntries.length > 0) {
-					const topMostEntry = visibleEntries.reduce((prev, curr) =>
-						prev.boundingClientRect.top < curr.boundingClientRect.top
-							? prev
-							: curr,
-					);
-
-					setActiveSection(topMostEntry.target.id);
-				}
-			},
-			{ rootMargin: "-10% 0px -80% 0px", threshold: 0 },
-		);
-
-		for (const element of elements) {
-			observer.observe(element);
-		}
-
-		return () => observer.disconnect();
-	}, []);
-
-	const handleClick = (
-		event: React.MouseEvent<HTMLAnchorElement>,
-		id: string,
-	) => {
-		event.preventDefault();
-		const element = document.getElementById(id);
-
-		if (element) {
-			element.scrollIntoView({ behavior: "instant" });
-			window.history.replaceState(null, "", `#${id}`);
-			setActiveSection(id);
-		}
-	};
-
-	return (
-		<SideNav>
-			{SECTIONS.map(({ title, id }) => (
-				<ListLink
-					key={id}
-					to={`#${id}`}
-					onClick={(e) => handleClick(e, id)}
-					isActive={activeSection === id}
-				>
-					{title}
-				</ListLink>
-			))}
-		</SideNav>
-	);
-}
-
 function SectionTitle({
 	id,
 	children,