90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
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;
|