blomios/TougliGui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: work on windows resizing

Browse Source
This commit is contained in:
Blomios
2026-04-23 09:11:01 +02:00
parent 9d181f3676
commit 3fb8e23c07
15 changed files with 1286 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/Sidebar.tsx
View File

@ -1,10 +1,23 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { useStore } from "../store";
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener("resize", handler);
return () => window.removeEventListener("resize", handler);
}, []);
return width;
}
export default function Sidebar() {
const { guides, openGuide, activeGuideGid, view } = useStore();
const { guides, openGuide, activeGuideGid, view, sidebarCollapsed, setSidebarCollapsed } = useStore();
const [search, setSearch] = useState("");
const [collapsed, setCollapsed] = useState(false);
const collapsed = sidebarCollapsed;
const setCollapsed = setSidebarCollapsed;
const windowWidth = useWindowWidth();
const isOverlay = collapsed || windowWidth < 500;
const filtered = guides.filter(g =>
g.name.toLowerCase().includes(search.toLowerCase())
@ -12,27 +25,40 @@ export default function Sidebar() {
return (
<aside style={{
width: collapsed ? "32px" : "220px",
position: isOverlay ? "absolute" : "relative",
left: 0,
top: 0,
bottom: 0,
zIndex: 10,
width: collapsed ? "36px" : "190px",
flexShrink: 0,
background: "#161b22",
borderRight: "1px solid #2d3748",
background: collapsed ? "transparent" : "#161b22",
borderRight: collapsed ? "none" : "1px solid #2d3748",
display: "flex",
flexDirection: "column",
overflow: "hidden",
transition: "width 0.2s ease",
transition: "width 0.2s ease, background 0.2s ease",
}}>
{/* Toggle button */}
<button
onClick={() => setCollapsed(c => !c)}
title={collapsed ? "Ouvrir le menu" : "Réduire le menu"}
style={{
width: "100%", height: "36px", flexShrink: 0,
background: "transparent", border: "none",
borderBottom: "1px solid #2d3748",
color: "#4a5568", cursor: "pointer",
display: "flex", alignItems: "center",
width: "100%",
height: "36px",
flexShrink: 0,
background: collapsed ? "rgba(22,27,34,0.9)" : "transparent",
border: collapsed ? "1px solid #2d3748" : "none",
borderLeft: "none",
borderBottom: collapsed ? "1px solid #2d3748" : "1px solid #2d3748",
borderRadius: collapsed ? "0 6px 6px 0" : "0",
color: "#4a5568",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: collapsed ? "center" : "flex-end",
padding: "0 10px",
marginTop: collapsed ? "8px" : "0",
transition: "all 0.15s",
}}
onMouseEnter={e => (e.currentTarget.style.color = "#f0c040")}
@ -59,7 +85,7 @@ export default function Sidebar() {
style={{
width: "100%", background: "#0d1117", border: "1px solid #2d3748",
borderRadius: "6px", padding: "6px 10px", color: "#e2e8f0",
fontSize: "12px", outline: "none",
fontSize: "12px", outline: "none", boxSizing: "border-box",
}}
onFocus={e => (e.target.style.borderColor = "#f0c040")}
onBlur={e => (e.target.style.borderColor = "#2d3748")}
@ -96,13 +122,18 @@ export default function Sidebar() {
if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent";
}}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "4px" }}>
<span style={{
fontSize: "12px", fontWeight: isActive ? 600 : 400,
color: isActive ? "#f0c040" : "#e2e8f0",
whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
maxWidth: "140px",
}}>
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
overflow: "hidden",
wordBreak: "break-word",
lineHeight: 1.3,
flex: 1,
} as React.CSSProperties}>
{guide.name}
</span>
<span style={{