Improvement: algolia search (#104)

* perf: algolia search

* feat: add classes for algolia search

* refactor: remove link from my website

components/sidebar-menu/sidebar-details.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+import { cn } from '@/lib/utils'
+
+type SidebarDetailProps = {
+  name: string
+  children: React.ReactNode
+}
+
+export const SidebarDetails = ({ name, children }: SidebarDetailProps) => {
+  const pathname = usePathname()
+
+  return (
+    <details>
+      <summary
+        className={cn({
+          'selected-menu':
+            name.toLowerCase().includes(pathname.split('/')[2]) ||
+            pathname === '/',
+        })}>
+        {name}
+      </summary>
+      {children}
+    </details>
+  )
+}

components/sidebar-menu/sidebar-menu.tsx

@@ -1,5 +1,8 @@
+import { usePathname } from 'next/navigation'
+
 import { getMenu } from '@/lib/mdx/get-menu'
 
+import { SidebarDetails } from './sidebar-details'
 import LinkWrapper from './sidebar-selected'
 
 type SidebarMenuProps = {
@@ -17,8 +20,7 @@ export const SidebarMenu = async ({ className }: SidebarMenuProps) => {
         </li>
         {menu.map(menuItem => (
           <li key={menuItem.name}>
-            <details>
-              <summary>{menuItem.name}</summary>
+            <SidebarDetails name={menuItem.name}>
               <ul className='grid gap-1'>
                 {menuItem.items.map((item, index) => {
                   return (
@@ -32,7 +34,7 @@ export const SidebarMenu = async ({ className }: SidebarMenuProps) => {
                   )
                 })}
               </ul>
-            </details>
+            </SidebarDetails>
           </li>
         ))}
       </ul>

components/sidebar-menu/sidebar-selected.tsx

@@ -6,25 +6,25 @@ import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/utils'
 
 type LinkWrapperProps = {
-	href: string
-	children: React.ReactNode
-	className?: string
+  href: string
+  children: React.ReactNode
+  className?: string
 }
 
 export default function LinkWrapper({
-	href,
-	children,
-	className,
+  href,
+  children,
+  className,
 }: LinkWrapperProps) {
-	const pathname = usePathname()
+  const pathname = usePathname()
 
-	return (
-		<Link
-			href={href}
-			className={cn(className, {
-				'border border-separate': pathname === href,
-			})}>
-			{children}
-		</Link>
-	)
+  return (
+    <Link
+      href={href}
+      className={cn(className, {
+        'border border-separate selected-submenu': pathname === href,
+      })}>
+      {children}
+    </Link>
+  )
 }

docs/frontend/streamers.mdx

@@ -15,8 +15,6 @@ submenu:
         url: 'https://www.twitch.tv/vamoacodear'
       - type: 'Ig'
         url: 'https://www.instagram.com/vamoacodear'
-      - type: 'Web'
-        url: 'https://vamoacodear.com.ar/'
       - type: 'Discord'
         url: 'https://discord.gg/JYnKadCSkV'
       - type: 'X'