Building a Slack-like sidebar

If your app allows users to sign into multiple accounts then you need an easy way for them to switch between. Having a sidebar of accounts is a great solution. Here we're going to build a basic application to manage multiple GitHub logins
The BrowserViews API is in beta and may change (or be completely removed) without warning.
Scaffolding
To begin we need to describe where the sidebar and content go, ToDesktop lets you do this using HTML and CSS, like you're used to.
index.html:
1
<div 
2
  class="sidebar"
3
  data-view-url="http://localhost:3000/sidebar.html"
4
  data-view-id="sidebar"
5
>
6
</div>
7
<div
8
  class="main"
9
  data-view-url="https://github.com/"
10
  data-view-id="content"
11
  data-view-partition="default"
12
>
13
</div>
14
​
15
<style>
16
  body {
17
    margin: 0;
18
    padding: 0;
19
  }
20
​
21
  .container {
22
    width: 100vw;
23
    height: 100vh;
24
    display: flex;
25
  }
26
  
27
  .sidebar {
28
    width: 10vw;
29
    height: 100vh;
30
  }
31
  
32
  .main {
33
    width: 90vw;
34
    height: 100vh;
35
  }
36
</style>
37
​
38
​
Copied!
Here we create two sections: the sidebar and content. We use data-view-url to tell ToDesktop where the content of these views come from. Each section can be thought of like a tab running independently from each other. 
We use data-view-partition to set the default partition for a view. Each partition has its own cookies, localStorage, etc. By changing the partition we can swap accounts.
Initializing the views
You need to tell ToDesktop to change these into views
1
window.onload = () => {
2
  window.todesktop.views.init();
3
}
Copied!
Sidebar
The sidebar is where we'll show users a list of their accounts and let them add new accounts
sidebar.html:
1
<html>
2
  <body>
3
    <ul id="accountsList">
4
      <li class="profile" id="default">
5
        <button>Default</button>
6
      </li>
7
      <li class="profile" id="new">
8
        <button>New</button>
9
      </li>
10
    </ul>
11
  </body>
12
  <style>
13
    ul {
14
      padding: 0;
15
      list-style-type: none;
16
      display: flex;
17
      flex-direction: column;
18
      justify-content: center;
19
      align-items: center;
20
    }
21
    
22
    li.profile {
23
      background-color: white;
24
      border-radius: 7px;
25
      height: auto;
26
      box-sizing: border-box;
27
      margin-bottom: 1rem;
28
    }
29
​
30
    button {
31
      border: none;
32
      padding: 1rem;
33
      background: transparent;
34
    }
35
  </style>
36
</html>
Copied!
Seeing the app
Serve the project to localhost:3000 (or whatever address you prefer and change data-view-url to that url) and run the development ToDesktop app pointed at localhost:3000
GitHub with sidebar
Adding accounts
If you're using react,svelte,etc then you can do this easier but for this example we'll use plain JavaScript. 
sidebar.html:
1
...
2
</ul>
3
<script>
4
  window.onload = () => {
5
    const newButton = document.getElementById("new");
6
    const list = document.getElementById("accountsList");
7
    // To persist the added accounts we'll add them to
8
    // localStorage
9
    let accounts = JSON.parse(localStorage.getItem("accounts"));
10
    /* accounts: {
11
     *    id: string,
12
     *    name: string,
13
     * }[]
14
     */
15
​
16
    // Ensure accounts is an array (e.g. on load when accounts
17
    // is undefined)
18
    if (!Array.isArray(accounts)) accounts = [];
19
​
20
    // We'll come back to this below
21
    const switchAccount = () => {};
22
    document
23
      .getElementById("default")
24
      .childNodes[0].addEventListener("click", switchAccount);
25
​
26
    const createID = () => "_" + Math.random().toString(36).substr(2, 9);
27
​
28
    // This creates new <li> elements and adds
29
    // the click event handler
30
    const createElement = (account) => {
31
      const li = document.createElement("li");
32
      li.id = account.id;
33
      li.classList.add("profile");
34
      const button = document.createElement("button");
35
      button.addEventListener("click", switchAccount);
36
      button.innerHTML = account.name;
37
      li.appendChild(button);
38
      return li;
39
    };
40
​
41
    const addAccountsToDom = () => {
42
      // We only want to add accounts that aren't already
43
      // in the dom. So we'll filter accounts by ids in
44
      // the DOM
45
      const ids = Array.from(
46
        document.querySelectorAll("#accountsList > li")
47
      ).map(({ id }) => id);
48
      const accountsToAdd = accounts.filter(({ id }) => !ids.includes(id));
49
      // We'll add new <li>s as elements before new button
50
      accountsToAdd.forEach((account) => {
51
        list.insertBefore(createElement(account), newButton);
52
      });
53
    };
54
    addAccountsToDom();
55
​
56
    // Create new accounts when new button pressed
57
    newButton.addEventListener("click", () => {
58
      accounts.push({
59
        name: accounts.length,
60
        id: createID(),
61
      });
62
      localStorage.setItem("accounts", JSON.stringify(accounts));
63
      addAccountsToDom();
64
    });
65
  };
66
</script>
Copied!
With this we can click the New button to add new buttons to the sidebar representing accounts. We give each account an id which will we later use for partitions. Finally, we save the accounts to localStorage to access on subsequent app opens.
Adding new accounts
Switching Accounts
ToDesktop provides some APIs for interacting with views. We'll be using todesktop.views.switch
sidebar.html:
1
...
2
const switchAccount = () => {
3
  // Get the id of the button's <li> parent
4
  const { id } = e.currentTarget.parentElement;
5
         
6
  window.todesktop.views.switch({
7
    id: "content", // The data-view-id from index.html
8
    url: "https://github.com",
9
    partition: id,
10
  });
11
}
Copied!
Switching between GitHub accounts
Finish
And there, you've now build an app using ToDesktop to switch between multiple Github accounts. You can try it out, create some accounts in the sidebar, switch between them and sign into different GitHub accounts. 🥳

Recipes - Previous

Capture Screen Contents

Next - Recipes

Google OAuth Screen

Last modified 8mo ago

Copy link

Contents

Scaffolding

Initializing the views