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

apps/frontend/app/components/layout/SidebarContent.tsx

@@ -0,0 +1,89 @@
+import type React from 'react';
+import { Box, Button, Flex, Heading, Separator, Text } from '@radix-ui/themes';
+import type { NavItem } from './types';
+import { Home, Globe, ArrowRight, Lock, Settings, User } from 'lucide-react';
+import { useLayout } from '../../providers/LayoutProvider';
+
+const navItems: { label: NavItem; icon: React.ReactNode }[] = [
+  { label: 'Dashboard', icon: <Home size={16} /> },
+  { label: 'Proxy Hosts', icon: <Globe size={16} /> },
+  { label: 'Redirection', icon: <ArrowRight size={16} /> },
+  { label: 'SSL', icon: <Lock size={16} /> },
+  { label: 'Settings', icon: <Settings size={16} /> },
+  { label: 'Profile', icon: <User size={16} /> },
+] as const;
+
+export function SidebarContent() {
+  const { activeTab, setActiveTab, setIsMobileMenuOpen } = useLayout();
+
+  return (
+    <Flex direction="column" gap="2" p="4" style={{ height: '100%' }}>
+      <Flex align="center" gap="2" mb="6" px="2">
+        <Box
+          style={{
+            width: 32,
+            height: 32,
+            backgroundColor: 'var(--iris-9)',
+            borderRadius: 'var(--radius-2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold',
+          }}
+        >
+          Y
+        </Box>
+        <Heading size="4" weight="bold">
+          YANPM
+        </Heading>
+      </Flex>
+
+      <Flex direction="column" gap="1">
+        {navItems.map((item) => (
+          <Button
+            key={item.label}
+            variant={activeTab === item.label ? 'soft' : 'ghost'}
+            color={activeTab === item.label ? 'iris' : 'gray'}
+            onClick={() => {
+              setActiveTab(item.label);
+              setIsMobileMenuOpen(false);
+            }}
+            style={{ cursor: 'pointer', width: '100%', justifyContent: 'flex-start' }}
+          >
+            <Flex align="center" gap="3">
+              {item.icon}
+              <Text size="2" weight={activeTab === item.label ? 'bold' : 'medium'}>
+                {item.label}
+              </Text>
+            </Flex>
+          </Button>
+        ))}
+      </Flex>
+
+      <Box style={{ marginTop: 'auto' }} pt="4">
+        <Separator size="4" mb="4" />
+        <Flex align="center" gap="3" px="2">
+          <Box
+            style={{
+              width: 32,
+              height: 32,
+              backgroundColor: 'var(--gray-5)',
+              borderRadius: '50%',
+            }}
+          />
+          <Box>
+            <Text size="1" weight="bold" as="div">
+              Admin User
+            </Text>
+            <Text size="1" color="gray">
+              admin@example.com
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
+
+export default SidebarContent;