Merge pull request #237 from Cloud-Code-AI/234-highlight-active-navigation-item

feat: highlight the header based on the page you are at

Author: sauravpanda

packages/akiradocs/compiled/manifest.json

@@ -0,0 +1,42 @@
+{
+  "files": [
+    ".DS_Store",
+    "de/.DS_Store",
+    "de/api/apiSpec.json",
+    "de/articles/_meta.json",
+    "de/articles/ai_integration.json",
+    "de/articles/template.json",
+    "de/articles/welcome.json",
+    "de/docs/_meta.json",
+    "de/docs/getting-started/quickstart.json",
+    "de/docs/introduction.json",
+    "en/.DS_Store",
+    "en/api/apiSpec.json",
+    "en/articles/_meta.json",
+    "en/articles/ai_integration.json",
+    "en/articles/template.json",
+    "en/articles/welcome.json",
+    "en/docs/_meta.json",
+    "en/docs/getting-started/quickstart.json",
+    "en/docs/guides/analytics.json",
+    "en/docs/introduction.json",
+    "es/.DS_Store",
+    "es/api/apiSpec.json",
+    "es/articles/_meta.json",
+    "es/articles/ai_integration.json",
+    "es/articles/template.json",
+    "es/articles/welcome.json",
+    "es/docs/_meta.json",
+    "es/docs/getting-started/quickstart.json",
+    "es/docs/introduction.json",
+    "fr/.DS_Store",
+    "fr/api/apiSpec.json",
+    "fr/articles/_meta.json",
+    "fr/articles/ai_integration.json",
+    "fr/articles/template.json",
+    "fr/articles/welcome.json",
+    "fr/docs/_meta.json",
+    "fr/docs/getting-started/quickstart.json",
+    "fr/docs/introduction.json"
+  ]
+}

packages/akiradocs/public/context/en_docs.txt

@@ -22,7 +22,7 @@ Getting Started: Start by customizing this template to match your project's need
 [Document: articles/template.json]
 Title: Test Blog Post
 A test blog post to demonstrate all block types.
-Example Heading Sample1
+Example Heading
 This paragraph is part of the test blog post. It demonstrates the paragraph block.
 Code example:
 console.log('Testing all blocks');

packages/akiradocs/src/app/[locale]/[type]/[...slug]/page.tsx

@@ -113,7 +113,7 @@ export default async function ContentPage({ params }: Props) {
         description={pageDescription}
         canonical={canonicalUrl}
       />
-      <Header {...headerConfig} currentLocale={locale} />
+      <Header {...headerConfig} currentLocale={locale} currentType={`${locale}/${type}`}/>
       <div className="flex flex-grow">
         <Navigation key={type} locale={locale} items={navigationItems} />
         <div className="flex-1 flex py-4 w-full">

packages/akiradocs/src/app/aiSearch/page.tsx

@@ -15,6 +15,8 @@ import { getAkiradocsConfig } from '@/lib/getAkiradocsConfig'
 import { ChatCompletionMessageParam, CreateMLCEngine } from "@mlc-ai/web-llm";
 import { Source } from '@/types/Source'
 import AILoader from '@/components/aiSearch/AILoader'
+import { getHeaderConfig } from '@/lib/headerConfig'
+import { Header } from '@/components/layout/Header'
 
 export default function Home() {
   const [query, setQuery] = useState('')
@@ -23,6 +25,7 @@ export default function Home() {
   const [error, setError] = useState<string | null>(null)
   const recommendedArticles = getRecommendedArticles()
   const searchConfig = getSearchConfig()
+  const headerConfig = getHeaderConfig()
   const config = getAkiradocsConfig()
   const [sources, setSources] = useState<Source[]>([])
 
@@ -160,7 +163,10 @@ export default function Home() {
   }
 
   return (
+    <div className="flex flex-col min-h-screen">
+      <Header {...headerConfig} currentLocale={`en`} currentType={`aiSearch`}/>
     <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+      
       <div className="max-w-4xl mx-auto">
         <SearchHeader 
           logo={searchConfig.logo}
@@ -201,5 +207,6 @@ export default function Home() {
         </AnimatePresence>
       </div>
     </div>
+    </div>
   )
 }

packages/akiradocs/src/app/apiReference/page.tsx

@@ -312,7 +312,7 @@ export default function Page() {
     <Suspense fallback={<LoadingSpinner />}>
 
     <div className="flex flex-col min-h-screen">
-      <Header {...headerConfig} currentLocale={locale} />
+      <Header {...headerConfig} currentLocale={locale} currentType={`en/apiReference`}/>
       <div className="flex flex-1">
         <ApiSidebar />
         <main className="flex-1 h-full overflow-y-auto pt-6 px-6">

packages/akiradocs/src/components/layout/Header.tsx

@@ -34,7 +34,8 @@ export const Header = memo(function Header({
   navItems,
   socialLinks,
   languages,
-  currentLocale = 'en'
+  currentLocale = 'en',
+  currentType = 'docs'
 }: HeaderConfig) {
   const [isMounted, setIsMounted] = useState(false)
   const { theme, setTheme } = useTheme()
@@ -104,31 +105,36 @@ export const Header = memo(function Header({
 
   // Memoize the navigation items
   const navigationItems = useMemo(() => {
-    return navItems?.filter((item) => item.show).map((item, index) => (
-      <motion.div
-        key={index}
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -20 }}
-        transition={{ delay: index * 0.1 }}
-      >
-        <Link
-          href={item.href}
-          className={`group relative flex items-center gap-x-2 text-sm font-medium transition-colors px-3 py-2 rounded-md
-          ${pathname === item.href
-              ? 'text-foreground bg-muted'
-              : 'text-muted-foreground hover:text-foreground'
-            }`}
+    return navItems?.filter((item) => item.show).map((item, index) => {
+      // Check if the current nav item matches the page type
+      const isActive = currentType ? item.href.includes(`/${currentType}`) : pathname === item.href;
+      
+      return (
+        <motion.div
+          key={index}
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ delay: index * 0.1 }}
         >
-          {t(item.label as string)}
-          <span
-            className={`absolute inset-x-0 -bottom-px h-0.5 bg-primary transition-transform duration-150 ease-in-out
-            ${pathname === item.href ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`}
-          />
-        </Link>
-      </motion.div>
-    ))
-  }, [navItems, pathname])
+          <Link
+            href={item.href}
+            className={`group relative flex items-center gap-x-2 text-sm font-medium transition-colors px-3 py-2 rounded-md
+            ${isActive
+                ? 'text-foreground bg-muted'
+                : 'text-muted-foreground hover:text-foreground'
+              }`}
+          >
+            {t(item.label as string)}
+            <span
+              className={`absolute inset-x-0 -bottom-px h-0.5 bg-primary transition-transform duration-150 ease-in-out
+              ${isActive ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`}
+            />
+          </Link>
+        </motion.div>
+      );
+    });
+  }, [navItems, pathname, currentType]);
 
   return (
     <motion.header

packages/akiradocs/src/types/config.ts

@@ -39,6 +39,7 @@ interface NavItem {
       }[];
     };
     currentLocale?: string;
+    currentType?: string;
   }
 
   export interface FooterConfig {

packages/create-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-akiradocs",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "Create Akira Docs documentation sites with one command",
   "main": "./dist/index.js",
   "type": "module",