WordPress: A Better Admin Bar - hide the admin bar in desktop behind a tab and reveal on hover/focus

functions.php

add_action( 'after_setup_theme', function() {
    // remove admin bar margin
	add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
} );

style.css

/* Admin bar */
@media only screen and (min-width: 601px) {
	#wpadminbar {
		transform: translateY(-100%);
		transition: all 500ms ease-out;
		transition-delay: 1000ms;
		height: auto; /* allow items to wrap */
	}

	#wpadminbar:hover {
		transform: translateY(0);
		transition: all 150ms ease-out;
	}
	
	#wpadminbar:has(:focus) {
		transform: translateY(0);
		transition: all 150ms ease-out;
	}
	
	#wpadminbar:after {
		content: '^^ admin bar ^^';
		position: absolute;
		top: 100%;
		right: 50%;
		transform: translateX(50%);
		background: #1d2327;
		color: #fff;
		padding: .5em .5em;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		border-radius: 0 0 6px 6px;
		font-size: 12px;
		line-height: 1;
	}
}