Forem: kevin

Building a reusable notification system with react hooks and context API

kevin — Tue, 24 Mar 2020 01:52:13 +0000

The problem

While building a re-usable component we tend to forget what are the essential features the component itself should have.

Let me explain, consider a notification/alert/toast popup component, as a component it should have the ability to render whatever children components are passed to it and it should be able to close/hide itself on click of the close button (or even close or hide itself after a set timeout). In the simplest of designs the engineer would use a prop drilling pattern and pass an onClose function to the toast component which would be able to toggle the state in the parent component that hosts our notification piece.

This by design is not wrong, however, from a developer experience perspective why should the parent component host the function that would be responsible for hiding/closing the notification. This responsibility should be of the component itself. What makes the react-notifier highly reusable is the fact, that any other component using it do not have to worry about the state(hide/show or open/close) of the notification component, rather it exposes an add and remove method that takes care of the states for you. This traditionally is possible managing a global state using redux, however, in the spirit of embracing the latest react feature we would be using react hooks and the context API to achieve the same. Excited enough? Let's jump in!!

Features

The notification system is built with react and no external library. This is highly reusable and can be triggered from anywhere in the application. The toast notifications will be stackable, meaning we can have multiple notifications showing up at the same time, these will be capable of rendering a string or another react component within itself.

Background

The following assumes that the reader has a thorough understanding of react and react hooks and will be providing only a brief on the required react hooks. For a detailed understanding of react hooks please refer, react hooks docs.

We will be using the following hooks

useState, this allows us to use the react state within functional components (this earlier used to be possible only in class based components and functional components were used only as presentational components).
useContext, this hook takes a context object as an input and returns the value passed in Context.Provider. React context API provides a way to pass the props/data in a component tree without having to pass the props/data to every child at every level (prop drilling)

Below is the syntax for the context API for reference



const SampleContext = React.createContext(/*initialVAlue*/);

// wrap the parent component with the context provider
<SampleContext.Provider value={/*value*/}>
  .
  .
  .
  .
  /* n level child can access the provider value using SampleContext.Consumer */
  <SampleContext.Consumer>
    {value => /* Component with access to value object */}
  </SampleContext.Consumer>
</SampleContext.Provider>

useReducer, this is a custom hook baked into react hooks, which provides a redux reducer like interface. The reducer takes an initial state and action object having type and a payload, based on the type the initial state is recreated (pure function) and returned. A dispatch function is used to trigger the reducer switch.

The usage below of the useReducer is copied from the react docs.



// the reducer function that provides new state based on action.type
function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ];
    // ... other actions ...
    default:
      return state;
  }
}

// the useReducer function keeps track of the state and returns the new state and a dispatcher function.
function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

// Sample usage of the useReducer.
function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAddClick(text) {
    dispatch({ type: 'add', text });
  }

  // ...
}

Lets build

Note: we will be using create-react-app to scaffold a basic react app, also please install the latest stable version of NodeJS.

Create a basic react app using the create-react-app.



$: npx create-react-app react-notifier
$: cd react-notifier
$: npm run start # this will start a development server at http://localhost:3000/

Now open the created project in your favorite code editor, and edit src/App.js to have



// src/App.js
import React from 'react';
import './App.css';

function App() {
  return <div className="App">Hello</div>;
}

export default App;

Also edit src/App.css to have the below code.



.App {
  text-align: left;
}

Next, create a folder structure as below:

We call our notification component Toast.

Lets create the Toast Component

This will be a simple component that takes an array and renders the same based on whether the element of the array is a function or an object



// src/components/Toast

import React from 'react';

