fix: Melt UI bug & autoscroll bug on the landing page (#220)

* fix: scroll function

* remove console logs

* code refactoring

* remove melt ui

* PR Fix

* PR Fix

* code refactoring

apps/classroomio-com/package.json

@@ -11,8 +11,6 @@
     "prepare": "svelte-kit sync"
   },
   "devDependencies": {
-		"@melt-ui/pp": "^0.1.2",
-		"@melt-ui/svelte": "^0.43.0",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
     "autoprefixer": "^10.4.15",

apps/classroomio-com/src/lib/Navigation/Navigation.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { createDropdownMenu, melt } from '@melt-ui/svelte';
   import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
   import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
   import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
@@ -8,20 +7,10 @@
   import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
   import CourseIcon from '$lib/Icons/CourseIcon.svelte';
   import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
-  import { goto } from '$app/navigation';
 
   let showsubNav = false;
   let showNav = false;
 
-  const {
-    elements: { menu, item, trigger, arrow }
-  } = createDropdownMenu({
-    positioning: {
-      placement: 'bottom-start',
-      fitViewport: true
-    }
-  });
-
   function handleShow() {
     showsubNav = !showsubNav;
   }
@@ -30,17 +19,6 @@
     showNav = !showNav;
   }
 
-  function scroll(key = '') {
-    const el = document.getElementById(key);
-    setTimeout(() => {
-      el?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-        inline: 'nearest'
-      });
-    }, 50);
-  }
-
   const superpowers = [
     {
       key: 'coursemanagement',
@@ -85,22 +63,19 @@
   <nav class="w-[40%] hidden md:hidden lg:block">
     <ul class="flex items-center justify-between w-full gap-2">
       <!--  -->
-      <li class="text-gray-800 font-semibold text-sm cursor-pointer">
-        <button use:melt={$trigger} class="flex items-center"
+      <li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
+        <button class="flex items-center" on:click={() => (showNav = !showNav)}
           >Our Superpowers <ChevronDown class="ml-2" /></button
         >
+        {#if showNav}
           <div
-          use:melt={$menu}
-          class="w-[28%] border px-5 py-5 rounded-[30px] shadow-slate-700 mt-2 z-[3001] ml-[-30px] bg-white"
+            class="absolute w-[24rem] top-10 -left-10 border px-5 py-5 rounded-[30px] shadow-slate-700 z-[3001] bg-white"
           >
             {#each superpowers as superpower}
-            <button
-              use:melt={$item}
+              <a
                 class="flex justify-between items-center w-full rounded-lg hover:bg-slate-100 p-5 mb-4"
-              on:m-click={() => {
-                goto('/');
-                setTimeout(() => scroll(superpower.key), 200);
-              }}
+                href="/#{superpower.key}"
+                on:click={() => (showNav = !showNav)}
               >
                 {#if superpower.key === 'coursemanagement'}
                   <CourseIcon />
@@ -119,11 +94,10 @@
                     {superpower.subtitle}
                   </p>
                 </div>
-            </button>
+              </a>
             {/each}
-
-          <div use:melt={$arrow} />
           </div>
+        {/if}
       </li>
       <!-- More Features -->
       <!-- <a href="/#morefeatures">

apps/classroomio-com/svelte.config.js

@@ -1,4 +1,3 @@
-import { preprocessMeltUI } from '@melt-ui/pp';
 import sequence from 'svelte-sequential-preprocessor';
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/kit/vite';
@@ -37,6 +36,6 @@ const config = {
     adapter: adapter()
   },
   extensions: ['.svelte', '.md'],
-  preprocess: sequence([vitePreprocess(), preprocessMeltUI(), mdsvex(mdsvexOptions)])
+  preprocess: sequence([vitePreprocess(), mdsvex(mdsvexOptions)])
 };
 export default config;