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 { ThemeSwitch } from "../general/themeSwitch.slint";
import { AboutSlint, Button } from "std-widgets.slint";
import { AppState } from "../../appState.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: 30px;
        height: 100px;
        background: Palette.tab;
        drop-shadow-blur: 4px;
        drop-shadow-color: black.transparentize(0.5);
        drop-shadow-offset-x: 2px;
        drop-shadow-offset-y: 2px;
        Rectangle {
            height: 85%;
            width: 3px;
            x: parent.width - 7px;
            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;
                HorizontalLayout {
                    spacing: 10px;
                    alignment: stretch;
                    HaText {
                        text: "Theme: ";
                        horizontal-stretch: 0;
                        vertical-alignment: center;
                        color: Palette.foreground;
                        font-size: 2rem;
                    }

                    VerticalLayout {
                        alignment: center;
                        ThemeSwitch {
                            scale: 0.5;
                        }
                    }
                }

                Rectangle {
                    width: 100%;
                    height: 50px;
                    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: 2rem;
                        }

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

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

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

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

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

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

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

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

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