From beba8a1633d62c7a2f4233539bc4feae93d4a3a4 Mon Sep 17 00:00:00 2001
From: vishal <vishal.kondle@gmail.com>
Date: Sun, 23 Jun 2024 04:00:48 +0530
Subject: [PATCH] fix: APPS popover closing issue

---
 app/api/todos/route.ts       |  1 +
 components/App/App.tsx       |  9 +++++++--
 components/Layout/Layout.tsx | 24 +++++++++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/api/todos/route.ts b/app/api/todos/route.ts
index e604b7f..e69a71f 100644
--- a/app/api/todos/route.ts
+++ b/app/api/todos/route.ts
@@ -13,6 +13,7 @@ import {
   getTodaysTodos,
   getRecentTodos,
 } from '@/lib/functions';
+import '@/models/TodoList';
 
 export async function GET(req: NextRequest) {
   try {
diff --git a/components/App/App.tsx b/components/App/App.tsx
index 60b15db..94009a5 100644
--- a/components/App/App.tsx
+++ b/components/App/App.tsx
@@ -6,18 +6,23 @@ import { APPS } from '@/lib/constants';
 interface Props {
   app: (typeof APPS)[number];
   isCurrent: boolean;
+  setOpened: any;
 }
 
-const App = ({ app, isCurrent }: Props) => {
+const App = ({ app, isCurrent, setOpened }: Props) => {
   const router = useRouter();
   const { hovered, ref } = useHover();
+
   return (
     <Paper
       p="xs"
       ref={ref}
       bg={hovered || isCurrent ? `${app.color}.3` : 'transparent'}
       key={app.path}
-      onClick={() => router.push(app?.path || '')}
+      onClick={() => {
+        setOpened(false);
+        router.push(app?.path || '');
+      }}
       style={{ cursor: 'pointer' }}
       c={hovered || isCurrent ? 'white' : 'dark'}
     >
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index b4272a9..5c3c5c3 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -25,6 +25,7 @@ import { APPS } from '@/lib/constants';
 export default function Layout({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile, close }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+  const [opened, setOpened] = useState(false);
   const session = useSession();
   const loading = session?.status === 'loading';
   const isLoggedIn = session?.status === 'authenticated';
@@ -107,16 +108,33 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           <Group gap={0}>
             {isLoggedIn && (
               <>
-                <Popover position="bottom" withArrow shadow="md">
+                <Popover
+                  opened={opened}
+                  onChange={setOpened}
+                  position="bottom"
+                  withArrow
+                  shadow="md"
+                >
                   <Popover.Target>
-                    <ActionIcon variant="subtle" color="gray" radius="xl" size="lg">
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      radius="xl"
+                      size="lg"
+                      onClick={() => setOpened((o) => !o)}
+                    >
                       <IconGridDots stroke={3} style={{ width: rem(20), height: rem(20) }} />
                     </ActionIcon>
                   </Popover.Target>
                   <Popover.Dropdown p="xs">
                     <SimpleGrid spacing="xs" cols={3}>
                       {APPS.map((app) => (
-                        <App isCurrent={APP?.path === app?.path} key={app?.path} app={app} />
+                        <App
+                          setOpened={setOpened}
+                          isCurrent={APP?.path === app?.path}
+                          key={app?.path}
+                          app={app}
+                        />
                       ))}
                     </SimpleGrid>
                   </Popover.Dropdown>