localized menu

Client/Resources/OpenEug.TenTrees.Theme.TenTreesTheme/LocalizedMenu.resx

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="Home" xml:space="preserve">
+    <value>Home</value>
+  </data>
+  <data name="Enrollment" xml:space="preserve">
+    <value>Enrollment</value>
+  </data>
+  <data name="Classes" xml:space="preserve">
+    <value>Classes</value>
+  </data>
+  <data name="Training" xml:space="preserve">
+    <value>Training</value>
+  </data>
+  <data name="Grower" xml:space="preserve">
+    <value>Grower</value>
+  </data>
+  <data name="Assessment" xml:space="preserve">
+    <value>Assessment</value>
+  </data>
+  <data name="Admin" xml:space="preserve">
+    <value>Admin</value>
+  </data>
+  <data name="Village" xml:space="preserve">
+    <value>Village</value>
+  </data>
+  <data name="Cohort" xml:space="preserve">
+    <value>Cohort</value>
+  </data>
+  <data name="Mentor" xml:space="preserve">
+    <value>Mentor</value>
+  </data>
+  <data name="TreeType" xml:space="preserve">
+    <value>TreeType</value>
+  </data>
+</root>

Client/Resources/OpenEug.TenTrees.Theme.TenTreesTheme/LocalizedMenu.ts-ZA.resx

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="Home" xml:space="preserve">
+    <value>Kaya</value>
+  </data>
+  <data name="Enrollment" xml:space="preserve">
+    <value>Nkandziyiso</value>
+  </data>
+  <data name="Classes" xml:space="preserve">
+    <value>Tiklasi</value>
+  </data>
+  <data name="Training" xml:space="preserve">
+    <value>Ku Leha</value>
+  </data>
+  <data name="Grower" xml:space="preserve">
+    <value>Mulimi</value>
+  </data>
+  <data name="Assessment" xml:space="preserve">
+    <value>Xikambelo</value>
+  </data>
+  <data name="Admin" xml:space="preserve">
+    <value>Vulawuri</value>
+  </data>
+  <data name="Village" xml:space="preserve">
+    <value>Rixaka</value>
+  </data>
+  <data name="Cohort" xml:space="preserve">
+    <value>Cohort</value>
+  </data>
+  <data name="Mentor" xml:space="preserve">
+    <value>Muleriseri</value>
+  </data>
+  <data name="TreeType" xml:space="preserve">
+    <value>Muxaka wa Murhi</value>
+  </data>
+</root>

Client/Themes/TenTreesTheme/LocalizedMenu.razor

@@ -0,0 +1,15 @@
+@namespace OpenEug.TenTrees.Theme.TenTreesTheme
+
+@if (Orientation == "Vertical")
+{
+    <LocalizedMenuVertical />
+}
+else
+{
+    <LocalizedMenuHorizontal />
+}
+
+@code {
+    [Parameter]
+    public string Orientation { get; set; } = "Horizontal";
+}

Client/Themes/TenTreesTheme/LocalizedMenuBase.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using Oqtane.Models;
+using Oqtane.Themes.Controls;
+
+namespace OpenEug.TenTrees.Theme.TenTreesTheme
+{
+    public abstract class LocalizedMenuBase : MenuItemsBase
+    {
+        [Inject]
+        protected IStringLocalizer<LocalizedMenu> Localizer { get; set; }
+
+        // IStringLocalizer returns the key itself when no resource exists,
+        // so unmapped pages fall back to their raw database name.
+        protected string LocalizeName(Page page)
+        {
+            return Localizer[page.Name];
+        }
+    }
+}

Client/Themes/TenTreesTheme/LocalizedMenuHorizontal.razor

@@ -0,0 +1,16 @@
+@namespace OpenEug.TenTrees.Theme.TenTreesTheme
+@inherits MenuBase
+
+@if (MenuPages.Any())
+{
+    <span class="app-menu-toggler navbar-expand-md">
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </span>
+    <div class="app-menu navbar-expand-md">
+        <div class="collapse navbar-collapse navbar-nav-scroll" id="Menu">
+            <LocalizedMenuItemsHorizontal ParentPage="null" Pages="MenuPages" />
+        </div>
+    </div>
+}

Client/Themes/TenTreesTheme/LocalizedMenuItemsHorizontal.razor

