From 911f5f06b891b3e9865432b5a9cbb6b40ba3c138 Mon Sep 17 00:00:00 2001
From: Kirill Ivlev <kirill@ngweb.io>
Date: Wed, 18 Dec 2024 23:32:42 +0400
Subject: [PATCH] vocabularies

---
 src/App.tsx                       | 2 ++
 src/components/NoVocabularies.tsx | 4 +++-
 src/components/UI/HeaderMenu.tsx  | 9 +++++++--
 src/routes/AddNewVocabulary.tsx   | 8 ++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/AddNewVocabulary.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5bcc9e4..e9de3b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import Home from "./routes/Home.tsx";
 import {LoginPage} from "./routes/LoginPage.tsx";
 import {PrivateRoute} from "./components/PrivateRoute.tsx";
 import {NotFound} from "./routes/NotFound.tsx";
+import AddNewVocabulary from "./routes/AddNewVocabulary.tsx";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
         <Routes>
           <Route path="/" element={<PrivateRoute><Home/></PrivateRoute>} />
           <Route path="/login" element={<LoginPage />} />
+          <Route path="/vocabulary/add" element={<PrivateRoute><AddNewVocabulary/></PrivateRoute> } />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </div>
diff --git a/src/components/NoVocabularies.tsx b/src/components/NoVocabularies.tsx
index 4a09deb..6a799b7 100644
--- a/src/components/NoVocabularies.tsx
+++ b/src/components/NoVocabularies.tsx
@@ -1,8 +1,10 @@
+import {Link} from "react-router-dom";
+
 export const NoVocabularies = () => {
   return <>
     <h1 className={"text-2xl"}>
       Oh, no!
     </h1>
-    <p>Looks like you don't have any vocabularies in you account. Add a new one?</p>
+    <p>Looks like you don't have any vocabularies in you account. <Link to={"/vocabulary/add"} className={"underline"}>Add a new one?</Link></p>
   </>
 }
diff --git a/src/components/UI/HeaderMenu.tsx b/src/components/UI/HeaderMenu.tsx
index 70300b4..70a7d8b 100644
--- a/src/components/UI/HeaderMenu.tsx
+++ b/src/components/UI/HeaderMenu.tsx
@@ -1,5 +1,5 @@
 import {useAuth} from "../../context/AuthContext.tsx";
-import {useNavigate} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import mainLogo from "../../assets/logo.png";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faSignOut} from "@fortawesome/free-solid-svg-icons";
@@ -7,6 +7,9 @@ import {faSignOut} from "@fortawesome/free-solid-svg-icons";
 const HeaderMenu = () => {
     const auth = useAuth()
     const navigate = useNavigate();
+    const menuItems = [
+        { path: '/', title: 'Home'}
+    ]
     function logout() {
         auth.logout()
         navigate('/');
@@ -20,7 +23,9 @@ const HeaderMenu = () => {
 
             </div>
             <div className={"grow hidden lg:flex items-center sm:hidden md:hidden"}>
-                <p>Menu will be placed here</p>
+                { menuItems.map(item => (
+                  <Link key={item.path} to={item.path} className={"hover:text-gray-500 p-1 rounded"}>{ item.title}</Link>
+                ))}
             </div>
             <div>
                 <a onClick={logout} className={"cursor-pointer no-underline"}><FontAwesomeIcon icon={ faSignOut }/></a>
diff --git a/src/routes/AddNewVocabulary.tsx b/src/routes/AddNewVocabulary.tsx
new file mode 100644
index 0000000..197e2ac
--- /dev/null
+++ b/src/routes/AddNewVocabulary.tsx
@@ -0,0 +1,8 @@
+import HeaderMenu from "../components/UI/HeaderMenu.tsx";
+
+const AddNewVocabulary = () => {
+  return <><HeaderMenu />
+  </>
+}
+
+export default AddNewVocabulary;
\ No newline at end of file