Trying to add anonymous login button in the sidebar

Development
1

Hi I am new to RC dev and I am trying to add anonymous login button to the sidebar.
So far i managed to add the button , but i am having hard time calling anonymous login screen when clicked

    const AnonymousIcon = `<svg id="AnonymousIcon" viewBox="0 0 122.88 106.65" id=".5107004374421964">
 <path d="M43.54 79.42c5.85 17.22 30.3 17.85 35.79 0 6.47 5.82 25.61 6.99 32.74 10.96 2.25 1.26 4.29 2.86 5.92 5.02 1.59 2.1 3.95 6.77 4.88 11.25H0c.93-4.48 3.29-9.15 4.88-11.25 1.64-2.16 3.67-3.76 5.92-5.02 7.13-3.97 26.27-5.14 32.74-10.96zm-4.48-35.68c-1.23.05-2.15.3-2.79.73-.36.24-.63.55-.8.92-.19.41-.28.91-.26 1.48.05 1.68.93 3.88 2.64 6.42l.02.04 5.53 8.8c2.22 3.53 4.55 7.13 7.44 9.77 2.78 2.54 6.15 4.26 10.61 4.27 4.83.01 8.36-1.78 11.23-4.46 2.98-2.79 5.34-6.62 7.65-10.44L86.56 51c1.16-2.65 1.59-4.43 1.32-5.47-.16-.62-.84-.92-2.01-.98-.25-.01-.5-.02-.76-.01-.28.01-.57.03-.87.05-.17.01-.33 0-.48-.03-.55.03-1.13-.01-1.71-.09l2.14-9.45c-15.84 2.5-27.69-9.27-44.44-2.35l1.21 11.14c-.67.04-1.31.02-1.9-.07zm48.95-1.99c1.53.47 2.52 1.44 2.92 3.02.45 1.74-.04 4.2-1.52 7.56l-.09.18-6.31 10.39c-2.43 4-4.9 8.02-8.19 11.1-3.41 3.19-7.61 5.32-13.36 5.3-5.37-.01-9.41-2.06-12.72-5.09-3.2-2.93-5.65-6.71-7.98-10.41L35.22 55c-2.02-3.02-3.08-5.78-3.14-8.04-.03-1.07.15-2.03.54-2.88.41-.89 1.05-1.63 1.9-2.21.4-.27.85-.5 1.34-.68-.36-4.77-.49-10.79-.26-15.82.12-1.19.35-2.39.68-3.58 1.41-5.05 4.96-9.12 9.35-11.92 2.42-1.54 5.07-2.71 7.84-3.49 1.75-.5-1.5-6.12.32-6.3 8.79-.9 23 7.12 29.14 13.76 3.07 3.33 5 7.73 5.42 13.56l-.34 14.35zM64.22 59.19h-6.61v-.66c0-1.13.13-2.04.39-2.74.25-.7.63-1.35 1.13-1.93.5-.58 1.64-1.6 3.4-3.06.94-.76 1.4-1.47 1.4-2.1 0-.64-.19-1.14-.57-1.49-.37-.36-.95-.53-1.71-.53-.83 0-1.51.27-2.05.82-.54.54-.88 1.49-1.04 2.84l-6.72-.84c.23-2.47 1.13-4.46 2.7-5.97 1.57-1.51 3.98-2.26 7.22-2.26 2.52 0 4.56.53 6.11 1.58 2.11 1.42 3.16 3.32 3.16 5.7 0 .98-.27 1.93-.82 2.85-.54.91-1.65 2.03-3.33 3.35-1.17.92-1.91 1.67-2.21 2.23-.3.57-.45 1.3-.45 2.21zm-6.83 1.74h7.07v4.3h-7.07v-4.3z"/>
 </svg>`; // AnonymousIcon

const toggleButton = `<button class="sidebar__toolbar-button rc-tooltip rc-tooltip--down js-button" aria-label="Login Anonymously">D</button>`;

function GetAnonymousIcon() {
	return `<svg class="rc-icon sidebar__toolbar-button-icon sidebar__toolbar-button-icon--darkmode" aria-hidden="true">
    <use xlink:href="#icon-darkmode"></use>${AnonymousIcon}
  </svg>`;
}

function LoginAnonymously() {
	//document.body.classList.toggle('dark-mode');
	//const setting = (!isDarkModeSet()).toString();
    //localStorage.setItem('dark-mode', setting);
    alert("Sign in anonymously!");
  
}

function addAnonymousLogonIcon() {
	const sidebarToolbar = $('.sidebar__toolbar');

	// wait for the sidebar toolbar to be visible
	// this will also be false if the toolbar doesn't exist yet
	if(!sidebarToolbar.is(':visible')) {
		setTimeout(addAnonymousLogonIcon, 250);
		return;
	}

	var darkModeButton = $(`.js-button[aria-label="Login Anonymously"]`);

	// do nothing if button is already on the screen
	if (darkModeButton.is(':visible')) {
		return;
	}

	darkModeButton = $(toggleButton).prependTo(sidebarToolbar);
	darkModeButton.html(GetAnonymousIcon());

	darkModeButton.on('click', function() {
		LoginAnonymously();
		$(this).blur();
	});
}

$(addAnonymousLogonIcon);

rc1
rc2
rc3