rezervovator/src/components/admin_portal.rs

use leptos::*;
use crate::backend::data::User;
use crate::components::modal_box::DialogOpener;
use crate::components::user_menu::{MenuOpener, UserMenu};
use crate::locales::trl;
use crate::pages::change_pwd::ChangePassword;
use crate::pages::profile_edit::ProfileEdit;

#[component]
pub fn AdminPortal(children: Children) -> impl IntoView {
    let user_menu = MenuOpener::new();
    let (user, set_user) = create_signal(User::default());
    let editor = DialogOpener::new();
    let pw_changer = DialogOpener::new();

    view! {
        <div class="layout-wrapper layout-content-navbar">
            <div class="layout-container">
        //<!-- Menu -->

                <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                    <div class="app-brand demo">
                        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                            <i class="bx bx-chevron-left bx-sm align-middle"></i>
                        </a>
                        <img src="/rezervovator_l.svg" width="180"/>
                    </div>
                    <div class="menu-inner-shadow"></div>

                    <ul class="menu-inner py-1">
                        //<!-- Dashboard -->
                        <li class="menu-item">
                            <a href="/admin" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                                <div data-i18n="Analytics">{trl("Dashboard")}</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-time"></i>
                                <div data-i18n="Analytics">"Opening hours"</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-layer"></i>
                                <div data-i18n="Analytics">"Places"</div>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="/" class="menu-link">
                                <i class="menu-icon tf-icons bx bx-info-circle"></i>
                                <div data-i18n="Analytics">"About"</div>
                            </a>
                        </li>
                    </ul>
                </aside>
                //<!-- Layout container -->
                <div class="layout-page">
                    //<!-- Navbar -->

                      <nav
                        class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
                        id="layout-navbar">
                        <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                          <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                          </a>
                        </div>

                        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                          //<!-- Search -->
                          <div class="navbar-nav align-items-center ms-auto mt-auto">
                            <div class="nav-item d-flex align-items-center mt-auto">
                              <h4 class="mt-3"><i class="bx bx-desktop fs-4 lh-0"></i>" Admin portal"</h4>
                            </div>
                          </div>
                          //<!-- /Search -->
                          <ul class="navbar-nav flex-row align-items-center ms-auto">
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                              <a class="nav-link dropdown-toggle hide-arrow" href="/admin/settings" data-bs-toggle="dropdown">
                              <i class="bx bx-cog fs-3 lh-0"></i>
                                </a>
                            </li>
                            //<!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                              <a class="nav-link dropdown-toggle hide-arrow" href="#"
                                on:click=move |_| user_menu.toggle()>
                                //<div class="avatar avatar-online">
                                //  <img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                                //</div>
                                <i class="bx bx-user fs-3 lh-0"></i>
                              </a>
                              <UserMenu opener=user_menu editor=editor pw_dialog=pw_changer user_profile=set_user/>
                            </li>
                            //<!--/ User -->
                          </ul>
                        </div>
                      </nav>

                //<!-- Content wrapper -->
                <div class="content-wrapper">
                    //<!-- Content -->
                    <div class="container-xxl flex-grow-1 container-p-y">
                    <ProfileEdit user={user} opener=editor/>
                    <ChangePassword user={user} opener=pw_changer/>
                    {children()}
                    </div>
                </div>
                </div>
            </div>
        </div>
    }
}