main

src/components/layout/sidebar/Sidebar.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Box, Flex, VStack, Text, Icon, Link as ChakraLink, Separator } from '@chakra-ui/react';
+import { Link, usePathname } from '@/i18n/navigation';
+import { LuLayoutDashboard, LuFileText, LuCalendar, LuTrendingUp, LuSettings, LuLogOut, LuSparkles } from 'react-icons/lu';
+
+import { NAV_ITEMS as CONFIG_NAV_ITEMS } from '@/config/navigation';
+
+const ICON_MAP: Record<string, any> = {
+    '/home': LuLayoutDashboard,
+    '/generate': LuSparkles,
+    '/content': LuFileText,
+    '/schedule': LuCalendar,
+    '/analytics': LuTrendingUp,
+    '/settings': LuSettings,
+};
+
+const NAV_ITEMS = CONFIG_NAV_ITEMS.map(item => ({
+    name: item.label.charAt(0).toUpperCase() + item.label.slice(1),
+    href: item.href,
+    icon: ICON_MAP[item.href] || LuFileText
+}));
+
+export function Sidebar() {
+    const pathname = usePathname();
+
+    return (
+        <Box
+            w="250px"
+            h="100vh"
+            bg="bg.panel"
+            borderRightWidth="1px"
+            borderColor="border.subtle"
+            position="fixed"
+            left={0}
+            top={0}
+            zIndex={100}
+            py={6}
+            px={4}
+        >
+            <Flex align="center" gap={3} px={2} mb={8}>
+                <Box w={8} h={8} bg="primary.solid" borderRadius="lg" display="flex" alignItems="center" justifyContent="center">
+                    <Text color="white" fontWeight="bold">CH</Text>
+                </Box>
+                <Text fontSize="xl" fontWeight="bold">Content Hunter</Text>
+            </Flex>
+
+            <VStack gap={2} align="stretch">
+                {NAV_ITEMS.map((item) => {
+                    const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
+                    return (
+                        <ChakraLink
+                            as={Link}
+                            key={item.name}
+                            href={item.href}
+                            display="flex"
+                            alignItems="center"
+                            gap={3}
+                            px={3}
+                            py={2.5}
+                            borderRadius="md"
+                            textDecoration="none"
+                            bg={isActive ? 'primary.subtle' : 'transparent'}
+                            color={isActive ? 'primary.solid' : 'fg.muted'}
+                            fontWeight={isActive ? 'semibold' : 'medium'}
+                            _hover={{
+                                bg: isActive ? 'primary.subtle' : 'bg.subtle',
+                                textDecoration: 'none',
+                            }}
+                        >
+                            <Icon as={item.icon} boxSize={5} />
+                            <Text>{item.name}</Text>
+                        </ChakraLink>
+                    );
+                })}
+            </VStack>
+
+            <Box mt="auto">
+                <Separator mb={4} />
+                <ChakraLink
+                    display="flex"
+                    alignItems="center"
+                    gap={3}
+                    px={3}
+                    py={2.5}
+                    borderRadius="md"
+                    textDecoration="none"
+                    color="fg.muted"
+                    cursor="pointer"
+                    _hover={{
+                        bg: 'bg.subtle',
+                        color: 'fg.error',
+                        textDecoration: 'none',
+                    }}
+                >
+                    <Icon as={LuLogOut} boxSize={5} />
+                    <Text>Logout</Text>
+                </ChakraLink>
+            </Box>
+        </Box>
+    );
+}