Add Navigation menu for mobile

uniconnect-app/components/navigation/accessibility.tsx

@@ -15,8 +15,8 @@ import { Button } from '@/components/ui/button';
 
 export default function Accessibility() {
   return (
-    <div className='bg-yellow-100 border-b border-zinc-300'>
-      <Container className='py-4 flex justify-between'>
+    <div className='bg-yellow-100 border-b border-zinc-30'>
+      <Container className='py-4  justify-between hidden md:flex'>
         <div className='flex items-center gap-x-2'>
           <Languages />
           <Select defaultValue='english'>

uniconnect-app/components/navigation/main-nav.tsx

@@ -3,17 +3,55 @@ import { Button } from '@/components/ui/button';
 import Logo from '@/components/ui/logo';
 import Link from 'next/link';
 
+import { Menu } from 'lucide-react';
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+
 export default function MainNav() {
   return (
     <div className='bg-yellow-100 border-b border-zinc-500'>
-      <Container className='py-4 flex justify-between'>
+      <Container className='py-4 flex justify-between items-center'>
         <Link href='/'>
           <h1 className='flex items-center gap-x-2'>
             <Logo className='h-10 w-10' />
             <span className='text-zinc-800 font-bold text-2xl'>Uniconnect</span>
           </h1>
         </Link>
-        <div className='flex items-center gap-x-4'>
+
+        <Sheet>
+          <SheetTrigger>
+            <Menu className='h-6 w-6' />
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle className='sr-only'>Menu</SheetTitle>
+              <SheetDescription className='sr-only'>
+                Menu containing navigation links
+              </SheetDescription>
+
+              <Button
+                variant='link'
+                asChild
+                className='text-zinc-800 font-semibold'
+              >
+                <Link href='/register'>Register Now</Link>
+              </Button>
+
+              <Button asChild>
+                <Link href='/login'>Login</Link>
+              </Button>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+
+        <div className='md:flex items-center gap-x-4 hidden'>
           <Button
             variant='link'
             asChild