Ziya/ui/widgets/navigation/ui/sidebar.slint

import { VerticalBox, HorizontalBox, ScrollView } from "std-widgets.slint";

// Navigation menu item data structure
export struct MenuItem {
    name: string,
    icon: string,
    active: bool,
}

// Professional sidebar navigation with direct styling
export component Sidebar {
    in property <[MenuItem]> menu-items: [
        { name: "Dashboard", icon: "📊", active: true },
        { name: "Profile", icon: "👤", active: false },
        { name: "Trading", icon: "💹", active: false },
        { name: "Portfolio", icon: "💼", active: false },
        { name: "Markets", icon: "📈", active: false },
        { name: "Hunting Ground", icon: "🎯", active: false },
        { name: "Analytics", icon: "📊", active: false },
    ];
    
    callback menu-item-clicked(string);

    width: 256px;
    
    Rectangle {
        background: #f2f2f2;
        border-width: 0px;
        border-color: #e5e6e6;
        
        ScrollView {
            viewport-height: root.height;
            
            VerticalBox {
                padding: 16px;
                spacing: 8px;
                
                // Sidebar Header
                Rectangle {
                    height: 60px;
                    
                    VerticalBox {
                        alignment: center;
                        spacing: 8px;
                        
                        // Logo area
                        Rectangle {
                            height: 32px;
                            
                            HorizontalBox {
                                alignment: center;
                                spacing: 8px;
                                
                                // App icon
                                Rectangle {
                                    width: 24px;
                                    height: 24px;
                                    background: #570df8;
                                    border-radius: 8px;
                                }
                                
                                Text {
                                    text: "Ziya";
                                    color: #1f2937;
                                    font-size: 18px;
                                    font-weight: 700;
                                }
                            }
                        }
                        
                        // Divider
                        Rectangle {
                            height: 1px;
                            background: #e5e6e6;
                        }
                    }
                }
                
                // Menu Items
                for item[index] in menu-items: Rectangle {
                    height: 44px;
                    border-radius: 8px;
                    
                    // Active/hover state styling
                    background: item.active ? #570df8 : transparent;
                    
                    states [
                        active when item.active: {
                            background: #570df8;
                        }
                        hover when menu-area.has-hover && !item.active: {
                            background: #e5e6e6;
                        }
                    ]
                    
                    animate background { duration: 150ms; }
                    
                    HorizontalBox {
                        padding-left: 16px;
                        padding-right: 16px;
                        alignment: start;
                        spacing: 12px;
                        
                        // Icon
                        Text {
                            text: item.icon;
                            font-size: 16px;
                            vertical-alignment: center;
                            width: 20px;
                        }
                        
                        // Menu item text
                        Text {
                            text: item.name;
                            color: item.active ? #ffffff : #1f2937;
                            font-size: 14px;
                            font-weight: item.active ? 600 : 500;
                            vertical-alignment: center;
                        }
                        
                        // Active indicator
                        if item.active: Rectangle {
                            width: 4px;
                            height: 20px;
                            background: #ffffff;
                            border-radius: 2px;
                        }
                    }
                    
                    menu-area := TouchArea {
                        clicked => { menu-item-clicked(item.name); }
                    }
                }
                
                // Spacer to push footer to bottom
                Rectangle {
                    height: 1px;
                }
                
                // Sidebar Footer
                Rectangle {
                    height: 60px;
                    
                    VerticalBox {
                        alignment: center;
                        spacing: 8px;
                        
                        // Divider
                        Rectangle {
                            height: 1px;
                            background: #e5e6e6;
                        }
                        
                        // Status section
                        HorizontalBox {
                            alignment: center;
                            spacing: 8px;
                            
                            // Status indicator
                            Rectangle {
                                width: 8px;
                                height: 8px;
                                background: #36d399;
                                border-radius: 4px;
                            }
                            
                            Text {
                                text: "Connected";
                                color: #6b7280;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}