added custom button to menu

src/components/app-menu/AppMenuElement.ts

@@ -1,7 +1,8 @@
-import { controller } from "@github/catalyst";
+import { controller, target } from "@github/catalyst";
 import { html, TemplateResult } from "@github/jtml";
 import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
+import { MenuItemElement } from "components/menu-item/MenuItemElement";
 import { WalletService } from "services/";
 
 @controller
@@ -9,6 +10,7 @@ class AppMenuElement extends BaseComponentElement {
     private walletService: WalletService;
     private walletData: Array<any>;
     private totalWallets: number;
+    @target walletlist: MenuItemElement;
     constructor() {
         super();
     }
@@ -68,11 +70,32 @@ class AppMenuElement extends BaseComponentElement {
         return null;
     };
 
+    openModal = (): void => {
+        const _modal = this.appMain.appModal;
+        if (_modal) {
+            this.appMain.closeModal();
+        } else {
+            this.appMain.createModal("wallet-create");
+        }
+    };
+
     render = (): TemplateResult => {
         const { isAuth, totalWallets, walletData } = this;
 
-        const regularMenu = (path: string, title: string): TemplateResult =>
-            html`<menu-item data-path="${path}">${title}</menu-item>`;
+        const regularMenu = (
+            path: string,
+            title: string,
+            action?: string
+        ): TemplateResult => {
+            if (action) {
+                return html`
+                    <menu-item data-path="${path}" data-customaction="${action}"
+                        >${title}</menu-item
+                    >
+                `;
+            }
+            return html`<menu-item data-path="${path}">${title}</menu-item>`;
+        };
         const authMenu = (path: string, title: string): TemplateResult => {
             if (isAuth) {
                 return regularMenu(path, title);
@@ -87,22 +110,29 @@ class AppMenuElement extends BaseComponentElement {
         };
         const renderWallets = (wallets: Array<any>) => {
             if (isAuth && totalWallets > 0) {
-                return html`${wallets.map((wallet) =>
-                    regularMenu(`/wallet/${wallet.id}`, wallet.name)
-                )}`;
+                return html`<div class="menu-item divider"></div>
+                    ${wallets.map((wallet) =>
+                        regularMenu(`/wallet/${wallet.id}`, wallet.name)
+                    )}`;
             }
             return html``;
         };
-        const otherWallets = () => {
+        const otherWallets = (action: string) => {
             if (isAuth && totalWallets > 2) {
-                return regularMenu("/wallet/all", "Other");
+                return regularMenu("/wallet/all", "Other Wallets", action);
             }
             return html``;
         };
+        const menuHeader = (title) =>
+            html`<div class="menu-item menu-header">${title}</div>`;
+
         return html`
             <div data-target="app-menu.sidebar">
-                ${regularMenu("/", "Home")} ${authMenu("/history", "History")}
-                ${renderWallets(walletData)} ${otherWallets()}
+                ${menuHeader("Wallets")} ${regularMenu("/", "Home")}
+                ${authMenu("/history", "Transaction History")}
+                ${renderWallets(walletData)}
+                ${otherWallets("click:app-menu#openModal")}
+                <span class="menu-item divider"></span>
                 ${authMenu("/logout", "Logout")}
                 ${notAuthMenu("/login", "Login")}
                 ${notAuthMenu("/register", "Register")}

src/components/app-pagination/AppPaginationElement.ts

@@ -99,9 +99,9 @@ class AppPaginationElement extends BaseComponentElement {
             ? this.customRenderItems
             : () => {
                   if (items?.length > 0) {
-                      return html`<span>
+                      return html`<div class="table">
                           ${items?.map((item) => renderItem(item))}
-                      </span>`;
+                      </div>`;
                   }
                   return html``;
               };

src/components/menu-item/MenuItemElement.ts

@@ -7,7 +7,9 @@ import { BaseComponentElement } from "common/";
 class MenuItemElement extends BaseComponentElement {
     @attr path: string;
     @attr title: string;
+    @attr customaction: string;
     @target itemEl: HTMLElement;
+    @target customButton: HTMLDivElement;
     constructor() {
         super();
     }
@@ -37,6 +39,14 @@ class MenuItemElement extends BaseComponentElement {
                 data-target="menu-item.itemEl"
             >
                 <app-link data-to="${this.path}">${this.title}</app-link>
+                ${this.customaction
+                    ? html`<div
+                          data-target="menu-item.customButton"
+                          data-action="${this.customaction}"
+                      >
+                          Add
+                      </div>`
+                    : html``}
             </div>
         `;
     };