fix: active links are persistent and does not get reset on reload (#58)

* Sidebar active file highlight issue fixed on reload

src/components/guidespage/SubLinks.tsx

@@ -11,7 +11,6 @@ type SubLinksProps = {
 
 const SubLinks: FC<SubLinksProps> = ({ fileList, onLinkClick }) => {
   const { activeLink, setActiveLink } = useDocumentationContext();
-  console.log(activeLink);
 
   fileList = [
     ...fileList.filter((file) => file.name === 'welcome'),

src/context/DocumentationContext.tsx

@@ -7,7 +7,6 @@ import {
   SetStateAction,
   createContext,
   useContext,
-  useEffect,
   useState,
 } from 'react';
 
@@ -36,12 +35,7 @@ type DocumentationProps = {
 // Context Provider
 const DocumentationProvider: FC<DocumentationProps> = ({ children }) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const [activeLink, setActiveLink] = useState<PostFile['link']>(``);
-
-  useEffect(() => {
-    setActiveLink(links[2].to);
-    return () => setActiveLink(``);
-  }, []);
+  const [activeLink, setActiveLink] = useState<PostFile['link']>(links[2].to);
 
   // Functions...
   function openSidebar() {

src/layouts/DocumentationLayout.tsx

@@ -44,7 +44,8 @@ const DocumentationLayout: FC<DocumentationLayoutProps> = ({
                   {width < 1024 && <DocList mobile data={menu} />}
                   <BreadCrumb dirName={meta.dirName} fileName={meta.fileName} />
                 </div>
-                <a href={meta.edit}>
+                {/* edit on github */}
+                <a href={meta.edit} target="_blank" rel="noreferrer">
                   <ToolTip tip="Edit on Github" direction="button">
                     <DocEditIcon className="h-6 w-6" />
                   </ToolTip>

src/pages/guides/[...guide].tsx

@@ -1,5 +1,6 @@
 import mdxComponents from '@/components/mdxcomponents';
 import TypoComp from '@/components/utilities/TypoComponent';
+import { useDocumentationContext } from '@/context/DocumentationContext';
 import Container from '@/layouts/Container';
 import DocumentationLayout from '@/layouts/DocumentationLayout';
 import {
@@ -10,12 +11,22 @@ import {
 import type { FolderStructure, Post } from '@/types/client/FileSystem';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import { MDXRemote } from 'next-mdx-remote';
+import { useEffect } from 'react';
 
 type DocsProps = Post & {
   menu: FolderStructure;
+  activeLink: string;
 };
 
-const Guides: NextPage<DocsProps> = ({ menu, meta, source }) => {
+const Guides: NextPage<DocsProps> = ({ activeLink, menu, meta, source }) => {
+  const { setActiveLink } = useDocumentationContext();
+
+  useEffect(() => {
+    setActiveLink(`/guides/${activeLink}`);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeLink]);
+
   return (
     <DocumentationLayout menu={menu} meta={meta} className="text-skin-base">
       <Container className="relative py-4">
@@ -44,13 +55,15 @@ export const getStaticProps: GetStaticProps<DocsProps> = async ({ params }) => {
     const menu = await getDocumentsMenu();
 
     const { guide } = params as { guide: string[] };
-    const { meta, source } = await getContentsFromSlug(guide.join('/'));
+    const activeLink = guide.join('/');
+    const { meta, source } = await getContentsFromSlug(activeLink);
 
     return {
       props: {
         meta,
         source,
         menu,
+        activeLink,
       },
     };
   } catch (error) {