client side i18n fully implemented

components/Sidebar.tsx

@@ -6,8 +6,10 @@ import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
 import CollectionListing from "@/components/CollectionListing";
+import { useTranslation } from "next-i18next";
 
 export default function Sidebar({ className }: { className?: string }) {
+  const { t } = useTranslation();
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
     const storedValue = localStorage.getItem("tagDisclosure");
     return storedValue ? storedValue === "true" : true;
@@ -82,7 +84,7 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm">Collections</p>
+          <p className="text-sm">{t("collections")}</p>
           <i
             className={`bi-chevron-down ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
@@ -109,7 +111,7 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm">Tags</p>
+          <p className="text-sm">{t("tags")}</p>
           <i
             className={`bi-chevron-down  ${
               tagDisclosure ? "rotate-reverse" : "rotate"
@@ -152,7 +154,7 @@ export default function Sidebar({ className }: { className?: string }) {
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
                 <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
-                  You Have No Tags...
+                  {t("you_have_no_tags")}
                 </p>
               </div>
             )}