feat: implement frontend login functionality with form handling and error management

apps/frontend/app/routes/layout.tsx

@@ -0,0 +1,88 @@
+import { Flex, Box, Container, Dialog, Heading, IconButton, TextField } from '@radix-ui/themes';
+import SidebarContent from '../components/layout/SidebarContent';
+import { useLayout } from '../providers/LayoutProvider';
+import { Menu, Search, Bell } from 'lucide-react';
+import { Outlet } from 'react-router';
+
+export default function LayoutContainer() {
+  const { activeTab, isMobileMenuOpen, setIsMobileMenuOpen } = useLayout();
+  return (
+    <Flex style={{ minHeight: '100vh', backgroundColor: 'var(--gray-2)' }}>
+      {/* Desktop Sidebar */}
+      <Box
+        display={{ initial: 'none', md: 'block' }}
+        style={{
+          width: '260px',
+          backgroundColor: 'white',
+          borderRight: '1px solid var(--gray-4)',
+          position: 'sticky',
+          top: 0,
+          minHeight: '100vh',
+          overflowY: 'auto',
+        }}
+      >
+        <SidebarContent />
+      </Box>
+
+      {/* Main Content Area */}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        {' '}
+        {/* Top Header (Mobile & Desktop) */}
+        <Flex
+          align="center"
+          justify="between"
+          px="4"
+          style={{
+            height: '64px',
+            backgroundColor: 'white',
+            borderBottom: '1px solid var(--gray-4)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+          }}
+        >
+          <Flex align="center" gap="3">
+            <Box display={{ md: 'none' }}>
+              <Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+                <Dialog.Trigger>
+                  <IconButton variant="ghost" color="gray">
+                    <Menu />
+                  </IconButton>
+                </Dialog.Trigger>
+                <Dialog.Content
+                  style={{
+                    position: 'fixed',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    margin: 0,
+                    width: '280px',
+                    borderRadius: 0,
+                    padding: 0,
+                  }}
+                >
+                  <SidebarContent />
+                </Dialog.Content>
+              </Dialog.Root>
+            </Box>
+            <Heading size="4">{activeTab}</Heading>
+          </Flex>
+
+          <Flex align="center" gap="3">
+            <TextField.Root placeholder="Search..." size="2">
+              <TextField.Slot>
+                <Search />
+              </TextField.Slot>
+            </TextField.Root>
+            <IconButton variant="ghost" color="gray">
+              <Bell />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Container size="4" p="5" style={{ paddingTop: 20 }}>
+          <Outlet />
+        </Container>
+      </Box>
+    </Flex>
+  );
+}