Sidebar styling

src/lib/components/Course/components/Navigation/NavExpandable.svelte

@@ -24,7 +24,7 @@
 
 <div class="">
   <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 hover:text-black {isGroupActive &&
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
       NavClasses.active} w-[95%]"
     tabindex="0"
     on:click={onClick}

src/lib/components/Course/components/Navigation/index.svelte

@@ -197,7 +197,7 @@
                     aria-disabled={!item.is_unlocked}
                   >
                     <div
-                      class="flex items-center py-3 px-4 rounded hover:opacity-80 w-full hover:bg-gray-200 hover:text-black {(
+                      class="flex items-center py-3 px-4 {NavClasses.item} {(
                         path || $page.url.pathname
                       ).includes(item.id) && NavClasses.active}"
                     >

src/lib/components/LMS/SideBar.svelte

@@ -68,7 +68,7 @@
         {#each sideLinks as item (item.name)}
           <a href={item.link} class="text-black">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
+              class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
                 $page.url.pathname,
                 `${item.link}`
               ) && NavClasses.active}"
@@ -95,7 +95,7 @@
       </a>
       <a href="/lms/settings" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:opacity-80 {isActive(
+          class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
             $page.url.pathname,
             `/lms/settings`
           ) && NavClasses.active}"

src/lib/components/Org/SideBar.svelte

@@ -77,7 +77,7 @@
         {#each menuItems as menuItem}
           <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 hover:text-black dark:hover:text-black {isActive(
+              class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
                 $page.url.pathname,
                 `${$currentOrgPath}${menuItem.path}`
               )
@@ -113,7 +113,7 @@
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 hover:text-black dark:hover:text-black {isActive(
+          class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
             $page.url.pathname,
             `${$currentOrgPath}/settings`
           )

src/lib/components/PageNav/index.svelte

@@ -101,21 +101,6 @@
     top: 0;
   }
 
-  .active {
-    position: relative;
-    display: inline-block;
-  }
-
-  .active::after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 3px;
-    background-color: var(--main-primary-color);
-    display: block;
-    bottom: -8px;
-  }
-
   .header.bring-down {
     flex-direction: column;
     align-items: flex-start;

src/lib/utils/constants/reusableClass.js

@@ -1,5 +1,6 @@
 export const NavClasses = {
   active:
-    'bg-gray-200 dark:bg-gray-300 text-black dark:text-black transition delay-150 duration-300 ease-in-out',
-  background: ''
+    'bg-gray-200 dark:bg-gray-700 hover:dark:text-white text-black dark:text-white transition delay-150 duration-300 ease-in-out',
+  background: '',
+  item: 'hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black hover:dark:text-white rounded'
 };