feat(app): improve frontend

apps/app/src/components/ActiveLink.tsx

@@ -4,25 +4,27 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { twMerge } from "tailwind-merge";
 import type { ComponentProps } from "react";
+import { useDevFAQRouter } from "../hooks/useDevFAQRouter";
 
 type ActiveLinkProps = Readonly<{
 	activeClassName: string;
 }> &
 	ComponentProps<typeof Link>;
 
-export const ActiveLink = ({
-	href,
-	className,
-	activeClassName,
-	children,
-	...rest
-}: ActiveLinkProps) => {
+export const ActiveLink = ({ href, className, activeClassName, ...props }: ActiveLinkProps) => {
 	const pathname = usePathname();
+	const { queryParams } = useDevFAQRouter();
+
 	const isActive = pathname?.startsWith(href.toString());
 
 	return (
-		<Link href={href} className={twMerge(className, isActive && activeClassName)} {...rest}>
-			{children}
-		</Link>
+		<Link
+			href={{
+				pathname: href.toString(),
+				query: queryParams,
+			}}
+			className={twMerge(className, isActive && activeClassName)}
+			{...props}
+		/>
 	);
 };

apps/app/src/components/QuestionsSidebar/QuestionsSidebar.tsx

@@ -1,15 +1,25 @@
 "use client";
 
+import { useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 import { useUIContext } from "../../providers/UIProvider";
 import { Button } from "../Button/Button";
 import { CloseButton } from "../CloseButton/CloseButton";
+import { lockScroll, unlockScroll } from "../../utils/pageScroll";
 import { LevelFilter } from "./LevelFilter/LevelFilter";
 import { TechnologyFilter } from "./TechnologyFilter/TechnologyFilter";
 
 export const QuestionsSidebar = () => {
 	const { isSidebarOpen, closeSidebar } = useUIContext();
 
+	useEffect(() => {
+		if (isSidebarOpen) {
+			lockScroll();
+		} else {
+			unlockScroll();
+		}
+	}, [isSidebarOpen]);
+
 	return (
 		<aside
 			className={twMerge(
@@ -19,7 +29,7 @@ export const QuestionsSidebar = () => {
 		>
 			<TechnologyFilter />
 			<LevelFilter />
-			<Button variant="brandingInverse" className="mt-auto sm:hidden">
+			<Button variant="brandingInverse" className="mt-auto sm:hidden" onClick={closeSidebar}>
 				Pokaż wyniki
 			</Button>
 			<CloseButton className="absolute top-1 right-1 sm:hidden" onClick={closeSidebar} />

apps/app/src/hooks/useDevFAQRouter.ts

@@ -5,14 +5,16 @@ export const useDevFAQRouter = () => {
 	const searchParams = useSearchParams();
 	const pathname = usePathname();
 
+	const queryParams = Object.fromEntries(searchParams.entries());
+
 	const mergeQueryParams = (data: Record<string, string>) => {
-		const params = { ...Object.fromEntries(searchParams.entries()), ...data };
+		const params = { ...queryParams, ...data };
 		const query = new URLSearchParams(params).toString();
 
 		if (pathname) {
 			router.push(`${pathname}?${query}`);
 		}
 	};
 
-	return { mergeQueryParams };
+	return { queryParams, mergeQueryParams };
 };