import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.0

Rectangle {
    id: control

    property double size: sizes[sizeMode]
    property string sizeMode: "small"
    property var sizes: {
        "tiny": 0,
        "small": 0.15,
        "medium": 0.25,
        "large": 0.8
    }

    Layout.preferredHeight: app.landscape() ? app.height : app.height * size
    Layout.preferredWidth: app.landscape() ? app.width * size : app.width

    Behavior on size {
        NumberAnimation {
            duration: 700
            easing.type: Easing.InOutQuad
        }
    }

    RectangularGlow {
        glowRadius: 7
        spread: 0.02
        color: "black"
        opacity: 0.18
        anchors.fill: headerBackgroundRectangle
        scale: 1
    }

    Rectangle {
        id: headerBackgroundRectangle
        anchors.fill: parent
        color: appTheme.theme.colors.menu

        Behavior on color {
            ColorAnimation {
                duration: 200
            }
        }
    }
}
