Merge pull request #32 from increments/scroll-to-top-with-page-transition

Scroll to top with page transition

Author: kyntk

src/client/components/Article.tsx

@@ -21,21 +21,8 @@ interface Props {
 
 export const Article = ({ renderedBody, tags, title }: Props) => {
   const bodyElement = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(
-    localStorage.getItem("openArticleState") === "true" ? true : false
-  );
-
   const [isRendered, setIsRendered] = useState(false);
 
-  const toggleAccordion = (event: React.MouseEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    setIsOpen((prev) => !prev);
-  };
-
-  useEffect(() => {
-    localStorage.setItem("openArticleState", JSON.stringify(isOpen));
-  }, [isOpen]);
-
   useEffect(() => {
     if (isRendered) {
       bodyElement.current && executeScriptTagsInElement(bodyElement.current);

src/client/components/Layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet, ScrollRestoration } from "react-router-dom";
+
+export const Layout = () => {
+  return (
+    <div>
+      <Outlet />
+      <ScrollRestoration />
+    </div>
+  );
+};

src/client/components/Router.tsx

@@ -1,15 +1,22 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ItemsIndex } from "../pages/items";
 import { ItemsShow } from "../pages/items/show";
+import { Layout } from "./Layout";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <ItemsIndex />,
-  },
-  {
-    path: "/items/:id",
-    element: <ItemsShow />,
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        element: <ItemsIndex />,
+      },
+      {
+        path: "/items/:id",
+        element: <ItemsShow />,
+      },
+    ],
   },
 ]);
 

src/client/components/SidebarContents.tsx

@@ -694,6 +694,8 @@ const closedSidebarStyle = css({
   justifyContent: "space-between",
   maxWidth: 48,
   padding: `${getSpace(1)}px ${getSpace(1 / 2)}px ${getSpace(2)}px`,
+  position: "sticky",
+  top: 0,
 
   ...viewport.S({
     display: "none",

src/client/templates/Contents.tsx

@@ -11,7 +11,5 @@ export const Contents = ({ children }: Props) => {
 
 const contentsStyle = css({
   gridArea: "contents",
-  height: "100vh",
-  overflowX: "auto",
   width: "100%",
 });

src/client/templates/Main.tsx

@@ -18,9 +18,8 @@ const mainStyle = css({
   "sidebar contents"
   `,
   gridTemplateColumns: "auto minmax(450px, 1fr)",
-  height: "100vh",
 
   ...viewport.S({
-    gridTemplateColumns: "auto 1fr",
+    gridTemplateColumns: "auto minmax(0, 1fr)", // Setting min width to prevent widening
   }),
 });

src/client/templates/Sidebar.tsx

@@ -14,4 +14,6 @@ export const Sidebar = ({ children }: Props) => {
 const sidebarStyle = css({
   backgroundColor: Colors.gray0,
   gridArea: "sidebar",
+  position: "sticky",
+  zIndex: 1,
 });