feat: Add hamburger menu to Podcast Maker header and move Bible to AnalysisPanel
- Add hamburger menu to Header with gradient styling - Move Help, My Episodes, My Projects, New Episode into dropdown menu - Move PodcastBiblePanel into AnalysisPanel header as icon button - Display Bible details in a styled Popover - Improve overall header UX and mobile responsiveness
This commit is contained in:
ajaysi
@@ -1,13 +1,18 @@
|
||||
import React from "react";
|
||||
import { Stack, Typography, Box } from "@mui/material";
|
||||
import React, { useState } from "react";
|
||||
import { Stack, Typography, Box, IconButton, Menu, MenuItem, Divider, ListItemIcon, ListItemText } from "@mui/material";
|
||||
import {
|
||||
Mic as MicIcon,
|
||||
Info as InfoIcon,
|
||||
Menu as MenuIcon,
|
||||
Close as CloseIcon,
|
||||
AutoAwesome as AutoAwesomeIcon,
|
||||
LibraryMusic as LibraryMusicIcon,
|
||||
Folder as FolderIcon,
|
||||
Help as HelpIcon,
|
||||
Add as AddIcon,
|
||||
BarChart as BarChartIcon,
|
||||
} from "@mui/icons-material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PrimaryButton, SecondaryButton } from "../ui";
|
||||
import { PrimaryButton } from "../ui";
|
||||
import HeaderControls from "../../shared/HeaderControls";
|
||||
|
||||
interface HeaderProps {
|
||||
@@ -17,6 +22,36 @@ interface HeaderProps {
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({ onShowProjects, onNewEpisode }) => {
|
||||
const navigate = useNavigate();
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const isMenuOpen = Boolean(anchorEl);
|
||||
|
||||
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleHelp = () => {
|
||||
handleMenuClose();
|
||||
window.open("/docs", "_blank");
|
||||
};
|
||||
|
||||
const handleMyEpisodes = () => {
|
||||
handleMenuClose();
|
||||
navigate("/asset-library?source_module=podcast_maker&asset_type=audio");
|
||||
};
|
||||
|
||||
const handleMyProjects = () => {
|
||||
handleMenuClose();
|
||||
onShowProjects();
|
||||
};
|
||||
|
||||
const handleNewEpisode = () => {
|
||||
handleMenuClose();
|
||||
onNewEpisode();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
@@ -25,7 +60,7 @@ export const Header: React.FC<HeaderProps> = ({ onShowProjects, onNewEpisode })
|
||||
minWidth: 0,
|
||||
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)",
|
||||
borderRadius: 3,
|
||||
p: { xs: 2, md: 2.5 },
|
||||
p: { xs: 1.5, md: 2.5 },
|
||||
border: "1px solid rgba(102, 126, 234, 0.15)",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
@@ -45,13 +80,14 @@ export const Header: React.FC<HeaderProps> = ({ onShowProjects, onNewEpisode })
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
flexWrap="wrap"
|
||||
gap={2}
|
||||
gap={1}
|
||||
>
|
||||
{/* Logo and Title */}
|
||||
<Stack direction="row" alignItems="center" gap={1.5}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
width: { xs: 36, md: 44 },
|
||||
height: { xs: 36, md: 44 },
|
||||
borderRadius: 2,
|
||||
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
||||
display: "flex",
|
||||
@@ -60,7 +96,7 @@ export const Header: React.FC<HeaderProps> = ({ onShowProjects, onNewEpisode })
|
||||
boxShadow: "0 4px 12px rgba(102, 126, 234, 0.3)",
|
||||
}}
|
||||
>
|
||||
<MicIcon sx={{ color: "#fff", fontSize: 24 }} />
|
||||
<MicIcon sx={{ color: "#fff", fontSize: { xs: 20, md: 24 } }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h5"
|
||||
@@ -69,87 +105,131 @@ export const Header: React.FC<HeaderProps> = ({ onShowProjects, onNewEpisode })
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
fontWeight: 700,
|
||||
fontSize: { xs: "1.25rem", md: "1.5rem" },
|
||||
fontSize: { xs: "1.1rem", sm: "1.25rem", md: "1.5rem" },
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
ALwrity Podcast Maker
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
alignItems="center"
|
||||
flexWrap="wrap"
|
||||
useFlexGap
|
||||
sx={{
|
||||
justifyContent: { xs: "flex-start", md: "flex-end" },
|
||||
gap: { xs: 0.5, md: 1 },
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Right side - Hamburger Menu + HeaderControls + Create */}
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
{/* Header Controls (alerts + user) */}
|
||||
<HeaderControls colorMode="light" showAlerts={true} showUser={true} />
|
||||
<SecondaryButton
|
||||
onClick={() => window.open("/docs", "_blank")}
|
||||
startIcon={<InfoIcon />}
|
||||
|
||||
{/* Hamburger Menu Button */}
|
||||
<IconButton
|
||||
onClick={handleMenuOpen}
|
||||
sx={{
|
||||
display: { xs: "none", lg: "flex" },
|
||||
borderColor: "rgba(102, 126, 234, 0.3) !important",
|
||||
color: "#667eea !important",
|
||||
background: isMenuOpen
|
||||
? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
||||
: "rgba(102, 126, 234, 0.1)",
|
||||
border: "1px solid",
|
||||
borderColor: isMenuOpen ? "transparent" : "rgba(102, 126, 234, 0.3)",
|
||||
borderRadius: 2,
|
||||
p: 1,
|
||||
transition: "all 0.2s ease",
|
||||
"&:hover": {
|
||||
borderColor: "rgba(102, 126, 234, 0.5) !important",
|
||||
background: "rgba(102, 126, 234, 0.1) !important",
|
||||
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
||||
borderColor: "transparent",
|
||||
transform: "scale(1.05)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Help
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
onClick={() => navigate("/asset-library?source_module=podcast_maker&asset_type=audio")}
|
||||
startIcon={<LibraryMusicIcon />}
|
||||
tooltip="View all podcast episodes in Asset Library"
|
||||
sx={{
|
||||
display: { xs: "none", xl: "flex" },
|
||||
borderColor: "rgba(102, 126, 234, 0.3) !important",
|
||||
color: "#667eea !important",
|
||||
"&:hover": {
|
||||
borderColor: "rgba(102, 126, 234, 0.5) !important",
|
||||
background: "rgba(102, 126, 234, 0.1) !important",
|
||||
{isMenuOpen ? (
|
||||
<CloseIcon sx={{ color: "#fff", fontSize: 20 }} />
|
||||
) : (
|
||||
<MenuIcon sx={{ color: "#667eea", fontSize: 20 }} />
|
||||
)}
|
||||
</IconButton>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={isMenuOpen}
|
||||
onClose={handleMenuClose}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
mt: 1,
|
||||
minWidth: 220,
|
||||
borderRadius: 2,
|
||||
background: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
|
||||
border: "1px solid rgba(102, 126, 234, 0.3)",
|
||||
boxShadow: "0 10px 40px rgba(102, 126, 234, 0.25)",
|
||||
"& .MuiMenuItem-root": {
|
||||
color: "rgba(255, 255, 255, 0.85)",
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
transition: "all 0.15s ease",
|
||||
"&:hover": {
|
||||
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%)",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
"& .MuiListItemIcon-root": {
|
||||
color: "#a78bfa",
|
||||
minWidth: 36,
|
||||
},
|
||||
"& .MuiDivider-root": {
|
||||
borderColor: "rgba(102, 126, 234, 0.2)",
|
||||
my: 0.5,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
My Episodes
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
onClick={onShowProjects}
|
||||
startIcon={<MicIcon />}
|
||||
tooltip="View and resume saved projects"
|
||||
sx={{
|
||||
flexShrink: 0,
|
||||
display: "flex !important",
|
||||
borderColor: "rgba(102, 126, 234, 0.3) !important",
|
||||
color: "#667eea !important",
|
||||
"&:hover": {
|
||||
borderColor: "rgba(102, 126, 234, 0.5) !important",
|
||||
background: "rgba(102, 126, 234, 0.1) !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
My Projects
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={onNewEpisode}
|
||||
startIcon={<AutoAwesomeIcon />}
|
||||
sx={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
New Episode
|
||||
</PrimaryButton>
|
||||
<MenuItem onClick={handleNewEpisode}>
|
||||
<ListItemIcon>
|
||||
<AddIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="New Episode"
|
||||
primaryTypographyProps={{ fontWeight: 600 }}
|
||||
/>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem onClick={handleMyProjects}>
|
||||
<ListItemIcon>
|
||||
<FolderIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="My Projects"
|
||||
primaryTypographyProps={{ fontWeight: 500 }}
|
||||
/>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem onClick={handleMyEpisodes}>
|
||||
<ListItemIcon>
|
||||
<LibraryMusicIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="My Episodes"
|
||||
primaryTypographyProps={{ fontWeight: 500 }}
|
||||
/>
|
||||
</MenuItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<MenuItem onClick={handleHelp}>
|
||||
<ListItemIcon>
|
||||
<HelpIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Help & Docs"
|
||||
primaryTypographyProps={{ fontWeight: 500 }}
|
||||
/>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user