Modifications user guide (#5207)

- Modified layout and responsive
- Added remaining user guide cards
- Added new table of content:


https://github.com/twentyhq/twenty/assets/102751374/007118e5-60f2-4572-90cf-339c134f23c4

-Added fade-in:


https://github.com/twentyhq/twenty/assets/102751374/0669c06d-3eab-484c-a5b5-3857c68f42b5

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/user-guide/hooks/useHeadsObserver.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useHeadsObserver(location: string) {
+  const [activeText, setActiveText] = useState('');
+  const observer = useRef<IntersectionObserver | null>(null);
+  useEffect(() => {
+    const handleObsever = (entries: any[]) => {
+      entries.forEach((entry) => {
+        if (entry?.isIntersecting) {
+          setActiveText(entry.target.innerText);
+        }
+      });
+    };
+
+    observer.current = new IntersectionObserver(handleObsever, {
+      rootMargin: '0% 0% -85% 0px',
+    });
+
+    const elements = document.querySelectorAll('h2, h3, h4, h5');
+    elements.forEach((elem) => observer.current?.observe(elem));
+    return () => observer.current?.disconnect();
+  }, [location]);
+
+  return { activeText };
+}

packages/twenty-website/src/app/user-guide/layout.tsx

@@ -1,38 +1,13 @@
-'use client';
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { usePathname } from 'next/navigation';
 
-import mq from '@/app/_components/ui/theme/mq';
-import { Theme } from '@/app/_components/ui/theme/theme';
-import UserGuideSidebar from '@/app/_components/user-guide/UserGuideSidebar';
-import UserGuideTableContents from '@/app/_components/user-guide/UserGuideTableContents';
-const StyledContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between: 
-  border-bottom: 1px solid ${Theme.background.transparent.medium};
-`;
-
-const StyledEmptySideBar = styled.div`
-  ${mq({
-    width: '20%',
-    display: ['none', 'none', ''],
-  })};
-`;
+import { UserGuideMainLayout } from '@/app/_components/user-guide/UserGuideMainLayout';
+import { getUserGuideArticles } from '@/content/user-guide/constants/getUserGuideArticles';
 
 export default function UserGuideLayout({ children }: { children: ReactNode }) {
-  const pathname = usePathname();
+  const userGuideIndex = getUserGuideArticles();
   return (
-    <StyledContainer>
-      <UserGuideSidebar />
+    <UserGuideMainLayout userGuideIndex={userGuideIndex}>
       {children}
-      {pathname === '/user-guide' ? (
-        <StyledEmptySideBar />
-      ) : (
-        <UserGuideTableContents />
-      )}
-    </StyledContainer>
+    </UserGuideMainLayout>
   );
 }

packages/twenty-website/src/app/user-guide/page.tsx

@@ -1,4 +1,5 @@
 import UserGuideMain from '@/app/_components/user-guide/UserGuideMain';
+import { getUserGuideArticles } from '@/content/user-guide/constants/getUserGuideArticles';
 
 export const metadata = {
   title: 'Twenty - User Guide',
@@ -10,5 +11,7 @@ export const metadata = {
 export const dynamic = 'force-dynamic';
 
 export default async function UserGuideHome() {
-  return <UserGuideMain />;
+  const userGuideArticleCards = getUserGuideArticles();
+
+  return <UserGuideMain userGuideArticleCards={userGuideArticleCards} />;
 }