export default function Toast({ toast }) {
  // function to decide how to render the content of the toast
  function renderItem(content) {
    if (typeof content === 'function') {
      return content();
    } else {
      return <pre>{JSON.stringify(content, null, 2)}</pre>;
    }
  }
  return (
    <div className="toast">
      <div className="toast-container">
        {/* Displaying each element of the toast */}
        {toast.map(t => {
          return (
            <div
              className={`toast-container-item ${t.type ? t.type : ''}`}
              key={t.id}
            >
              <span role="img" aria-label="close toast" className="toast-close">
                &times;
              </span>
              {renderItem(t.content)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

we will be using .scss for defining the CSS

Note: Please run npm install --save node-sass to compile .scss files



// styles/base.scss
// base colors
$black: #212121;
$white: #fff;
$gray: #e0e0e0;
$primaryBlue: #1652f0;
$hoverBlue: #154de0;
$red: #d9605a;
// fonts
$code: 'Oxygen Mono', monospace;

// styles/toast.scss
@import './base.scss';
.toast {
  position: fixed;
  top: 50px;
  right: 10px;
  width: 300px;
  max-height: 90vh;
  overflow-y: scroll;
  font-family: $code;
  .toast-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .toast-container-item {
      border: $primaryBlue solid 1px;
      margin: 5px 0px;
      padding: 2px;
      border-radius: 4px;
      width: 100%;
      min-height: 100px;
      word-wrap: break-word;
      background-color: $black;
      box-shadow: 4px 4px 15px 2px rgba(black, 0.75);
      color: $white;
      transition: 0.2s;
      &:not(:first-child) {
        margin-top: -3rem;
      }
      // &:hover,
      // &:focus-within {
      //   transform: translateX(-2rem);
      // }
      &:hover ~ .toast-container-item,
      &:focus-within ~ .toast-container-item {
        transform: translateY(3rem);
      }

      &.info {
        border: $primaryBlue solid 1px;
        background-color: $hoverBlue;
      }
      &.danger {
        border: $red solid 1px;
        background-color: $red;
      }
      .toast-close {
        cursor: pointer;
        position: relative;
        top: 5px;
        font-size: 20px;
        font-weight: 800;
      }
    }
  }
}

We use position: fixed; along with the top and right attributes to have the toast notification appear from the top-right corner of the screen.

Subsequently, we use the display: flex; property in the toast-container, to have a flexible layout

To know more on flex please refer: A complete guide to flexbox

Next, let us define our ToastContext so that we can trigger the component from anywhere in the application



// contexts/ToastContext.js

import React, { createContext, useReducer, useContext } from 'react';
import { createPortal } from 'react-dom';
import Toast from '../components/Toast';
import '../styles/toast.scss';

export const ToastContext = createContext();

const initialState = [];

export const ADD = 'ADD';
export const REMOVE = 'REMOVE';
export const REMOVE_ALL = 'REMOVE_ALL';

export const toastReducer = (state, action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        {
          id: +new Date(),
          content: action.payload.content,
          type: action.payload.type
        }
      ];
    case REMOVE:
      return state.filter(t => t.id !== action.payload.id);
    case REMOVE_ALL:
      return initialState;
    default:
      return state;
  }
};

export const ToastProvider = props => {
  const [toast, toastDispatch] = useReducer(toastReducer, initialState);
  const toastData = { toast, toastDispatch };
  return (
    <ToastContext.Provider value={toastData}>
      {props.children}

      {createPortal(<Toast toast={toast} />, document.body)}
    </ToastContext.Provider>
  );
};

export const useToastContext = () => {
  return useContext(ToastContext);
};

Let's break down the above code.

We initialize an empty react context using React.createContext();, next, we prepare the actions that would be required for the notification system, these can be put in separate files if the application becomes bigger and has a lot of actions (to remove conflicting actions),



export const ADD = 'ADD';
export const REMOVE = 'REMOVE';
export const REMOVE_ALL = 'REMOVE_ALL';

Next is the reducer function that takes the initial state as an empty array and based on the action.type pushes to the array or removes while returning a new state.

We also provide an id to all new entries in toast array, this makes it easier to remove the said target toast/notification.

Next we create a Provider function which provides the value to the empty context created via, <Context.Provider>
We combine the returned newState and the dispatcher function from the useReducer hook and send these as values via context API.

We use the React.createPortal to render the toast component in the document.body, this provides easier/less conflicting styling and document flow.

Lastly, we expose the useContext (an easier to use version of <Context.Consumer>) hook via a custom hook.

Update the toast component to use the useToastContext hook so that it can have its own dispatcher to close the toast/notification from within the component



// src/components/Toast.js
import React from 'react';

import { useToastContext, REMOVE } from '../contexts/ToastContext';

export default function Toast({ toast }) {
  const { toastDispatch } = useToastContext();
  function renderItem(content) {
    if (typeof content === 'function') {
      return content();
    } else {
      return <pre>{JSON.stringify(content, null, 2)}</pre>;
    }
  }
  return (
    <div className="toast">
      <div className="toast-container">
        {toast.map(t => {
          return (
            <div
              className={`toast-container-item ${t.type ? t.type : ''}`}
              key={t.id}
            >
              <span
                role="img"
                aria-label="close toast"
                className="toast-close"
                onClick={() =>
                  toastDispatch({ type: REMOVE, payload: { id: t.id } })
                }
              >
                &times;
              </span>
              {renderItem(t.content)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

To see the above in action, let's make some basic routes and navigation using the react-router-dom.



$: npm install -s react-router-dom

Since the following will be made only to show the usage of the Toast Component, we will be defining the components for each route within src/App.js file.

Defining the home component



export const Home = () => {
  const { toastDispatch } = useToastContext();
  return (
    <div>
      <button
        onClick={() =>
          toastDispatch({
            type: ADD,
            payload: {
              content: { sucess: 'OK', message: 'Hello World' }
            }
          })
        }
      >
        Show basic notification
      </button>
    </div>
  );
};

the above is a simple component that renders a button, the onClick of the button dispatches an action with type: ADD some content and optionally a type of info or danger this is used to render the background color of the toast/notification.

similarly we will define some other components just to show various types of toast components use cases.

the final scr/App.js file is below



import React from 'react';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import './App.css';

import { useToastContext, ADD, REMOVE_ALL } from './contexts/ToastContext';

export const Home = () => {

  const { toastDispatch } = useToastContext();

  return (

    <div>

      <button

        onClick={() =>

          toastDispatch({

            type: ADD,

            payload: {

              content: { sucess: 'OK', message: 'Hello World' }

            }

          })

        }

      >

        Show basic notification

      </button>

    </div>

  );

};

export const Info = () => {

  const { toastDispatch } = useToastContext();

  return (

    <div>

      <button

        onClick={() =>

          toastDispatch({

            type: ADD,

            payload: {

              content: { sucess: 'OK', message: 'Info message' },

              type: 'info'

            }

          })

        }

      >

        Show Info notification

      </button>

    </div>

  );

};

export const Danger = () => {

  const { toastDispatch } = useToastContext();

  return (

    <div>

      <button

        onClick={() =>

          toastDispatch({

            type: ADD,

            payload: {

              content: { sucess: 'FAIL', message: 'Something nasty!' },

              type: 'danger'

            }

          })

        }

      >

        Show danger notification

      </button>

    </div>

  );

};

export const CutomHTML = () => {

  const { toastDispatch } = useToastContext();

  return (

    <div>

      <button

        onClick={() =>

          toastDispatch({

            type: ADD,

            payload: {

              content: () => {

                return (

                  <div>

                    <h4>Error</h4>

                    <p>Something nasty happened!!</p>

                  </div>

                );

              },

              type: 'danger'

            }

          })

        }

      >

        Show danger notification with custom HTML

      </button>

    </div>

  );

};

export default function App() {

  const { toast, toastDispatch } = useToastContext();

  function showClearAll() {

    if (toast.length) {

      return (

        <button

          onClick={() =>

            toastDispatch({

              type: REMOVE_ALL

            })

          }

        >

          Clear all notifications

        </button>

      );

    }

  }

  return (

    <div className="App">

      <Router>

        <ul>

          <li>

            <Link to="/">Home</Link>

          </li>

          <li>

            <Link to="/info">Info</Link>

          </li>

          <li>

            <Link to="/danger">Danger</Link>

          </li>

          <li>

            <Link to="/custom-html">Custom HTML</Link>

          </li>

        </ul>

        <Switch>

          <Route exact path="/">

            <Home />

          </Route>

          <Route exact path="/info">

            <Info />

          </Route>

          <Route exact path="/danger">

            <Danger />

          </Route>

          <Route exact path="/custom-html">

            <CutomHTML />

          </Route>

        </Switch>

      </Router>

      <br />

      {showClearAll()}

    </div>

  );

}

Wrap up

A working demo of the above can be found at CodeSandbox link

The Github repo for the above is at https://github.com/kevjose/react-notifier. If you find this interesting do give it a star at Github, it would be motivating for me :)

Building a dashboard UI using grid and flex-box

kevin — Sat, 07 Mar 2020 01:37:16 +0000

What are we building

A mobile first dashboard layout.

Tech stack used

HTML5, CSS3, Javascript (no frameworks for now).

Theory behind

For a long time, layouts have been created using hack-y solutions like display: table, position: relative and floats. CSS being a presentation layers needed a proper way for layouts, enter — Grid and Flex-box.
CSS3 grid is a 2 dimensional grid based layout system, meaning it can control both columns and rows at the same time, while flex-box is a 1 dimensional layout solution, which focus only on one main axis.

Please refer the links below for a complete overview of features/properties of both grid and flex box:

Flex-box is used for layout of components, while grid is preferred for overall/larger scale layouts. As an example the overall container of the dashboard we are going to make, will be created by grid and the individual components like the menu items in aside component will be lay-ed out using flex-box

Browser support

Before we begin, the final dashboard will look as below:

Interested enough?

Let’s begin ..

Creating a blue-print with grid

We will define the blue-print of our dashboard via some HTML5 semantic elements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A Dashboard using grid and flex-box</title>
  </head>
  <body>
    <header></header>
    <aside></aside>
    <main></main>
    <footer></footer>
  </body>
</html>

With our basic blue-print ready, let’s add a layout to it using grid. The grid property is always assigned to the parent such that it affects it direct children, the same holds true with flex-box as well
We will wrap the blueprint in a container so that we do not have to apply the grid property to the body tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Building dashboard with gird and flex</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        color: white;
        box-sizing: border-box;
        font-family: monospace;
        font-size: 15px;
      }
      .grid-container {
        display: grid; /* applies grid layout affecting it's children */
        grid-template-columns: 240px 1fr; /* define the number and sizes of columns */
        grid-template-rows: 50px 1fr 50px; /* defines the number ans sizes of rows*/
        grid-template-areas:
          'aside header'
          'aside main'
          'aside footer'; /* assigns the labeled grid-area to the grid layout, note there has to be two columns and three rows as per the grid template rows/ columns defined */
        height: 100vh;
      }

      .header {
        grid-area: header; /* assigns the grid-area label*/
        background-color: whitesmoke;
      }

      .aside {
        grid-area: aside;
        background-color: darkblue;
      }

      .main {
        grid-area: main;
        background-color: white;
      }
      .footer {
        grid-area: footer;
        background-color: whitesmoke;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <header class="header"></header>
      <aside class="aside"></aside>
      <main class="main"></main>
      <footer class="footer"></footer>
    </div>
  </body>
</html>

display: grid;, applies grid layout affecting it’s children
grid-template-columns, defines the number and sizes of columns the grid has to be divide into
grid-template-rows, defines the number and sizes of rows the grid has to be divided into
grid-template-areas, assigns the labeled grid-area to the grid layout

There has to be two columns and three rows as per the grid template rows/ columns defined.

Layout individual components of the grid using flex-box

Layout for header and footer

<style>
  /* flexing header and footer*/
  .header,
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: darkblue;
    padding: 0 15px;
  }
</style>

<div class="grid-container">
  <header class="header">
    <div class="header_search">Search...</div>
    <div class="header_avatar">Logout</div>
  </header>
  <aside class="aside"></aside>
  <main class="main"></main>
  <footer class="footer">
    <div class="footer_copyright">&copy;2020</div>
    <div class="footer_byline">Made with &hearts;</div>
  </footer>
</div>

flex is assigned to the parent element and applied on it’s direct siblings
display: flex;, flex-es the content within. This layout is one dimensional and by default the main-axis is row hence the content inside will be stacked row-wise. We can change this behaviour using the flex-direction: column property
align-items, defines how items are placed across the cross axis (perpendicular to the main- axis), vertically in the present case
justify-content, define the alignment across the main axis, horizontal in this case

Layout for aside navigation

<style>
  /* flexing aside */
  .aside {
    display: flex;
    flex-direction: column;
  }

  .aside_list {
    padding: 0;
    margin-top: 85px;
    list-style-type: none;
  }

  .aside_list-item {
    padding: 20px 20px 20px 40px;
    color: #ddd;
  }

  .aside_list-item:hover {
    background-color: royalblue;
    cursor: pointer;
  }
</style>

<div class="grid-container">
  <header class="header">
    <div class="header_search">Search...</div>
    <div class="header_avatar">Logout</div>
  </header>
  <aside class="aside">
    <ul class="aside_list">
      <li class="aside_list-item">Menu item1</li>
      <li class="aside_list-item">Menu item2</li>
      <li class="aside_list-item">Menu item3</li>
      <li class="aside_list-item">Menu item4</li>
      <li class="aside_list-item">Menu item5</li>
    </ul>
  </aside>
  <main class="main"></main>
  <footer class="footer">
    <div class="footer_copyright">&copy;2020</div>
    <div class="footer_byline">Made with &hearts;</div>
  </footer>
</div>

flex-direction: column;, has been used to stack items one below the other

Layout for main content area

<style>
  /* Layout for main content overview  and its cards*/
  .main_overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid lightgreen;
  }
  .overview_card {
    flex-basis: 250px;
    flex-grow: 1;
    margin: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    /* background-color: seagreen; */
    height: 100px;
    border: 1px solid darkblue;
    border-radius: 4px;
    color: darkblue;
  }
</style>

<main class="main">
  <div class="main_overview">
    <div class="overview_card">
      <div class="overview_card-info">Overview</div>
      <div class="overview_card-icon">Card</div>
    </div>
    <div class="overview_card">
      <div class="overview_card-info">Overview</div>
      <div class="overview_card-icon">Card</div>
    </div>
    <div class="overview_card">
      <div class="overview_card-info">Overview</div>
      <div class="overview_card-icon">Card</div>
    </div>
    <div class="overview_card">
      <div class="overview_card-info">Overview</div>
      <div class="overview_card-icon">Card</div>
    </div>
  </div>
</main>

flex-basis, defines the default size along main axis before the remaining space is distributed
flex-grow, defines the proportion by which an item can grow with respect to other items. It accepts a unit-less value
flex-wrap: wrap|wrap-reverse, by default flex tries to squish all items in one line, this property helps to bring items to next line

Layout for main cards section inside main (below overview)

<style>
  /* Layout for main-cards section // below main_overview */
  .main_cards {
    margin: 10px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 200px 300px;
    grid-template-areas:
      'card1 card2'
      'card1 card3';
    grid-gap: 10px;
  }
  .card {
    padding: 20px;
    border: 1px solid tomato;
    border-radius: 4px;
    color: tomato;
  }

  .card:first-child {
    grid-area: card1;
  }
  .card:nth-child(2) {
    grid-area: card2;
  }
  .card:nth-child(3) {
    grid-area: card3;
  }
</style>

<main>
  <!-- below the main_overview section -->
  <div class="main_cards">
    <div class="card">Card</div>
    <div class="card">Card</div>
    <div class="card">Card</div>
  </div>
</main>

We have made a two column, three div layout using the grid layout here.
grid-gap: 10px, will provide 10px space between the rows and columns generated.

Making the layout responsive

For simplicity, we will have only one breakpoint at 750px.
We will follow a mobile first approach and write media-queries for style above 750px break-point

<style>
  /* for mobile*/
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 1fr 50px;

    grid-template-areas:
      'header'
      'main'
      'footer';
    height: 100vh;
  }
  /* hide aside by default in mobile */
  .aside {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 240px;
    position: fixed;
    overflow-y: auto;
    z-index: 2;
    transform: translateX(
      -245px
    ); /* pushes the aide bar in the negative x axis ie off scren */
  }

  .aside.active {
    transform: translateX(0); /* brings the aside to view port from left */
  }

  .main_cards {
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 500px 200px 300px;
    grid-template-areas:
      'card1'
      'card2'
      'card3'; /* change the grid template to stack the main_cards one below the other */
    grid-gap: 10px;
  }

  /* style for above 750px */
  @media only screen and (min-width: 750px) {
    .grid-container {
      display: grid;
      grid-template-columns: 240px 1fr;
      grid-template-rows: 50px 1fr 50px;
      grid-template-areas:
        'aside header'
        'aside main'
        'aside footer';
      height: 100vh;
    }

    .aside {
      display: flex;
      flex-direction: column;
      position: relative;
      transform: translateX(0);
    }

    .main_cards {
      margin: 10px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 200px 300px;
      grid-template-areas:
        'card1 card2'
        'card1 card3';
      grid-gap: 10px;
    }
  }
</style>
<!-- no change in HTML markup for responsiveness -->

aside (side bar) will be not visible in the mobile view, we can hide this using the transform: translateX( -245px );, this pushes the aide bar in the negative x axis ie off screen
transform: translateX(0);, brings the aside to view port from left.
aside will have a fixed position in the mobile view, such that the main content area can be scrolled while the aside remains fixed, it will be relative on above 750px breakpoint

To make the responsive layout user friendly, we need to add a toggle button for the aside (side navigation). We will be using some native javascript for toggling the class. Also we will add some markup for showing indicators for the toggle.

<style>
  .menu-icon {
    position: fixed;
    display: flex;
    top: 2px;
    left: 8px;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
    padding: 12px;
    color: black;
  }

  .header_search {
    margin-left: 24px;
  }

  .aside_close-icon {
    position: absolute;
    visibility: visible;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  /* hide aside close button on screen above 750px */
  @media only screen and (min-width: 750px) {
    .aside_close-icon {
      display: none;
    }
  }
</style>

<div class="grid-container">
  <div class="menu-icon">
    <strong> &#9776;</strong>
  </div>
  <header class="header">
    <div class="header_search">Search...</div>
    <div class="header_avatar">Logout</div>
  </header>
  <aside class="aside">
    <div class="aside_close-icon">
      <strong>&times;</strong>
    </div>
    <ul class="aside_list">
      <li class="aside_list-item">Menu item1</li>
      <li class="aside_list-item">Menu item2</li>
      <li class="aside_list-item">Menu item3</li>
      <li class="aside_list-item">Menu item4</li>
      <li class="aside_list-item">Menu item5</li>
    </ul>
  </aside>
  <!-- main content and footer markup  -->
</div>

<script>
  // selecting elements invloved in toggling
  const menuIcon = document.querySelector('.menu-icon');
  const aside = document.querySelector('.aside');
  const asideClose = document.querySelector('.aside_close-icon');

  // toggle function
  function toggle(el, className) {
    if (el.classList.contains(className)) {
      el.classList.remove(className);
    } else {
      el.classList.add(className);
    }
  }

  // attach events to the elements to add/remove active class on click to execute the toggle function
  menuIcon.addEventListener('click', function() {
    toggle(aside, 'active');
  });

  asideClose.addEventListener('click', function() {
    toggle(aside, 'active');
  });
</script>

We select the relevant elements used for toggling action via document.querySelector DOM api.
The toggle function in the script tag add/remove the .active class, which translates the aside component to show in the viewport.

We now have made a responsive/squishy dashboard.

Attached is the code-pen for reference:
https://codepen.io/kevjose/pen/YzXrobv

The above is just one of the many ways to make a dashboard ui.

Thats all for now. Cheers!