diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 40d6ef9..7610a56 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/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; 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`${title}`; + const regularMenu = ( + path: string, + title: string, + action?: string + ): TemplateResult => { + if (action) { + return html` + ${title} + `; + } + return html`${title}`; + }; 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) => { if (isAuth && totalWallets > 0) { - return html`${wallets.map((wallet) => - regularMenu(`/wallet/${wallet.id}`, wallet.name) - )}`; + return html` + ${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``; + return html`
- ${regularMenu("/", "Home")} ${authMenu("/history", "History")} - ${renderWallets(walletData)} ${otherWallets()} + ${menuHeader("Wallets")} ${regularMenu("/", "Home")} + ${authMenu("/history", "Transaction History")} + ${renderWallets(walletData)} + ${otherWallets("click:app-menu#openModal")} + ${authMenu("/logout", "Logout")} ${notAuthMenu("/login", "Login")} ${notAuthMenu("/register", "Register")} diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index 1357fea..0a11f0d 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -99,9 +99,9 @@ class AppPaginationElement extends BaseComponentElement { ? this.customRenderItems : () => { if (items?.length > 0) { - return html` + return html`
${items?.map((item) => renderItem(item))} - `; +
`; } return html``; }; diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index 098cea1..548be7e 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/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" > ${this.title} + ${this.customaction + ? html`
+ Add +
` + : html``}
`; }; diff --git a/src/styles/core/main.scss b/src/styles/core/main.scss index e69de29..9a9a9c6 100644 --- a/src/styles/core/main.scss +++ b/src/styles/core/main.scss @@ -0,0 +1,5 @@ +app-main { + * { + font-family: Roboto; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index c23a4c6..f8a34a6 100644 --- a/src/styles/main.scss +++ b/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"; diff --git a/src/styles/menu-item/menu-item.scss b/src/styles/menu-item/menu-item.scss index 51558d8..8752433 100644 --- a/src/styles/menu-item/menu-item.scss +++ b/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; + } + } + } } } diff --git a/src/styles/table/index.scss b/src/styles/table/index.scss new file mode 100644 index 0000000..da51a4b --- /dev/null +++ b/src/styles/table/index.scss @@ -0,0 +1 @@ +@import "./table.scss" \ No newline at end of file diff --git a/src/styles/table/table.scss b/src/styles/table/table.scss new file mode 100644 index 0000000..d8c7d3a --- /dev/null +++ b/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; + } + } +}