Hides the default sidebar toggle and makes the sidebar a slim, hover-to-expand panel.
// ==UserScript==
// @name AI Studio Ultimate Collapsible Sidebar
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Hides the default sidebar toggle and makes the sidebar a slim, hover-to-expand panel.
// @author Your Name
// @match https://aistudio.google.com/prompts/*
// @grant GM_addStyle
// @run-at document-start
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// --- CONFIGURATION ---
const collapsedWidth = '24px'; // A very slim tab to hover over.
const expandedWidth = '256px'; // The full width of the sidebar when you hover.
// --- END CONFIGURATION ---
GM_addStyle(`
/* --- 1. Hide the original hamburger toggle button --- */
/* This removes the now-redundant button completely. */
button[aria-label="Toggle navigation menu"] {
display: none !important;
}
/* --- 2. The main sidebar container --- */
.v3-left-nav {
/* Set the initial (collapsed) width to be a small tab */
width: ${collapsedWidth} !important;
/* Smoothly animate the width change */
transition: width 0.3s ease-in-out !important;
/* Hide content that would overflow horizontally */
overflow-x: hidden;
}
/* --- 3. The hover state for the sidebar --- */
.v3-left-nav:hover {
/* Expand to the full width on hover */
width: ${expandedWidth} !important;
}
/* --- 4. The <nav> element inside the sidebar --- */
/* This contains all the links and icons. */
.v3-left-nav nav {
/* By default (when collapsed), make it completely invisible */
opacity: 0;
pointer-events: none; /* Prevents clicking on invisible elements */
/* Add a smooth transition for the fade effect */
transition: opacity 0.2s ease-in-out;
}
/* --- 5. The hover state for the <nav> element --- */
/* When the parent .v3-left-nav is hovered, fade the nav content in. */
.v3-left-nav:hover nav {
opacity: 1;
pointer-events: auto; /* Make it clickable again */
/* Add a slight delay to the fade-in so it appears after the panel starts expanding */
transition-delay: 0.15s;
}
`);
})();