frontend: add navbar

frontend/src/App.tsx

@@ -1,21 +1,52 @@
-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 React, { 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';
 
 function App() {
+  const [isNavOpen, setIsNavOpen] = useState(false);
+
+  const toggleNav = () => {
+    setIsNavOpen(!isNavOpen);
+  };
+
   return (
     <>
       <Snowflakes />
-      <InitialSetup/>
-      <Greeting/>
-      <br/>
-      <Hosting/>
-      <Program/>
+      <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>
+        </ul>
+      </nav>
+
+      <div id="greeting">
+        <Greeting />
+      </div>
+      <div id="hosting">
+        <Hosting />
+      </div>
+      <div id="program">
+        <Program />
+      </div>
     </>
-  )
+  );
 }
 
-export default App
+export default App;