☰

Microsoft Teams - Toggle Sidebar

Add a toggle button to hide the Chat / Teams sidebar

Versión del día 10/09/2024. Echa un vistazo a la versión más reciente.

// ==UserScript==
// @name         Microsoft Teams - Toggle Sidebar
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Add a toggle button to hide the Chat / Teams sidebar
// @author       D365Fixes
// @match        https://teams.microsoft.com/v2/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=teams.microsoft.com
// @run-at       document-start
// ==/UserScript==

(function() {
	'use strict';

	const styles = `
		.hide-sub-nav div[data-tid="experience-layout"] {
			--sub-nav-width: 0rem !important;
		}

		.hide-sub-nav div[data-tid="app-layout-area--sub-nav"] {
			opacity: 0;
			visibility: hidden;
		}

		div[data-tid="experience-layout"], div[data-tid^="app-layout-area"], div[data-tid="app-layout-area--sub-nav"] {
			transition: all .25s ease-in-out !important;
			transition-delay: unset !important;
		}

		#toggle-sidebar-btn {
			background-color: transparent;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			line-height: 1;
			width: 30px;
			height: 30px;
			padding: 5px;
			margin-left: 10px;
			border: 0;
			cursor: pointer;
		}
	`;

	function injectStyles() {
		const styleElement = document.createElement('style');
		styleElement.textContent = styles;
		document.head.appendChild(styleElement);
	}

	function addToggleButton() {
		var waitForTitlebarStartSlot = window.setInterval(function() {
			if (document.querySelectorAll('div[data-tid="titlebar-start-slot"]').length > 0) {
				console.log('[INFO] Titlebar Start Slot found');
				window.clearInterval(waitForTitlebarStartSlot);

				const toggleButton = document.createElement('button');
				toggleButton.id = 'toggle-sidebar-btn';
				toggleButton.textContent = '◀️';

				let sidebarOpen = true;

				toggleButton.addEventListener('click', function() {
					sidebarOpen = !sidebarOpen;
					toggleButton.textContent = sidebarOpen ? '◀️' : '▶️';
					document.body.classList.toggle('hide-sub-nav');
				});

				document.querySelector('div[data-tid="titlebar-start-slot"]').appendChild(toggleButton);

				toggleButton.addEventListener('click', toggleSidebar);
			}
		}, 300);
	}

	function toggleSidebar() {
		const appDiv = document.getElementById('app');
		if (appDiv) {
			appDiv.classList.toggle('hide-sub-nav');
		}
	}

	document.addEventListener('DOMContentLoaded', function() {
		injectStyles();
		addToggleButton();
	});
})();