Add missing elements

Author: cdedreuille

apps/frontpage/components/docs/sidebar/icons.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC } from 'react';
 
 export const DocsIcon: FC = () => (
   <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
@@ -32,12 +32,27 @@ export const TutorialsIcon: FC = () => (
 export const ChangelogIcon: FC = () => (
   <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M6.06 18c-.419 0-.828-.194-1.093-.519a1.39 1.39 0 0 1-.281-1.16l1.143-5.615H2.84a.84.84 0 0 1-.766-1.18L6.089.5a.84.84 0 0 1 .767-.5h6.213a.84.84 0 0 1 .76 1.198L12.097 4.87h3.267a.84.84 0 0 1 .658 1.36L7.11 17.515A1.382 1.382 0 0 1 6.06 18ZM4.133 9.028h2.724a.84.84 0 0 1 .823 1.007L6.57 15.49l7.062-8.94h-2.857a.84.84 0 0 1-.76-1.197l1.732-3.672H7.403l-3.27 7.347Z"
+      d="M3.099 9.374 6.497.13A.2.2 0 0 1 6.685 0h6.276a.2.2 0 0 1 .184.278l-2.5 5.872a.2.2 0 0 0 .184.279h4.746a.2.2 0 0 1 .154.327l-9.03 10.908c-.067.082-.2.015-.174-.088l1.888-7.685a.2.2 0 0 0-.194-.248H3.287a.2.2 0 0 1-.188-.27Z"
       fill="#FF4785"
     />
+  </svg>
+);
+
+export const IntegrationsIcon: FC = () => (
+  <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M6.857 9.027H4.133l3.27-7.347h4.343l-1.731 3.672a.84.84 0 0 0 .76 1.197h2.857l-7.063 8.94 1.11-5.455a.836.836 0 0 0-.822-1.007Z"
-      fill="#FFA0C0"
+      d="M16 2.4v7.634a.4.4 0 0 1-.683.283L7.683 2.683A.4.4 0 0 1 7.966 2H15.6c.22 0 .4.18.4.4Z"
+      fill="#37D5D3"
     />
+    <circle cx="7" cy="11" fill="#87E6E5" r="5" />
+  </svg>
+);
+
+export const APIIcon: FC = () => (
+  <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="#A8E38C" height="16" rx="8" width="18" y="1.001" />
+    <g fill="#489524">
+      <path d="M7.348 12.345a.52.52 0 0 0 0-.73l-2.606-2.63 2.606-2.628a.521.521 0 0 0-.37-.856.511.511 0 0 0-.355.125l-2.97 2.991a.519.519 0 0 0 0 .737l2.97 2.991a.514.514 0 0 0 .365.156.512.512 0 0 0 .36-.156ZM11.011 12.5a.512.512 0 0 1-.474-.321.523.523 0 0 1 .114-.565l2.607-2.629-2.607-2.628a.521.521 0 0 1 .37-.856c.13-.005.257.04.355.125l2.971 2.991a.52.52 0 0 1 0 .737l-2.971 2.991a.515.515 0 0 1-.365.156Z" />
+    </g>
   </svg>
 );

apps/frontpage/components/docs/sidebar/sidebar.tsx

@@ -5,8 +5,14 @@ import type { FC, ReactNode } from 'react';
 import { cn } from '@repo/utils';
 import { usePathname } from 'next/navigation';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { ScrollBar } from "../../ui/scroll-area";
-import { ChangelogIcon, DocsIcon, TutorialsIcon } from './icons';
+import { ScrollBar } from '../../ui/scroll-area';
+import {
+  APIIcon,
+  ChangelogIcon,
+  DocsIcon,
+  IntegrationsIcon,
+  TutorialsIcon,
+} from './icons';
 
 interface SidebarProps {
   children: ReactNode;
@@ -21,36 +27,39 @@ export const Sidebar: FC<SidebarProps> = ({ children }) => {
         <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
           <div className="py-12 pl-1 pr-4">
             <nav className="flex flex-col gap-1.5 text-sm font-medium">
-              <Link
-                className={cn(
-                  'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
-                  pathname === '/docs' && 'text-blue-500',
-                )}
+              <Line
                 href="/docs"
-              >
-                <DocsIcon />
-                Documentation
-              </Link>
-              <Link
-                className={cn(
-                  'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
-                  pathname === '/tutorials' && 'text-blue-500',
-                )}
-                href="#"
-              >
-                <TutorialsIcon />
-                Tutorials
-              </Link>
-              <Link
-                className={cn(
-                  'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
-                  pathname.startsWith('/releases') && 'text-blue-500',
-                )}
+                icon={<DocsIcon />}
+                isActive={
+                  pathname.startsWith('/docs') &&
+                  !pathname.startsWith('/docs/api')
+                }
+                label="Documentation"
+              />
+              <Line
+                href="/docs/api"
+                icon={<APIIcon />}
+                isActive={pathname.startsWith('/docs/api')}
+                label="API"
+              />
+              <Line
+                href="/#"
+                icon={<TutorialsIcon />}
+                isActive={pathname === '/tutorials'}
+                label="Tutorials"
+              />
+              <Line
+                href="/integrations"
+                icon={<IntegrationsIcon />}
+                isActive={false}
+                label="Integrations"
+              />
+              <Line
                 href="/releases"
-              >
-                <ChangelogIcon />
-                Changelog
-              </Link>
+                icon={<ChangelogIcon />}
+                isActive={pathname.startsWith('/releases')}
+                label="Changelog"
+              />
             </nav>
             {children}
           </div>
@@ -60,3 +69,21 @@ export const Sidebar: FC<SidebarProps> = ({ children }) => {
     </nav>
   );
 };
+
+export const Line: FC<{
+  isActive: boolean;
+  href: string;
+  icon: ReactNode;
+  label: string;
+}> = ({ isActive, href, label, icon }) => (
+  <Link
+    className={cn(
+      'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
+      isActive && 'text-blue-500',
+    )}
+    href={href}
+  >
+    {icon}
+    {label}
+  </Link>
+);