@@ -0,0 +1,99 @@
+@namespace OpenEug.TenTrees.Theme.TenTreesTheme
+@inherits LocalizedMenuBase
+
+@if (ParentPage != null)
+{
+    <div class="dropdown-menu" aria-labelledby="@($"navbarDropdown{ParentPage.PageId}")">
+        @foreach (var childPage in GetChildPages())
+        {
+            var _attributes = new Dictionary<string, object>();
+            _attributes.Add("href", GetUrl(childPage));
+            var _target = GetTarget(childPage);
+            if (!string.IsNullOrEmpty(_target))
+            {
+                _attributes.Add("target", _target);
+            }
+            if (childPage.PageId == PageState.Page.PageId)
+            {
+                <a class="nav-link active px-3" @attributes="_attributes">
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @LocalizeName(childPage) <span class="visually-hidden-focusable">(current)</span>
+                    </span>
+                </a>
+            }
+            else
+            {
+                <a class="nav-link px-3" @attributes="_attributes">
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @LocalizeName(childPage)
+                    </span>
+                </a>
+            }
+        }
+    </div>
+}
+else
+{
+    <ul class="navbar-nav mr-auto">
+        @foreach (var childPage in GetChildPages())
+        {
+            var _attributes = new Dictionary<string, object>();
+            _attributes.Add("href", GetUrl(childPage));
+            var _target = GetTarget(childPage);
+            if (!string.IsNullOrEmpty(_target))
+            {
+                _attributes.Add("target", _target);
+            }
+            if (!Pages.Any(e => e.ParentId == childPage.PageId))
+            {
+                if (childPage.PageId == PageState.Page.PageId)
+                {
+                    <li class="nav-item">
+                        <a class="nav-link active" @attributes="_attributes">
+                            <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                                <span class="@childPage.Icon" aria-hidden="true" />
+                                @LocalizeName(childPage) <span class="visually-hidden-focusable">(current)</span>
+                            </span>
+                        </a>
+                    </li>
+                }
+                else
+                {
+                    <li class="nav-item">
+                        <a class="nav-link" @attributes="_attributes">
+                            <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                                <span class="@childPage.Icon" aria-hidden="true" />
+                                @LocalizeName(childPage)
+                            </span>
+                        </a>
+                    </li>
+                }
+            }
+            else
+            {
+                if (childPage.PageId == PageState.Page.PageId)
+                {
+                    <li class="nav-item dropdown active">
+                        <a class="nav-link dropdown-toggle" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @attributes="_attributes">
+                            <span class="@childPage.Icon" aria-hidden="true" />
+                            @LocalizeName(childPage) <span class="visually-hidden-focusable">(current)</span>
+                        </a>
+                        <LocalizedMenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
+                    </li>
+                }
+                else
+                {
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @attributes="_attributes">
+                            <span class="@childPage.Icon" aria-hidden="true" />
+                            @LocalizeName(childPage)
+                        </a>
+                        <LocalizedMenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
+                    </li>
+                }
+            }
+        }
+    </ul>
+}

Client/Themes/TenTreesTheme/LocalizedMenuItemsVertical.razor

@@ -0,0 +1,83 @@
+@namespace OpenEug.TenTrees.Theme.TenTreesTheme
+@inherits LocalizedMenuBase
+
+@if (ParentPage != null)
+{
+    foreach (var childPage in GetChildPages())
+    {
+        var _attributes = new Dictionary<string, object>();
+        _attributes.Add("href", GetUrl(childPage));
+        var _target = GetTarget(childPage);
+        if (!string.IsNullOrEmpty(_target))
+        {
+            _attributes.Add("target", _target);
+        }
+        if (childPage.PageId == PageState.Page.PageId)
+        {
+            <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                <a class="nav-link active" @attributes="_attributes">
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @LocalizeName(childPage) <span class="visually-hidden-focusable">(current)</span>
+                    </span>
+                </a>
+            </li>
+        }
+        else
+        {
+            <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                <a class="nav-link" @attributes="_attributes">
+                    <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                        <span class="@childPage.Icon" aria-hidden="true" />
+                        @LocalizeName(childPage)
+                    </span>
+                </a>
+            </li>
+        }
+        if (Pages.Any(e => e.ParentId == childPage.PageId))
+        {
+            <LocalizedMenuItemsVertical ParentPage="childPage" Pages="Pages" />
+        }
+    }
+}
+else
+{
+    <ul class="nav flex-column">
+        @foreach (var childPage in GetChildPages())
+        {
+            var _attributes = new Dictionary<string, object>();
+            _attributes.Add("href", GetUrl(childPage));
+            var _target = GetTarget(childPage);
+            if (!string.IsNullOrEmpty(_target))
+            {
+                _attributes.Add("target", _target);
+            }
+            if (childPage.PageId == PageState.Page.PageId)
+            {
+                <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                    <a class="nav-link active" @attributes="_attributes">
+                        <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                            <span class="@childPage.Icon" aria-hidden="true" />
+                            @LocalizeName(childPage) <span class="visually-hidden-focusable">(current)</span>
+                        </span>
+                    </a>
+                </li>
+            }
+            else
+            {
+                <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                    <a class="nav-link" @attributes="_attributes">
+                        <span class="w-100" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
+                            <span class="@childPage.Icon" aria-hidden="true" />
+                            @LocalizeName(childPage)
+                        </span>
+                    </a>
+                </li>
+            }
+            if (Pages.Any(e => e.ParentId == childPage.PageId))
+            {
+                <LocalizedMenuItemsVertical ParentPage="childPage" Pages="Pages" />
+            }
+        }
+    </ul>
+}

Client/Themes/TenTreesTheme/LocalizedMenuVertical.razor

@@ -0,0 +1,16 @@
+@namespace OpenEug.TenTrees.Theme.TenTreesTheme
+@inherits MenuBase
+
+@if (MenuPages.Any())
+{
+    <span class="app-menu-toggler">
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </span>
+    <div class="app-menu">
+        <div class="collapse navbar-collapse" id="Menu">
+            <LocalizedMenuItemsVertical ParentPage="null" Pages="MenuPages" />
+        </div>
+    </div>
+}

Client/Themes/TenTreesTheme/Theme.razor

@@ -4,7 +4,7 @@
 
 <main role="main">
     <nav class="navbar navbar-dark bg-primary fixed-top">
-        <Logo /><Menu Orientation="Horizontal" />
+        <Logo /><LocalizedMenu Orientation="Horizontal" />
         <div class="controls ms-auto">
             <div class="controls-group"><UserMenu ShowLogin="@_login" ShowRegister="@_register" ButtonClass="btn btn-outline-light" /> <LanguagePicker ButtonClass="btn-outline-light" /> <ControlPanel ButtonClass="btn-outline-light" ShowLanguageSwitcher="false" /></div>
         </div>