fix: APPS popover closing issue

vishalkondle-dev · Jun 22, 2024 · beba8a1 · beba8a1
1 parent fb56f81
commit beba8a1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>