slint/demos/home-automation/ui/components/mainView/sidebar.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Measurements, Palette } from "../../common.slint";
import { AboutSlint } from "std-widgets.slint";
import { HaText } from "../general/haText.slint";

export component Sidebar inherits Rectangle {
    width: Measurements.sidebar-width;
    height: 100%;
    callback lockDemo();
    Rectangle {
        x: root.width - self.width / 2;
        border-radius: self.width / 4;
        width: 15px;
        height: 50px;
        background: Palette.tab;
        drop-shadow-blur: 2px;
        drop-shadow-color: black.transparentize(0.5);
        drop-shadow-offset-x: 1px;
        drop-shadow-offset-y: 1px;
        Rectangle {
            height: 85%;
            width: 1.5px;
            x: parent.width - 3.5px;
            background: Palette.tab-highlight;
        }
    }

    Rectangle {
        background: Palette.background-gradient;
        Rectangle {
            opacity: root.x / Measurements.sidebar-width;
            background: Palette.background;
        }

        VerticalLayout {
            alignment: space-between;
            padding-top: Measurements.sidebar-padding;
            spacing: Measurements.sidebar-spacing;
            VerticalLayout {
                alignment: start;
                spacing: Measurements.sidebar-spacing;
                padding: Measurements.sidebar-padding;

                Rectangle {
                    width: 100%;
                    height: 25px;
                    border-radius: self.height / 2;
                    background: Palette.alternate-background;
                    HorizontalLayout {
                        alignment: space-around;
                        HaText {
                            vertical-alignment: center;
                            text: "Lock Controls ";
                            color: Palette.foreground;
                            font-size: 1rem;
                        }

                        VerticalLayout {
                            alignment: center;
                            Image {
                                source: @image-url("../../images/lock.svg");
                                width: 15px;
                                height: self.width;
                                colorize: Palette.foreground;
                            }
                        }
                    }

                    TouchArea {
                        clicked => {
                            root.lockDemo();
                        }
                    }
                }

                Rectangle {
                    width: 100%;
                    height: 25px;
                    border-radius: self.height / 2;
                    background: ta2.pressed ? Palette.background : Palette.alternate-background;
                    ta2 := TouchArea { }

                    HaText {
                        text: "setting 2";
                        color: Palette.foreground;
                        font-size: 1rem;
                        TouchArea { }
                    }
                }

                Rectangle {
                    width: 100%;
                    height: 25px;
                    border-radius: self.height / 2;
                    background: ta3.pressed ? Palette.background : Palette.alternate-background;
                    ta3 := TouchArea { }

                    HaText {
                        text: "setting 3";
                        color: Palette.foreground;
                        font-size: 1rem;
                        TouchArea { }
                    }
                }

                Rectangle {
                    width: 100%;
                    height: 25px;
                    border-radius: self.height / 2;
                    background: ta4.pressed ? Palette.background : Palette.alternate-background;
                    ta4 := TouchArea { }

                    HaText {
                        text: "setting 4";
                        color: Palette.foreground;
                        font-size: 1rem;
                        TouchArea { }
                    }
                }
            }

            AboutSlint {
                width: root.width * 0.8;
                x: root.width * 0.1;
            }
        }
    }
}