Tracking a dynamically changing custom variable in Matomo(piwik)

I am using Matomo to track users on an online dashboard; it's a standard fare with nothing out of the ordinary, and I am only using two custom variables. The two custom variables values are static so to speak, as in they are filled when the page is generated with a users username and their role. Something that is static and does not change for as long as they are logged in.

Now I want to also track some actions they are doing that doesn't involve a page load. To be more precise, the main navigation can be dynamically switched between a slim/collapsed version, and a fully expanded version. I want to track if a user has the menu expanded or not. The issue is that a user can change that on the fly.

I have two methods of checking if a user has the navigation expanded or not: Checking a class on the element, or a cookie. When a user switches between an expanded navigation, the settings is saved to a cookie so the choice persists across page load.

How do I track something that can be changed dynamically? I'm not an experienced matomo user, so I don't really know the obvious answers. I have also noticed something called custom dimensions, maybe that can help?

If it helps, here is the code although it's a pretty standard fare:

        <script type="text/javascript">
        var _paq = window._paq || [];
        _paq.push(["setCustomVariable", 1, "UserName", "value set on page generation", "visit"]);
        _paq.push(["setCustomVariable", 2, "RoleTemplate", "value set on page generation", "visit"]);
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function () {
            var u = "https://myanalyticsurl.com/";
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', '1']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
        })();
    </script>

Website is asp.net mvc 5 based.

Well anyway, here is what I came up with, it's not quite what I wanted, but it gets the job done for now. The idea here is that I use Cookie.js to get a cookie and attach the cookie's value to the custom variable:

<script type="text/javascript">
var _paq = window._paq || [];
_paq.push(["setCustomVariable", 1, "UserName", "value set on page generation", "visit"]);
_paq.push(["setCustomVariable", 2, "RoleTemplate", "value set on page generation", "visit"]);
_paq.push(["setCustomVariable", 3, "ExpandedNavigationSetting", Cookies.get("sidenav-state") ? Cookies.get("sidenav-state") : "NA", "visit"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
    var u = "https://myanalyticsurl.com/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();

I will just post this as an ansver to my own question should anyone stumble across this question with the same issue.