From 03169117edfdabacc5caf1c014cb248ff5ea3bd3 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 15 Nov 2022 18:37:09 +0800
Subject: [PATCH] update tutorials

---
 .../NavigationMenu.constants.ts               | 108 +++++++++++++++---
 .../NavigationMenuGuideList.tsx               |   3 +-
 2 files changed, 96 insertions(+), 15 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index e54e424ea8..0b1fa69bb0 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -51,20 +51,100 @@ export const tutorials = {
   icon: '/img/icons/menu/tutorials.svg',
   label: 'Quickstarts',
   items: [
-    { name: 'Angular', url: '/guides/with-angular', items: [] },
-    { name: 'Expo', url: '/guides/with-expo', items: [] },
-    { name: 'Flutter', url: '/guides/with-flutter', items: [] },
-    { name: 'Ionic Angular', url: '/guides/with-ionic-angular', items: [] },
-    { name: 'Ionic React', url: '/guides/with-ionic-react', items: [] },
-    { name: 'Ionic Vue', url: '/guides/with-ionic-vue', items: [] },
-    { name: 'Next.js', url: '/guides/with-nextjs', items: [] },
-    { name: 'Nuxt 3', url: '/guides/with-nuxt-3', items: [] },
-    { name: 'React', url: '/guides/with-react', items: [] },
-    { name: 'RedwoodJS', url: '/guides/with-redwoodjs', items: [] },
-    { name: 'SolidJS', url: '/guides/with-solidjs', items: [] },
-    { name: 'Svelte', url: '/guides/with-svelte', items: [] },
-    { name: 'SvelteKit', url: '/guides/with-sveltekit', items: [] },
-    { name: 'Vue 3', url: '/guides/with-vue-3', items: [] },
+    {
+      name: 'Javascript',
+      items: [
+        { name: 'React', url: '/guides/with-react', items: [], icon: '/img/icons/react-icon.svg' },
+        {
+          name: 'Next.js',
+          url: '/guides/with-nextjs',
+          items: [],
+          icon: '/img/icons/Next-icon.svg',
+        },
+        {
+          name: 'Angular',
+          url: '/guides/with-angular',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+        {
+          name: 'Nuxt 3',
+          url: '/guides/with-nuxt-3',
+          items: [],
+          icon: '/img/icons/Nuxt-icon.svg',
+        },
+        {
+          name: 'RedwoodJS',
+          url: '/guides/with-redwoodjs',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+        {
+          name: 'SolidJS',
+          url: '/guides/with-solidjs',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+        {
+          name: 'Svelte',
+          url: '/guides/with-svelte',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+        {
+          name: 'SvelteKit',
+          url: '/guides/with-sveltekit',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+        {
+          name: 'Vue 3',
+          url: '/guides/with-vue-3',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+      ],
+    },
+    {
+      name: 'Mobile based',
+      items: [
+        {
+          name: 'Flutter',
+          url: '/guides/with-flutter',
+          items: [],
+          icon: '/img/icons/flutter-icon.svg',
+        },
+        {
+          name: 'Expo',
+          url: '/guides/with-expo',
+          items: [],
+          icon: '/img/icons/menu/functions.svg',
+        },
+      ],
+    },
+    {
+      name: 'Low code',
+      items: [
+        {
+          name: 'Ionic Angular',
+          url: '/guides/with-ionic-angular',
+          items: [],
+          icon: '/img/icons/angular-icon.svg',
+        },
+        {
+          name: 'Ionic React',
+          url: '/guides/with-ionic-react',
+          items: [],
+          icon: '/img/icons/react-icon.svg',
+        },
+        {
+          name: 'Ionic Vue',
+          url: '/guides/with-ionic-vue',
+          items: [],
+          icon: '/img/icons/Ionic-icon.svg',
+        },
+      ],
+    },
   ],
 }
 export const cli = {
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 553b3a7199..e72d8997f9 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -83,8 +83,9 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, tempBasePath, id }) =
                     onClick={() => {
                       router.push(`/${tempBasePath}${x.href}`)
                     }}
-                    className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900"
+                    className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3"
                   >
+                    {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
                     {x.name}
                   </a>
                 </li>