mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide full header toolbar when left rail is active; fix user menu in left rail

Browse Source 
- Right header section now also gets display:none when useLeftRail is true,
  so neither the left nor right header controls are visible in left-rail mode
- Replaced UserMenu (which positions from the right edge) with an inline
  dropdown in the left rail that opens to the right of the rail at left:52px,
  correctly positioned and functional
- Added LogOut icon to lucide imports

v1.106.3
This commit is contained in:
mARTin-B78 2026-05-11 09:10:26 +02:00
parent 9104625353
commit 9ef2b9fe5f
2 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.106.2",
"version": "1.106.3",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

37
src/components/WeeklyView.tsx
View File

@ -92,6 +92,7 @@ import {
Bot,
Printer,
Star,
LogOut,
} from "lucide-react";
const stripHtml = (html: string) => html.replace(/<[^>]*>/g, '').trim();
@ -1253,6 +1254,7 @@ export default function WeeklyView() {
const [showQuickSettings, setShowQuickSettings] = useState(false);
const [leftRailExpanded, setLeftRailExpanded] = useState(false);
const [flyoutSection, setFlyoutSection] = useState<string | null>(null);
const [showRailUserMenu, setShowRailUserMenu] = useState(false);
const [flyoutY, setFlyoutY] = useState(0);
const flyoutTimerRef = useRef<NodeJS.Timeout | null>(null);
const [showProjectsSidebar, setShowProjectsSidebar] = useState(false);
@ -5935,12 +5937,33 @@ export default function WeeklyView() {
{railSep}
{/* Settings (cogwheel) + User menu at bottom */}
<button onClick={() => setShowSettings(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Einstellungen" : "Settings"}><Settings size={15} /></button>
<UserMenu
userEmail={session?.user?.email}
onOpenSettings={() => setShowSettings(true)}
language={profile.language}
trigger={<button style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Benutzerprofil" : "User profile"}><User size={15} /></button>}
/>
<div style={{ position: "relative" }}>
<button onClick={() => setShowRailUserMenu(!showRailUserMenu)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Benutzerprofil" : "User profile"}><User size={15} /></button>
{showRailUserMenu && (
<>
<div style={{ position: "fixed", inset: 0, zIndex: 998 }} onClick={() => setShowRailUserMenu(false)} />
<div style={{ position: "fixed", left: "52px", bottom: "60px", width: "200px", background: darkMode ? "#1f2937" : "#ffffff", border: "1px solid var(--line)", borderRadius: "10px", boxShadow: "2px 4px 16px rgba(0,0,0,0.15)", zIndex: 999, overflow: "hidden" }}>
<div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)" }}>
<p style={{ fontSize: "0.8rem", fontWeight: 600, color: darkMode ? "#e5e7eb" : "#374151", margin: 0 }}>{profile.language === "de" ? "Angemeldet als" : "Signed in as"}</p>
<p style={{ fontSize: "0.75rem", color: darkMode ? "#9ca3af" : "#6b7280", margin: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{session?.user?.email || "User"}</p>
</div>
<button onClick={() => { setShowSettings(true); setShowRailUserMenu(false); }} style={{ width: "100%", textAlign: "left", padding: "8px 14px", fontSize: "0.85rem", color: darkMode ? "#e5e7eb" : "#374151", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
onMouseEnter={(e) => (e.currentTarget.style.background = darkMode ? "#374151" : "#f3f4f6")}
onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
<Settings size={15} style={{ opacity: 0.5 }} />
{profile.language === "de" ? "Einstellungen" : "Settings"}
</button>
<div style={{ borderTop: "1px solid var(--line)", margin: "2px 0" }} />
<button onClick={() => signOut()} style={{ width: "100%", textAlign: "left", padding: "8px 14px", fontSize: "0.85rem", color: "#ef4444", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(239,68,68,0.08)")}
onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
<LogOut size={15} style={{ opacity: 0.7 }} />
{profile.language === "de" ? "Abmelden" : "Sign Out"}
</button>
</div>
</>
)}
</div>
</div>
)}
</div>
@ -6344,7 +6367,7 @@ export default function WeeklyView() {
</div>
{/* RIGHT SECTION: Navigation & Tools */}
<div className="weekly-header-controls flex-shrink-0 flex items-center gap-1.5 sm:gap-2 transition-opacity duration-700 opacity-0 group-hover:opacity-100" style={{ zIndex: 10, ...(showIntroHints ? { opacity: 1 } : {}) }}>
<div className="weekly-header-controls flex-shrink-0 flex items-center gap-1.5 sm:gap-2 transition-opacity duration-700 opacity-0 group-hover:opacity-100" style={{ zIndex: 10, display: useLeftRail ? "none" : undefined, ...(showIntroHints ? { opacity: 1 } : {}) }}>
{/* Secondary actions — hidden on tablet, visible on desktop */}
<div className="header-desktop-only flex items-center gap-1.5">
<button onClick={handleUndo} disabled={undoCount === 0} className="weekly-btn-icon disabled:opacity-30 disabled:cursor-default" title="Undo (Ctrl+Z)">