added dark mode for sidebar/mobile menu (wasp-lang#17)

* added dark mode for sidebar

* fixed menu behavior

* removed lucide icons, replaced with react-icons icon

Author: martinovicdev

app/main.wasp

@@ -83,7 +83,6 @@ app SaaSTemplate {
     ("@faker-js/faker", "8.3.1"),
     ("@google-analytics/data", "4.1.0"),
     ("openai", "^4.24.1"),
-    ("lucide-react", "0.306.0"),
     ("prettier", "3.1.1"),
     ("prettier-plugin-tailwindcss", "0.5.11"),
     ("zod", "3.22.4")

app/src/client/app/DemoAppPage.tsx

@@ -7,7 +7,7 @@ import { useQuery } from '@wasp/queries';
 import getAllTasksByUser from '@wasp/queries/getAllTasksByUser';
 import { Task } from '@wasp/entities';
 import { CgSpinner } from 'react-icons/cg';
-import { XSquare } from 'lucide-react';
+import { TiDelete } from 'react-icons/ti';
 
 export default function DemoAppPage() {
   return (
@@ -97,7 +97,7 @@ function Todo({ id, isDone, description, time }: TodoProps) {
       </div>
       <div className='flex items-center justify-end w-15'>
         <button className='p-1' onClick={handleDeleteClick} title='Remove task'>
-          <XSquare size='20' className='text-red-600 hover:text-red-700' />
+          <TiDelete size='20' className='text-red-600 hover:text-red-700' />
         </button>
       </div>
     </div>

app/src/client/components/AppNavBar.tsx

@@ -13,20 +13,25 @@ import { Link } from '@wasp/router';
 
 const navigation = [
   { name: 'AI Scheduler (Demo App)', href: '/demo-app' },
-  { name: 'Pricing', href: '/pricing'},
-  { name: 'Documentation', href: DOCS_URL }, 
-  { name: 'Blog', href: BLOG_URL }, 
-]; 
+  { name: 'Pricing', href: '/pricing' },
+  { name: 'Documentation', href: DOCS_URL },
+  { name: 'Blog', href: BLOG_URL },
+];
 
-const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
+const NavLogo = () => (
+  <img className='h-8 w-8' src={logo} alt='Your SaaS App' />
+);
 
 export default function AppNavBar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const { data: user, isLoading: isUserLoading } = useAuth();
   return (
     <header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border-strokedark dark:bg-boxdark-2'>
-      <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
+      <nav
+        className='flex items-center justify-between p-6 lg:px-8'
+        aria-label='Global'
+      >
         <div className='flex lg:flex-1'>
           <a href='/' className='-m-1.5 p-1.5'>
             <img className='h-8 w-8' src={logo} alt='My SaaS App' />
@@ -35,7 +40,7 @@ export default function AppNavBar() {
         <div className='flex lg:hidden'>
           <button
             type='button'
-            className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700'
+            className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white'
             onClick={() => setMobileMenuOpen(true)}
           >
             <span className='sr-only'>Open main menu</span>
@@ -60,7 +65,10 @@ export default function AppNavBar() {
             </ul>
           </div>
           {isUserLoading ? null : !user ? (
-            <a href={!user ? '/login' : '/account'} className='text-sm font-semibold leading-6 ml-4'>
+            <a
+              href={!user ? '/login' : '/account'}
+              className='text-sm font-semibold leading-6 ml-4'
+            >
               <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
                 Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
               </div>
@@ -72,17 +80,22 @@ export default function AppNavBar() {
           )}
         </div>
       </nav>
-      <Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+      <Dialog
+        as='div'
+        className='lg:hidden'
+        open={mobileMenuOpen}
+        onClose={setMobileMenuOpen}
+      >
         <div className='fixed inset-0 z-50' />
-        <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
+        <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
           <div className='flex items-center justify-between'>
             <a href='/' className='-m-1.5 p-1.5'>
               <span className='sr-only'>Your SaaS</span>
               <NavLogo />
             </a>
             <button
               type='button'
-              className='-m-2.5 rounded-md p-2.5 text-gray-700'
+              className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
               onClick={() => setMobileMenuOpen(false)}
             >
               <span className='sr-only'>Close menu</span>
@@ -96,7 +109,7 @@ export default function AppNavBar() {
                   <a
                     key={item.name}
                     href={item.href}
-                    className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50'
+                    className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white hover:dark:bg-boxdark-2'
                   >
                     {item.name}
                   </a>
@@ -105,7 +118,7 @@ export default function AppNavBar() {
               <div className='py-6'>
                 {isUserLoading ? null : !user ? (
                   <Link to='/login'>
-                    <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500'>
+                    <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
                       Log in <BiLogIn size='1.1rem' className='ml-1' />
                     </div>
                   </Link>
@@ -119,4 +132,4 @@ export default function AppNavBar() {
       </Dialog>
     </header>
   );
-}
+}