diff --git a/src/components/EntriesListSidebar.tsx b/src/components/EntriesListSidebar.tsx index 031b154..c18ab26 100644 --- a/src/components/EntriesListSidebar.tsx +++ b/src/components/EntriesListSidebar.tsx @@ -7,17 +7,44 @@ import { useQuery } from "@tanstack/react-query" import api from "../api/eolas-api" import { Link } from "react-router" +import { useState, useRef, useEffect } from "react" + export default function EntriesListSidebar() { + const scrollRef = useRef(null) + const [isOpen, setIsOpen] = useState(() => { + if (typeof window !== "undefined") { + const saved = sessionStorage.getItem("entries_list_sidebar_open") + return saved ? JSON.parse(saved) : false + } + return false + }) + const { data: entries, isLoading } = useQuery({ queryKey: ["entries_list"], queryFn: () => api.get("/entries").then((res) => res.data), }) - console.log(entries) + useEffect(() => { + sessionStorage.setItem("entries_list_sidebar_open", JSON.stringify(isOpen)) + }, [isOpen]) + + useEffect(() => { + const savedScroll = sessionStorage.getItem("entries_list_sidebar_scroll_position") + if (savedScroll && scrollRef.current) { + scrollRef.current.scrollTop = parseInt(savedScroll) + } + }, [entries]) + + const handleScroll = () => { + if (scrollRef.current) { + sessionStorage.setItem("entries_list_sidebar_scroll_position", scrollRef.current.scrollTop) + } + } + return ( - + - + @@ -30,7 +57,7 @@ export default function EntriesListSidebar() { -
+
{entries?.data.map((item, i) => ( diff --git a/src/components/TagListSidebar.tsx b/src/components/TagListSidebar.tsx index 7911eb0..fb698e5 100644 --- a/src/components/TagListSidebar.tsx +++ b/src/components/TagListSidebar.tsx @@ -1,29 +1,48 @@ import { Tags, ChevronRight } from "lucide-react" - -import { - SidebarMenuButton, - SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, -} from "@/components/ui/sidebar" +import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar" import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible" import { CollapsibleContent } from "../components/ui/collapsible" import { useQuery } from "@tanstack/react-query" import api from "../api/eolas-api" import { Badge } from "./ui/badge" import { Link } from "react-router" +import { useState, useRef, useEffect } from "react" export default function TagListSidebar() { - const { data: tags, isLoading } = useQuery({ + const scrollRef = useRef(null) + + const [isOpen, setIsOpen] = useState(() => { + if (typeof window !== "undefined") { + const saved = sessionStorage.getItem("tags_list_sidebar_open") + return saved ? JSON.parse(saved) : false + } + return false + }) + + const { data: tags } = useQuery({ queryKey: ["tag_list"], queryFn: () => api.get("/tags").then((res) => res.data), }) - console.log(tags) + useEffect(() => { + sessionStorage.setItem("tags_list_sidebar_open", JSON.stringify(isOpen)) + }, [isOpen]) + + useEffect(() => { + const savedScroll = sessionStorage.getItem("tags_list_sidebar_open") + if (savedScroll && scrollRef.current) { + scrollRef.current.scrollTop = parseInt(savedScroll) + } + }, [tags]) + + const handleScroll = () => { + if (scrollRef.current) { + sessionStorage.setItem("tags_list_sidebar_open", scrollRef.current.scrollTop) + } + } return ( - + @@ -33,13 +52,12 @@ export default function TagListSidebar() { {tags?.count} - -
+
{tags?.data.map((item, i) => ( @@ -51,10 +69,6 @@ export default function TagListSidebar() { ))} - {/* - - -*/}
diff --git a/src/templates/Entry.tsx b/src/templates/Entry.tsx index 72f5963..ebfc819 100644 --- a/src/templates/Entry.tsx +++ b/src/templates/Entry.tsx @@ -2,24 +2,24 @@ import Main from "@/templates/Main" import { useParams } from "react-router" export default function Entry() { - const { entry } = useParams() - return ( -
-
-
-
-
-
-

- {entry?.replace(/_/g, " ")} -

-
+ const { entry } = useParams() + return ( +
+
+
+
+
+
+

+ {entry?.replace(/_/g, " ")} +

+
-
-
-
-
-
-
- ) +
+
+
+
+
+
+ ) } diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx index dd8880f..407efdf 100644 --- a/src/templates/Main.tsx +++ b/src/templates/Main.tsx @@ -2,16 +2,16 @@ import AppHeader from "@/components/AppHeader" import { AppSidebar } from "@/containers/AppSidebar" import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar" -export default function Main({ children, pageTitle = undefined }) { - return ( - <> - - - - -
{children}
-
-
- - ) +export default function Main({ children, pageTitle }) { + return ( + <> + + + + +
{children}
+
+
+ + ) }