[Fix]: Fixed Navbar dark mode navigation (#1059)

* chore(deps): bump husky from 9.1.5 to 9.1.6 (#1049)

Bumps [husky](https://github.com/typicode/husky) from 9.1.5 to 9.1.6.
- [Release notes](https://github.com/typicode/husky/releases)
- [Commits](typicode/husky@v9.1.5...v9.1.6)

---
updated-dependencies:
- dependency-name: husky
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

fixed navbar dark mode navigation

fixed

fixed

* fixed

* Update package.json

* Update yarn.lock

* Update yarn.lock

* updated file

* white text in dark mode

* Update next-env.d.ts

* Update Layout.tsx

* fixes tools page navigation active class

* Update Format

* Update Layout.tsx

* Update tailwind.config.js

---------

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Granados <[email protected]>

Author: 3 people

components/Layout.tsx

@@ -137,18 +137,26 @@ const MainNavLink = ({
   className?: string;
 }) => {
   const router = useRouter();
+  const isActiveNav = extractPathWithoutFragment(router.asPath) === uri;
+
   return (
     <Link
       href={uri}
       className={classnames(
         className,
-        'font-semibold p-2 md:p-4 dark:text-slate-300',
+        'font-semibold p-2 md:p-4',
         // `${
         //   router.asPath === uri
         //     ? 'text-primary hover:text-primary'
         //     : 'text-slate-600 hover:text-primary'
         // }`,
-        `${extractPathWithoutFragment(router.asPath) === uri ? 'text-primary hover:text-primary' : 'text-slate-600 hover:text-primary'}`,
+        // `${extractPathWithoutFragment(router.asPath) === uri ? 'text-primary dark:text-white dark:underline hover:text-primary' : 'text-slate-600 dark:text-white hover:text-primary dark:hover:underline'}`,
+        {
+          'text-primary dark:text-white dark:underline hover:text-primary':
+            isActiveNav,
+          'text-slate-600 dark:text-white hover:text-primary dark:hover:underline':
+            !isActiveNav,
+        },
       )}
     >
       {label}
@@ -201,7 +209,7 @@ const MainNavigation = () => {
 
       <MainNavLink
         className='hidden lg:block hover:underline'
-        uri='/tools'
+        uri='/tools?query=&sortBy=name&sortOrder=ascending&groupBy=toolingTypes&licenses=&languages=&drafts=&toolingTypes=&environments='
         label='Tools'
         isActive={section === 'tools'}
       />
@@ -290,7 +298,11 @@ const MobileNav = () => {
         isActive={section === 'docs'}
       />
 
-      <MainNavLink uri='/tools' label='Tools' isActive={section === 'tools'} />
+      <MainNavLink
+        uri='/tools?query=&sortBy=name&sortOrder=ascending&groupBy=toolingTypes&licenses=&languages=&drafts=&toolingTypes=&environments='
+        label='Tools'
+        isActive={section === 'tools'}
+      />
       <MainNavLink uri='/blog' label='Blog' isActive={section === 'blog'} />
       <MainNavLink
         uri='/community'

styles/globals.css

@@ -265,6 +265,10 @@ border-radius: 4px; */
   background-color: #fddf4784;
 }
 
+.bg-index-5 {
+  background-color: #773cff84;
+}
+
 @layer base {
   body {
     @apply dark:bg-slate-800 bg-white;

tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  mode: 'jit', // Enable JIT mode
   content: [
     './pages/**/*.{js,ts,jsx,tsx,md}',
     './components/**/*.{js,ts,jsx,tsx,md}',