90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { useState } from 'react';
|
||
import './App.css';
|
||
import Greeting from './components/Greeting';
|
||
import Hosting from './components/Hosting';
|
||
import InitialSetup from './components/InitialSetup';
|
||
import Program from './components/Program';
|
||
import Snowflakes from './components/Snowflakes';
|
||
import { FullScreenLoading } from './components/Loading';
|
||
import SecretSanta from './components/SecretSanta';
|
||
import Suggestions from './components/Suggestions';
|
||
import AttendanceTable from './components/AttendnaceTable';
|
||
|
||
function App() {
|
||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||
|
||
const handleLogout = () => {
|
||
const cookies = document.cookie.split(";");
|
||
|
||
for (let cookie of cookies) {
|
||
const cookieName = cookie.split("=")[0].trim();
|
||
// Set the cookie's expiration date to the past to delete it
|
||
document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;`;
|
||
}
|
||
window.location.reload();
|
||
};
|
||
|
||
const toggleNav = () => {
|
||
setIsNavOpen(!isNavOpen);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<FullScreenLoading />
|
||
<Snowflakes />
|
||
<InitialSetup />
|
||
|
||
<button onClick={toggleNav} className="nav-toggle">
|
||
{isNavOpen ? '❌' : 'Меню 📂'}
|
||
</button>
|
||
|
||
<nav className={isNavOpen ? 'open' : ''}>
|
||
<ul>
|
||
<li>
|
||
<a href="#greeting">Приглашение</a>
|
||
</li>
|
||
<li>
|
||
<a href="#hosting">Поселение</a>
|
||
</li>
|
||
<li>
|
||
<a href="#program">Программа</a>
|
||
</li>
|
||
<li>
|
||
<a href="#suggestions">Пожелания</a>
|
||
</li>
|
||
<li>
|
||
<a href="#santa">Secret Santa</a>
|
||
</li>
|
||
<li>
|
||
<a href="#attendance-table">Кто празднует?</a>
|
||
</li>
|
||
<li>
|
||
<button onClick={() => handleLogout()}>Выйти</button>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div id="greeting">
|
||
<Greeting />
|
||
</div>
|
||
<div id="hosting">
|
||
<Hosting />
|
||
</div>
|
||
<div id="program">
|
||
<Program />
|
||
</div>
|
||
<div id="suggestions">
|
||
<Suggestions />
|
||
</div>
|
||
<div id="santa">
|
||
<SecretSanta />
|
||
</div>
|
||
<div id="attendance-table">
|
||
<AttendanceTable />
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default App;
|