Building Scalable Applications with Thymeleaf and Spring Boot/

...

/

Application Shell - Client-Side Interactivity

Application Shell - Client-Side Interactivity

Learn to implement client-side interactivity using a bit of javascript.

We'll cover the following...

We will need to use some minimal Javascript in our application to make the popup menu work. There are a lot of Javascript libraries, but we need something that is light and does not require a full framework setup.

AlpineJS

Tailwind UI recommends AlpineJS for server-rendered websites like the one we are building, so we will go with that.

We will also remove the search bar and the notification bell icon from the application shell we chose from Tailwind UI, as we won’t be using them for now.

To start, we will add AlpineJS via a CDN and add some custom Javascript to control the user popup menu:

Press + to interact
<script src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js" defer></script>
<script>
    function userPopupMenu() { 
        return {
            show: false, 
            toggleVisibility() { 
                this.show = !this.show;
            },
            close() { 
                this.show = false;
            },
            isVisible() { 
                return this.show === true;
            }
        };
    }
</script>

The above code does the following:

  • Defines the userPopupMenu() JavaScript function.
  • Keeps track of the visibility of the popup menu in the show variable.
  • Defines a method that will allow us to toggle the
...