issue: 227 Automaticaly collapse after redirecting to the desired page (

#247)

components/Picker/LanguagePicker.tsx

@@ -1,6 +1,6 @@
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { CountableTag } from "../../types";
 import { SectionTitle } from "../SectionTitle";
 import { PickerItem } from "./PickerItem";
@@ -14,6 +14,12 @@ type LanguagePickerProps = {
 export const LanguagePicker = ({ activeTagId, languages, onLanguagePage }: LanguagePickerProps) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
 
+  // Automatically collapse the sidebar after redirection
+  useEffect(() => {
+    setIsCollapsed(true);
+  }, [onLanguagePage, activeTagId]);
+
+  // Toggle the collapsible sidebar
   const toggleCollapsible = () => {
     setIsCollapsed(!isCollapsed);
   };

components/Picker/TagPicker.tsx

@@ -1,6 +1,6 @@
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
+import { useState,useEffect } from "react";
 import { CountableTag } from "../../types";
 import { ShowMoreButton } from "../Button/ShowMoreButton";
 import { SectionTitle } from "../SectionTitle";
@@ -20,6 +20,11 @@ export const TagPicker = ({ tags, activeTagId, onTagPage }: TagPickerProps) => {
 
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
 
+  // Automatically collapse the sidebar after redirection
+  useEffect(() => {
+    setIsCollapsed(true);
+  }, [activeTagId]);
+
   const toggleCollapsible = () => {
     setIsCollapsed(!isCollapsed);
   };
@@ -35,6 +40,7 @@ export const TagPicker = ({ tags, activeTagId, onTagPage }: TagPickerProps) => {
     setShowMore(!showMore);
   };
 
+
   return (
     <div className="pt-6">
       <div