From bd2d5a49f2b553b1eca8ab27ffdd5f6715a1d2f3 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Thu, 16 Dec 2021 19:01:37 +0100
Subject: [PATCH] wip(fs.dev): Work on navigation

---
 .../components/navigation/primary.js          | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/freesewing.shared/components/navigation/primary.js b/packages/freesewing.shared/components/navigation/primary.js
index e3af568b6dc..b44e8ca9b22 100644
--- a/packages/freesewing.shared/components/navigation/primary.js
+++ b/packages/freesewing.shared/components/navigation/primary.js
@@ -1,9 +1,14 @@
+import get from 'lodash.get'
 import Icon from 'shared/components/icon/index.js'
 import nav from 'site/prebuild/navigation.js'
 import Link from 'next/link'
+import orderBy from 'lodash.orderby'
 
 const keepClosed = ['blog', 'showcase', ]
 
+const linkClasses = {className: 'hover:text-underline color-primary'}
+
+
 const TopLevel = ({ icon, title, nav, current }) => (
   <details className='p-2' open={((keepClosed.indexOf(current._slug) === -1) ? 1 : 0)}>
     <summary className={`
@@ -11,16 +16,27 @@ const TopLevel = ({ icon, title, nav, current }) => (
       hover:cursor-row-resize
       hover:bg-base-200
       p-2
+      text-primary
     `}>
-      <Link href={`/${current._slug}/`} className='hover:cursor-pointer'>{icon}</Link>
-      <Link href={`/${current._slug}/`} className='hover:cursor-pointer'>{title}</Link>
+      {icon}
+      <Link
+        href={`/${current._slug}/`}
+        className='hover:cursor-pointer'
+      >
+        {title}
+      </Link>
     </summary>
     <div className='pl-4'>
       <ul>
-        <li>Getting started on Linux</li>
-        <li>Getting started on Mac</li>
-        <li>Getting started on Windows</li>
-        <li>Pattern design tutorial</li>
+        {orderBy(Object.values(current._children), ['order', 'title'], ['asc', 'asc']).map(item => {
+          console.log(item)
+          const target = item._slug ? get(nav, item._slug.split('/')) : '/'
+          return (
+            <li key={item._slug}>
+              { item?._linktitle || item._title }
+            </li>
+          )
+        })}
       </ul>
     </div>
   </details>
@@ -38,7 +54,7 @@ const Navigation = ({ nav, app }) => {
         icon={<Icon icon={key}/>}
         title={key}
         key={key}
-        nav={nav}
+        nav={nav[app.language]}
         current={nav[app.language][key]}
       />
     )