UX: implement visual product roadmap

frontend/src/components/Layout.tsx

@@ -313,19 +313,23 @@ export function Layout() {
             )}
           </div>
           <div className="topbar-meta">
-            <LanguageSwitcher compact />
             <DemoGuideTrigger />
             <DemoBadge />
-            <span className="timezone"><Icon name="clock" /> {t("common:timezone")}</span>
             {user && (
-              <div className="operator">
-                <span className="avatar">{user.display_name.split(" ").map((name) => name[0]).join("").slice(0, 2)}</span>
-                <span><strong>{user.display_name}</strong><small>{user.role === "operations_manager" ? t("auth:roleOperationsManager") : t("auth:roleRentalEmployee")}</small></span>
-              </div>
+              <details className="operator-menu">
+                <summary className="operator">
+                  <span className="avatar">{user.display_name.split(" ").map((name) => name[0]).join("").slice(0, 2)}</span>
+                  <span><strong>{user.display_name}</strong><small>{user.role === "operations_manager" ? t("auth:roleOperationsManager") : t("auth:roleRentalEmployee")}</small></span>
+                </summary>
+                <div className="operator-popover">
+                  <LanguageSwitcher compact />
+                  <span className="timezone"><Icon name="clock" /> {t("common:timezone")}</span>
+                  <button className="operator-logout" type="button" onClick={handleLogout}>
+                    <Icon name="logout" /> {t("switchRole")}
+                  </button>
+                </div>
+              </details>
             )}
-            <button className="icon-button" type="button" onClick={handleLogout} aria-label={t("switchRole")} title={t("switchRoleTitle")}>
-              <Icon name="logout" />
-            </button>
           </div>
         </header>