To develop the front-end side of Tabunganku, I am faced with numerous options. Based on Stack Overflow Survey, most developers used React, jQuery, or Angular to develop their front-end. I searched around and discovered Svelte. I think it is an interesting technology because people keep hyping it up.

Page Layout

Tabunganku Prototype

Svelte allows me to create a separate page just for layout so that the header and sidebar will be consistent across every page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="admin">
    <header class="admin__header">
      <a href="/" class="logo">
        <h1>Tabunganku</h1>
      </a>
      <div class="toolbar">
        <strong class="username">Willy</strong>
      </div>
    </header>
    <nav class="admin__nav">
      <ul class="menu">
        <li class="menu__item">
          <a class="menu__link" href="/add-category">Add Category</a>
        </li>
        <li class="menu__item">
          <a class="menu__link" href="/transactions/add">Add Transaction</a>
        </li>
      </ul>
    </nav>
    <slot/>
</div>

The code snippet above represents the content of +layout.svelte, the dedicated page that I can use to define the page layout. I create a 2x2 table using CSS Grid to separate the header, navigation link, and main content. In the header, I use a flexbox to separate the logo and my name. The slot element exists because it is used by Svelte to display the main content.

Repository

If you are looking for the code, I store it on Github.

Github link