From 83d542d06a623e930ac4fd7a0b8661800861db96 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Tue, 20 Jan 2026 22:13:03 +0100 Subject: [PATCH] proper strudel icon + toggle menu from top bar --- website/src/repl/components/Header.jsx | 65 ++++++------------- .../src/repl/components/icons/StrudelIcon.jsx | 13 ++++ website/src/repl/components/panel/Panel.jsx | 42 ++++-------- 3 files changed, 48 insertions(+), 72 deletions(-) create mode 100644 website/src/repl/components/icons/StrudelIcon.jsx diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx index ca4e1ecf9..29895deaf 100644 --- a/website/src/repl/components/Header.jsx +++ b/website/src/repl/components/Header.jsx @@ -1,8 +1,10 @@ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon'; import cx from '@src/cx.mjs'; -import { useSettings, setIsZen } from '../../settings.mjs'; +import { useSettings, setIsZen, setIsPanelOpened } from '../../settings.mjs'; +import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon'; import '../Repl.css'; +import { Bars3Icon } from '@heroicons/react/16/solid'; const { BASE_URL } = import.meta.env; const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; @@ -11,13 +13,13 @@ export function Header({ context, embedded = false }) { const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } = context; const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location); - const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings(); + const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily, isPanelOpen } = useSettings(); return ( diff --git a/website/src/repl/components/icons/StrudelIcon.jsx b/website/src/repl/components/icons/StrudelIcon.jsx new file mode 100644 index 000000000..37df91685 --- /dev/null +++ b/website/src/repl/components/icons/StrudelIcon.jsx @@ -0,0 +1,13 @@ +// Source: https://commons.wikimedia.org/wiki/File:CHAM_PUNCTUATION_SPIRAL.svg +// License: SIL Open Font License, Version 1.1. The license text is available at https://openfontlicense.org/open-font-license-official-text/ +export function StrudelIcon({ className = '' }) { + return ( + + + + + + + + ); +} diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx index 8fc6d4a8e..765ae649f 100644 --- a/website/src/repl/components/panel/Panel.jsx +++ b/website/src/repl/components/panel/Panel.jsx @@ -42,36 +42,24 @@ export function HorizontalPanel({ context }) { export function VerticalPanel({ context }) { const settings = useSettings(); const { activeFooter: tab, isPanelOpen } = settings; - + if (!isPanelOpen) { + return; + } return ( - {isPanelOpen ? ( -
-
- - -
- -
- -
+
+
+ +
- ) : ( - - )} + +
+ +
+
); } @@ -207,12 +195,10 @@ function CloseButton({ onClick }) { return ( ); }