feat(web-admin): Make sidebar responsive (#276)

* feat(web-admin): Make sidebar responsive (#274) * feat: Return details of checkedin participant * fix(web-admin):added toasts * fix(web-admin): Sidebar responsive --------- Co-authored-by: Allen Shibu <[email protected]> * Fix --------- Co-authored-by: JOZEF ANTONY NEELAMKAVIL <[email protected]>
IEDCMEC · Feb 4, 2024 · 4869dff · 4869dff
1 parent 4ffbcde
commit 4869dff
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 38 deletions.
diff --git a/apps/web-admin/src/components/Sidebar.jsx b/apps/web-admin/src/components/Sidebar.jsx
@@ -1,16 +1,23 @@
 import { useState } from 'react';
-
-import { useRouter } from 'next/router';
-import Link from 'next/link';
-
 import { useAuth0 } from '@auth0/auth0-react';
-
-import { Box, Text, Button, Flex } from '@chakra-ui/react';
-
-const Sidebar = () => {
+import {
+  Box,
+  Text,
+  Button,
+  Flex,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  useMediaQuery,
+} from '@chakra-ui/react';
+import Link from 'next/link';
+const Sidebar = ({ isOpen, onClose }) => {
   const [loading, setLoading] = useState(false);
-
   const { logout } = useAuth0();
+  const [isMobile] = useMediaQuery('(max-width: 768px)');
 
   const handleLogout = (e) => {
     e.preventDefault();
@@ -23,31 +30,81 @@ const Sidebar = () => {
   };
 
   return (
-    <Box padding={4} height="100%" width={80}>
-      <Box paddingY={4}>
-        <Text fontSize="4xl" fontWeight="bold">
-          techno
-        </Text>
-      </Box>
-      <Flex paddingY={4} direction="column" gap={2}>
-        <Text fontSize="xl">
-          <Link href="/organizations">Organizations</Link>
-        </Text>
-        <Text fontSize="xl">
-          <Link href="/organizations">Events</Link>
-        </Text>
-      </Flex>
-      <Box paddingY={4}>
-        <Text fontSize="xl">
-          <a href="/settings">Settings</a>
-        </Text>
-      </Box>
-      <Box paddingY={4}>
-        <Button onClick={handleLogout} isLoading={loading} loadingText="Please Wait" width="100%">
-          Logout
-        </Button>
-      </Box>
-    </Box>
+    <>
+      {/* Desktop Sidebar */}
+      {!isMobile ? (
+        <Box display={{ base: 'none', md: 'block' }} padding={4} height="100%" width={80}>
+          <Box paddingY={4}>
+            <Text fontSize="4xl" fontWeight="bold">
+              techno
+            </Text>
+          </Box>
+          <Flex paddingY={4} direction="column" gap={2}>
+            <Text fontSize="xl">
+              <Link href="/organizations">Organizations</Link>
+            </Text>
+            <Text fontSize="xl">
+              <Link href="/events">Events</Link>
+            </Text>
+          </Flex>
+          <Box paddingY={4}>
+            <Text fontSize="xl">
+              <a href="/settings">Settings</a>
+            </Text>
+          </Box>
+          <Box paddingY={4}>
+            <Button
+              onClick={handleLogout}
+              isLoading={loading}
+              loadingText="Please Wait"
+              width="100%"
+            >
+              Logout
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        <>
+          <Drawer isOpen={isOpen} onClose={onClose} placement="left">
+            <DrawerOverlay>
+              <DrawerContent>
+                <DrawerCloseButton />
+                <DrawerHeader>
+                  <Text fontSize="2xl" fontWeight="bold">
+                    techno
+                  </Text>
+                </DrawerHeader>
+                <DrawerBody>
+                  <Flex direction="column" gap={2}>
+                    <Text fontSize="xl">
+                      <Link href="/organizations">Organizations</Link>
+                    </Text>
+                    <Text fontSize="xl">
+                      <Link href="/events">Events</Link>
+                    </Text>
+                  </Flex>
+                  <Box paddingY={4}>
+                    <Text fontSize="xl">
+                      <a href="/settings">Settings</a>
+                    </Text>
+                  </Box>
+                  <Box paddingY={4}>
+                    <Button
+                      onClick={handleLogout}
+                      isLoading={loading}
+                      loadingText="Please Wait"
+                      width="100%"
+                    >
+                      Logout
+                    </Button>
+                  </Box>
+                </DrawerBody>
+              </DrawerContent>
+            </DrawerOverlay>
+          </Drawer>
+        </>
+      )}
+    </>
   );
 };
 

diff --git a/apps/web-admin/src/layouts/DashboardLayout.jsx b/apps/web-admin/src/layouts/DashboardLayout.jsx
@@ -1,7 +1,16 @@
-import { Box } from '@chakra-ui/react';
+import { Box, IconButton, useMediaQuery, Button } from '@chakra-ui/react';
+
 import Sidebar from '@/components/Sidebar';
+import { useState } from 'react';
 
 export default function DashboardLayout({ children }) {
+  const [isMobile] = useMediaQuery('(max-width: 768px)');
+  const [isSidebarOpen, setSidebarOpen] = useState(!isMobile);
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!isSidebarOpen);
+  };
+
   return (
     <Box
       sx={{
@@ -10,8 +19,37 @@ export default function DashboardLayout({ children }) {
         flexDirection: 'row',
       }}
     >
-      <Sidebar />
-      {children}
+      {isMobile && (
+        <Button
+          colorScheme="#dfdfdf"
+          onClick={() => {
+            setSidebarOpen(true);
+          }}
+          position="fixed"
+          top={4}
+          left={4}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            width="30"
+            height="30"
+            viewBox="0 0 24 24"
+          >
+            <path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path>
+          </svg>
+        </Button>
+      )}
+      <Sidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)} />
+      <Box
+        flex="1"
+        marginLeft={isSidebarOpen && !isMobile ? '250px' : '0'}
+        marginTop={isMobile ? '30px' : '0'}
+        transition="margin 0.3s ease"
+      >
+        {children}
+      </Box>
     </Box>
   );
 }
diff --git a/.../pages/organizations/[orgId]/events/[eventId]/participants/check-in/new/scanner/index.jsx b/.../pages/organizations/[orgId]/events/[eventId]/participants/check-in/new/scanner/index.jsx
@@ -19,9 +19,11 @@ import Scanner from '@/components/Scanner';
 
 import { useRouter } from 'next/router';
 import DashboardLayout from '@/layouts/DashboardLayout';
+import { useToast } from '@chakra-ui/react';
 
 export default function NewOrganization() {
   const { loading, get, post } = useFetch();
+  const toast = useToast();
 
   const router = useRouter();
 
@@ -46,14 +48,33 @@ export default function NewOrganization() {
     );
     if (status === 200) {
       if (uninterruptedScanMode) {
+        console.log(data.participant.firstName, data, status);
+        toast({
+          title: data.participant.firstName + ' Checked In',
+          description: 'Participant checked out successfully.',
+          status: 'success',
+          duration: 3000, // Duration of the toast
+          isClosable: true,
+          position: 'top-right',
+        });
+
+        // setScanResult('');
+
         console.log(data.participant.firstname, status);
         alert('Participant checked in successfully');
         setScanResult('');
       } else {
         router.push(`/organizations/${orgId}/events/${eventId}/participants/${scanResult}`);
       }
     } else {
-      alert(data.error);
+      toast({
+        title: data.error,
+        description: 'Something went wrong',
+        status: 'error',
+        duration: 3000, // Duration of the toast
+        isClosable: true,
+        position: 'top-right',
+      });
     }
   };