fix: removed viewType from browser Settings Atom, converted to using path to identify pages

components/Navigation.tsx

@@ -1,9 +1,7 @@
 'use client'
 
-import { browserSettingsAtom } from '@/lib/atoms'
 import { useHelpers } from '@/lib/client-helpers'
 import { HabitIcon, TaskIcon } from '@/lib/constants'
-import { useAtom } from 'jotai'
 import { Calendar, Coins, Gift, Home } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
@@ -12,32 +10,24 @@ import { usePathname } from 'next/navigation'
 
 type ViewPort = 'main' | 'mobile'
 
-const navItems = (isTasksView: boolean) => [
+const navItems = () => [
   { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
-  {
-    icon: isTasksView ? TaskIcon : HabitIcon,
-    label: isTasksView ? 'Tasks' : 'Habits',
-    href: '/habits',
-    position: 'main'
-  },
+  { icon: HabitIcon, label: 'Habits', href: '/habits', position: 'main' },
+  { icon: TaskIcon, label: 'Tasks', href: '/tasks', position: 'main' },
   { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
   { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
   { icon: Coins, label: 'Coins', href: '/coins', position: 'main' },
 ]
 
 interface NavigationProps {
-  className?: string
   viewPort: ViewPort
 }
 
-export default function Navigation({ className, viewPort }: NavigationProps) {
+export default function Navigation({ viewPort }: NavigationProps) {
   const [showAbout, setShowAbout] = useState(false)
   const [isMobileView, setIsMobileView] = useState(false)
-  const [browserSettings] = useAtom(browserSettingsAtom)
-  const isTasksView = browserSettings.viewType === 'tasks'
   const { isIOS } = useHelpers()
   const pathname = usePathname();
-  console.log(pathname, pathname === navItems(false)[1].href)
 
   useEffect(() => {
     const handleResize = () => {
@@ -59,8 +49,8 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
       <>
         <div className={isIOS ? "pb-20" : "pb-16"} /> {/* Add padding at the bottom to prevent content from being hidden */}
         <nav className={`lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg ${isIOS ? "pb-4" : ""}`}>
-          <div className="grid grid-cols-5 w-full">
-            {[...navItems(isTasksView).filter(item => item.position === 'main'), ...navItems(isTasksView).filter(item => item.position === 'bottom')].map((item) => (
+          <div className="grid grid-cols-6 w-full">
+            {...navItems().map((item) => (
               <Link
                 key={item.label}
                 href={item.href}
@@ -88,7 +78,7 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
           <div className="flex flex-col h-0 flex-1 bg-gray-800">
             <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
               <nav className="mt-5 flex-1 px-2 space-y-1">
-                {navItems(isTasksView).filter(item => item.position === 'main').map((item) => (
+                {navItems().filter(item => item.position === 'main').map((item) => (
                   <Link
                     key={item.label}
                     href={item.href}