112 lines
4.0 KiB
TypeScript
112 lines
4.0 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import {
|
|
AppBar,
|
|
Box,
|
|
Container,
|
|
IconButton,
|
|
Toolbar,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import Link from 'next/link';
|
|
import { styled } from '@mui/material/styles';
|
|
import { useThemeContext } from '@/src/context/ThemeContext';
|
|
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
|
import LightModeIcon from '@mui/icons-material/LightMode';
|
|
|
|
// Styled components
|
|
const StyledAppBar = styled(AppBar)(({ theme }) => ({
|
|
background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
|
|
}));
|
|
|
|
const StyledAppBarLight = styled(AppBar)(({ theme }) => ({
|
|
background: 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%)',
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
|
|
borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
|
|
}));
|
|
|
|
const LogoText = styled(Typography)(({ theme }) => ({
|
|
fontSize: '1.5rem',
|
|
fontWeight: 800,
|
|
background: theme.palette.mode === 'dark'
|
|
? 'linear-gradient(135deg, #dee2e6 0%, #cccccc 100%)'
|
|
: 'linear-gradient(135deg, #1a1a2e 0%, #333333 100%)',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
|
|
letterSpacing: '-0.5px',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
transform: 'scale(1.05)',
|
|
transition: 'transform 0.2s ease',
|
|
},
|
|
}));
|
|
|
|
const ThemeToggle = styled(IconButton)(({ theme }) => ({
|
|
color: 'inherit',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
},
|
|
}));
|
|
|
|
const ThemeToggleLight = styled(IconButton)(({ theme }) => ({
|
|
color: 'inherit',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
|
},
|
|
}));
|
|
|
|
const LogoLink = styled(Link)({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
textDecoration: 'none',
|
|
color: 'inherit',
|
|
});
|
|
|
|
export default function AppShell({ children }: { children: React.ReactNode }) {
|
|
const { mode, toggleTheme } = useThemeContext();
|
|
const isDark = mode === 'dark';
|
|
|
|
return (
|
|
<Box sx={{ minHeight: '100vh' }}>
|
|
{isDark ? (
|
|
<StyledAppBar position="sticky">
|
|
<Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
|
|
<Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
|
|
<LogoLink href="/">
|
|
<img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} />
|
|
<LogoText variant="h6">
|
|
Wiki
|
|
</LogoText>
|
|
</LogoLink>
|
|
<ThemeToggle onClick={toggleTheme} size="large">
|
|
<LightModeIcon />
|
|
</ThemeToggle>
|
|
</Toolbar>
|
|
</Container>
|
|
</StyledAppBar>
|
|
) : (
|
|
<StyledAppBarLight position="sticky">
|
|
<Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
|
|
<Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
|
|
<LogoLink href="/">
|
|
<img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} />
|
|
<LogoText variant="h6">
|
|
Wiki
|
|
</LogoText>
|
|
</LogoLink>
|
|
<ThemeToggleLight onClick={toggleTheme} size="large">
|
|
<DarkModeIcon sx={{ color: '#000000' }} />
|
|
</ThemeToggleLight>
|
|
</Toolbar>
|
|
</Container>
|
|
</StyledAppBarLight>
|
|
)}
|
|
<Container maxWidth="lg" sx={{ py: 4, px: { xs: 1, sm: 3, md: 3 } }}>
|
|
{children}
|
|
</Container>
|
|
</Box>
|
|
);
|
|
} |