vocabularies

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>

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>
   </>
 }

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>

src/routes/AddNewVocabulary.tsx

@@ -0,0 +1,8 @@
+import HeaderMenu from "../components/UI/HeaderMenu.tsx";
+
+const AddNewVocabulary = () => {
+  return <><HeaderMenu />
+  </>
+}
+
+export default AddNewVocabulary;