slint/examples/energy-monitor/ui/small_main.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Theme } from "theme.slint";
import { Navigation, MenuButton, Menu, Value } from "widgets/widgets.slint";
import { Balance, Overview, Usage, UsageAdapter, Weather, MenuPage, MenuOverviewAdapter, About } from "pages/pages.slint";

export component SmallMain {
    i-navigation := Navigation {
        current-index <=> MenuOverviewAdapter.current-page;
        page-count: MenuOverviewAdapter.count;

        // check current-index to generate only displayed items
        if(i-navigation.current-index <= 1 && !i-menu.open) : Overview {
            index: 0;
            current-index: i-navigation.current-index;
        }
        if(i-navigation.current-index >= 0 && i-navigation.current-index <= 2 && !i-menu.open) : Usage {
            index: 1;
            current-index: i-navigation.current-index;
        }
        if(i-navigation.current-index >= 1 && i-navigation.current-index <= 3 && !i-menu.open) : Balance {
            index: 2;
            current-index: i-navigation.current-index;
        }
        if(i-navigation.current-index >= 2 && i-navigation.current-index <= 4 && !i-menu.open) : Weather {
            index: 3;
            current-index: i-navigation.current-index;
        }
        if(i-navigation.current-index >= 3 && i-navigation.current-index <= 5 && !i-menu.open) : About {
            index: 4;
            current-index: i-navigation.current-index;
        }

        pagination-clicked => {
            i-menu.open-menu();
            i-navigation.hide();
        }

        clicked => {
            // if the navigation is clicked and the arrow displayed a open menu button should be hide.
            i-menu.hide-button();
        }
    }

    i-menu := Menu {
        preferred-width: 100%;
        preferred-height: 100%;
        start-y:  25px;
        end-y: 22px;
        menu-width: parent.width - 8px;
        menu-height: parent.height - 14px;

        if(i-menu.open) : MenuPage {
            preferred-width: 100%;
            preferred-height: 100%;

            page-changed => {
                i-menu.hide();
            }

            close => {
                i-menu.hide();
            }
        }
    }
}