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 =>
+        const regularMenu = (
-            html`<menu-item data-path="${path}">${title}</menu-item>`;
+            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) =>
+                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")}
+                ${menuHeader("Wallets")} ${regularMenu("/", "Home")}
-                ${renderWallets(walletData)} ${otherWallets()}
+                ${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>
         `;
     };

src/styles/core/main.scss

@@ -0,0 +1,5 @@
+app-main {
+    * {
+        font-family: Roboto;
+    }
+}

src/styles/main.scss

@@ -3,3 +3,4 @@
 @import "./menu-item/index.scss";
 @import "./sidebar/index.scss";
 @import "./modal/index.scss";
+@import "./table/index.scss";

src/styles/menu-item/menu-item.scss

@@ -1,12 +1,39 @@
+.menu-item {
+    &.divider {
+        display: block;
+        height: 1px;
+        width: 80%;
+        margin: 1px auto;
+        border-bottom: 1px solid $gray-08;
+    }
+    &.menu-header {
+        flex: 1;
+        align-self: center;
+        text-align: center;
+        text-transform: uppercase;
+        text-decoration: underline;
+        margin: 8px auto;
+        font-family: Roboto;
+        font-size: 38px !important;
+    }
+}
 menu-item {
     [data-target="menu-item.itemEl"] {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-areas: "main custom";
         app-link {
             [data-target="app-link.main"] {
-                width: 100%;
+                grid-area: main;
+                display: flex;
+                align-items: center;
                 background-color: $black;
                 color: $gray-01;
                 border-radius: 0;
-                padding: 15px 0;
+                padding: 2px 0;
+                height: 50px;
+                text-align: left;
+                padding-left: 80px;
                 &:hover {
                     color: $white;
                     background-color: $gray-10;
@@ -20,5 +47,25 @@ menu-item {
                 }
             }
         }
+        [data-target="menu-item.customButton"] {
+            grid-area: custom;
+            display: none;
+        }
+        &:hover {
+            [data-target="menu-item.customButton"] {
+                grid-area: custom;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 50px;
+                height: 50px;
+                background-color: $blue-09;
+                cursor: pointer;
+                user-select: none;
+                &:hover {
+                    background-color: $blue-08;
+                }
+            }
+        }
     }
 }

src/styles/table/index.scss

@@ -0,0 +1 @@
+@import "./table.scss"

src/styles/table/table.scss

@@ -0,0 +1,10 @@
+.table {
+    display: table;
+    tr {
+        display: table-row;
+        td {
+            display: table-cell;
+            border: 1px solid $gray-05;
+        }
+    }
+}