fix: fixed width and scrolling issue

Author: Akshaybagai52

components/Accordion.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 interface AccordionItem {
   question: string;
   answer: string;
-  id?: number;
+  id: number;
 }
 
 interface AccordionProps {
@@ -12,37 +13,74 @@ interface AccordionProps {
 
 const Accordion: React.FC<AccordionProps> = ({ items }) => {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const router = useRouter();
 
   const handleToggle = (index: number) => {
     setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
   };
 
+  useEffect(() => {
+    const hash = router.asPath.split('#')[1];
+    if (hash) {
+      const id = parseInt(hash, 10);
+      const index = items.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        setActiveIndex(index);
+
+        setTimeout(() => {
+          const element = document.getElementById(hash);
+          if (element) {
+            const navbarHeight = 150;
+            const offset = element.offsetTop - navbarHeight;
+            window.scrollTo({ top: offset, behavior: 'smooth' });
+          }
+        }, 0);
+      }
+    }
+  }, [items, router.asPath]);
+
+  const handleLinkClick = (id: number) => {
+    const index = items.findIndex((item) => item.id === id);
+    setActiveIndex(index);
+
+    const newUrl = `#${id}`;
+    router.push(newUrl, undefined, { shallow: true });
+  };
+
   return (
     <div>
       {items.map((item, index) => (
         <div
-          key={index}
+          key={item.id || index}
           className={`overflow-hidden transition-max-height border-t-2 ${
             activeIndex === index ? 'max-h-96' : 'max-h-20'
-          }  ${index === items.length - 1 ? 'border-b-2' : ''}`}
+          } ${index === items.length - 1 ? 'border-b-2' : ''}`}
         >
-          <div
-            className='flex justify-between items-center p-4 cursor-pointer'
-            onClick={() => handleToggle(index)}
-          >
+          <div className='flex justify-between items-center p-4 cursor-pointer'>
             <div className='text-[20px]'>
-              <a href={`#${item.id}`}>{item.question}</a>
+              <a
+                href={`#${item.id}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleLinkClick(item.id);
+                }}
+              >
+                {item.question}
+              </a>
             </div>
             <div
               className={`transform transition-transform text-[20px] ${
                 activeIndex === index ? 'rotate-45' : ''
               }`}
+              onClick={() => handleToggle(index)}
             >
               &#43;
             </div>
           </div>
           {activeIndex === index && (
-            <div className='p-2 text-gray-500'>{item.answer}</div>
+            <div id={`${item.id}`} className='p-2 text-gray-500'>
+              {item.answer}
+            </div>
           )}
         </div>
       ))}

components/Sidebar.tsx

@@ -127,7 +127,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
   const pathWtihoutFragment = extractPathWithoutFragment(router.asPath);
   return (
     <div className='max-w-[1400px] mx-auto flex flex-col items-center'>
-      <section>
+      <section className='w-full'>
         <div className='bg-primary w-full h-12 mt-[4.5rem] z-150 flex relative flex-col justify-between items-center lg:hidden'>
           <div
             className='z-[150] flex w-full bg-primary justify-between items-center mt-2'

pages/overview/faq/index.page.tsx

@@ -3,6 +3,7 @@ import { getLayout } from '~/components/Sidebar';
 import Head from 'next/head';
 import { SectionContext } from '~/context';
 import Faq from '~/components/Faq';
+import { Headline1 } from '~/components/Headlines';
 
 export default function Content() {
   const newTitle = 'Frequently Asked Questions';
@@ -12,9 +13,7 @@ export default function Content() {
       <Head>
         <title>{newTitle}</title>
       </Head>
-      <h1 className='group cursor-pointer hover:underline text-h1mobile md:text-h1  font-bold pt-10 mb-6'>
-        Frequently Asked Questions
-      </h1>
+      <Headline1>{newTitle}</Headline1>
       <Faq category='general' />
     </SectionContext.Provider>
   );