elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-24 12:08:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove unessecary hover logic

Browse Source
This commit is contained in:
Jade (Rose) Rowland 2024-10-14 13:51:14 -04:00
parent 61f070744a
commit 8440fa42ea
1 changed files with 8 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
website/src/repl/components/panel/Panel.jsx
View File

@ -18,23 +18,18 @@ const TAURI = typeof window !== 'undefined' && window.__TAURI__;
export function HorizontalPanel({ context }) { export function HorizontalPanel({ context }) {
const settings = useSettings(); const settings = useSettings();
const { isPanelPinned: pinned, activeFooter: tab } = settings; const { isPanelPinned: pinned, activeFooter: tab } = settings;
const [isHovered, setIsHovered] = useState(false);
const showContent = isHovered || pinned;
return ( return (
<PanelNav <PanelNav
onMouseEnter={(x) => setIsHovered(true)}
onMouseLeave={(x) => setIsHovered(false)}
className={cx( className={cx(
'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col', 'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col',
pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10', pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
)} )}
> >
{showContent && ( <div className="flex h-full overflow-auto">
<div className="flex h-full overflow-auto"> <PanelContent context={context} tab={tab} />
<PanelContent context={context} tab={tab} /> </div>
</div>
)}
<div className="flex justify-between min-h-10 max-h-10 pr-2 items-center"> <div className="flex justify-between min-h-10 max-h-10 pr-2 items-center">
<Tabs setTab={setTab} tab={tab} pinned={pinned} /> <Tabs setTab={setTab} tab={tab} pinned={pinned} />
<PinButton pinned={pinned} setPinned={setPanelPinned} /> <PinButton pinned={pinned} setPinned={setPanelPinned} />
@ -46,8 +41,6 @@ export function HorizontalPanel({ context }) {
export function VerticalPanel({ context }) { export function VerticalPanel({ context }) {
const settings = useSettings(); const settings = useSettings();
const { isPanelPinned: pinned, activeFooter: tab } = settings; const { isPanelPinned: pinned, activeFooter: tab } = settings;
const [isHovered, setIsHovered] = useState(false);
const showContent = isHovered || pinned;
return ( return (
<PanelNav <PanelNav
@ -60,11 +53,10 @@ export function VerticalPanel({ context }) {
<Tabs setTab={setTab} tab={tab} pinned={pinned} /> <Tabs setTab={setTab} tab={tab} pinned={pinned} />
<PinButton pinned={pinned} setPinned={setPanelPinned} /> <PinButton pinned={pinned} setPinned={setPanelPinned} />
</div> </div>
{showContent && (
<div className="overflow-auto"> <div className="overflow-auto">
<PanelContent context={context} tab={tab} /> <PanelContent context={context} tab={tab} />
</div> </div>
)}
</div> </div>
<div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center h-full group-hover:hidden ')}> <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center h-full group-hover:hidden ')}>
<ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" /> <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />