admin: reclaim the desktop header, move pause and log out to the sidebar
the header row survives only on narrow screens; on desktop its lone occupant, log out, joins pause in the sidebar footer, both full width. pause leaves the query detail page's related actions, where a global control had no business, and its hand-rolled duration dropdown becomes a react-aria menu with real keyboard navigation, dismissal and positioning.
This commit is contained in:
@@ -110,6 +110,17 @@ const styles = stylex.create({
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
},
|
||||
/**
|
||||
* In a 14rem column the button and its error stack, so the button spans the
|
||||
* sidebar and matches the Pause trigger below it.
|
||||
*/
|
||||
sidebarLogout: {
|
||||
flexDirection: "column",
|
||||
alignItems: "stretch",
|
||||
gap: "0.25rem",
|
||||
paddingInline: "1rem",
|
||||
paddingTop: "0.75rem",
|
||||
},
|
||||
shell: {
|
||||
minHeight: "100dvh",
|
||||
height: { default: null, [WIDE]: "100dvh" },
|
||||
@@ -147,8 +158,9 @@ const styles = stylex.create({
|
||||
minWidth: { default: null, [WIDE]: 0 },
|
||||
flexDirection: "column",
|
||||
},
|
||||
/** Narrow only: on WIDE the sidebar carries everything this row held. */
|
||||
header: {
|
||||
display: "flex",
|
||||
display: { default: "flex", [WIDE]: "none" },
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
borderBottomWidth: 1,
|
||||
@@ -284,13 +296,13 @@ function VersionFooter() {
|
||||
);
|
||||
}
|
||||
|
||||
function LogoutButton() {
|
||||
function LogoutButton({ style }: { style?: stylex.StyleXStyles }) {
|
||||
const { authRequired, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [error, setError] = useState<unknown>(null);
|
||||
if (authRequired !== true) return null;
|
||||
return (
|
||||
<div {...stylex.props(styles.logoutRow)}>
|
||||
<div {...stylex.props(styles.logoutRow, style)}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@@ -318,6 +330,7 @@ export default function AppShell() {
|
||||
<nav aria-label="Main" {...stylex.props(styles.sidebarNav)}>
|
||||
<NavLinks />
|
||||
</nav>
|
||||
<LogoutButton style={styles.sidebarLogout} />
|
||||
<SidebarFooter />
|
||||
</aside>
|
||||
<div {...stylex.props(styles.column)}>
|
||||
|
||||
Reference in New Issue
Block a user