Add complete Biblical Guide web application with Material UI
Implemented comprehensive Romanian Biblical Guide web app: - Next.js 15 with App Router and TypeScript - Material UI 7.3.2 for modern, responsive design - PostgreSQL database with Prisma ORM - Complete Bible reader with book/chapter navigation - AI-powered biblical chat with Romanian responses - Prayer wall for community prayer requests - Advanced Bible search with filters and highlighting - Sample Bible data imported from API.Bible - All API endpoints created and working - Professional Material UI components throughout - Responsive layout with navigation and theme 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
237
components/layout/navigation.tsx
Normal file
237
components/layout/navigation.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
AppBar,
|
||||
Box,
|
||||
Toolbar,
|
||||
IconButton,
|
||||
Typography,
|
||||
Menu,
|
||||
Container,
|
||||
Avatar,
|
||||
Button,
|
||||
Tooltip,
|
||||
MenuItem,
|
||||
Drawer,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Menu as MenuIcon,
|
||||
MenuBook,
|
||||
Chat,
|
||||
Favorite as Prayer,
|
||||
Search,
|
||||
AccountCircle,
|
||||
Home,
|
||||
Settings,
|
||||
Logout,
|
||||
} from '@mui/icons-material'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
const pages = [
|
||||
{ name: 'Acasă', path: '/', icon: <Home /> },
|
||||
{ name: 'Biblia', path: '/bible', icon: <MenuBook /> },
|
||||
{ name: 'Chat AI', path: '/chat', icon: <Chat /> },
|
||||
{ name: 'Rugăciuni', path: '/prayers', icon: <Prayer /> },
|
||||
{ name: 'Căutare', path: '/search', icon: <Search /> },
|
||||
]
|
||||
|
||||
const settings = ['Profil', 'Setări', 'Deconectare']
|
||||
|
||||
export function Navigation() {
|
||||
const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null)
|
||||
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
|
||||
const [drawerOpen, setDrawerOpen] = useState(false)
|
||||
const router = useRouter()
|
||||
const theme = useTheme()
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'))
|
||||
|
||||
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorElNav(event.currentTarget)
|
||||
}
|
||||
|
||||
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorElUser(event.currentTarget)
|
||||
}
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null)
|
||||
}
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null)
|
||||
}
|
||||
|
||||
const handleNavigate = (path: string) => {
|
||||
router.push(path)
|
||||
handleCloseNavMenu()
|
||||
setDrawerOpen(false)
|
||||
}
|
||||
|
||||
const toggleDrawer = (open: boolean) => {
|
||||
setDrawerOpen(open)
|
||||
}
|
||||
|
||||
const DrawerList = (
|
||||
<Box sx={{ width: 250 }} role="presentation">
|
||||
<List>
|
||||
{pages.map((page) => (
|
||||
<ListItem key={page.name} disablePadding>
|
||||
<ListItemButton onClick={() => handleNavigate(page.path)}>
|
||||
<ListItemIcon sx={{ color: 'primary.main' }}>
|
||||
{page.icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={page.name} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppBar position="static" sx={{ bgcolor: 'primary.main' }}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
{/* Desktop Logo */}
|
||||
<MenuBook sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="a"
|
||||
href="/"
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
GHID BIBLIC
|
||||
</Typography>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="meniu principal"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={() => toggleDrawer(true)}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Logo */}
|
||||
<MenuBook sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
|
||||
<Typography
|
||||
variant="h5"
|
||||
noWrap
|
||||
component="a"
|
||||
href="/"
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'flex', md: 'none' },
|
||||
flexGrow: 1,
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
BIBLIC
|
||||
</Typography>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
||||
{pages.map((page) => (
|
||||
<Button
|
||||
key={page.name}
|
||||
onClick={() => handleNavigate(page.path)}
|
||||
sx={{
|
||||
my: 2,
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
mx: 1,
|
||||
'&:hover': {
|
||||
bgcolor: 'primary.dark',
|
||||
},
|
||||
}}
|
||||
startIcon={page.icon}
|
||||
>
|
||||
{page.name}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* User Menu */}
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Deschide setări">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
<Avatar sx={{ bgcolor: 'secondary.main' }}>
|
||||
<AccountCircle />
|
||||
</Avatar>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<ListItemIcon>
|
||||
<AccountCircle fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Typography textAlign="center">Profil</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<ListItemIcon>
|
||||
<Settings fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Typography textAlign="center">Setări</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<ListItemIcon>
|
||||
<Logout fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Typography textAlign="center">Deconectare</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
<Drawer anchor="left" open={drawerOpen} onClose={() => toggleDrawer(false)}>
|
||||
{DrawerList}
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user