Navbar Update

src/app/(app)/posts/page.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-
+import { useDevice } from "@/lib/context/DeviceContext";
-// HELP NOT WORKING -> import { useDevice } from "@/lib/context/DeviceContext"; USERNAME!!
-const useDevice = () => ({
-    isAuthenticated: true,
-    session: { username: "demo_user" },
- });
-
 
 import React, { useEffect, useState } from "react";
 

src/app/(app)/profile/page.tsx

@@ -98,9 +98,6 @@ function Mobile() {
 					Don't forget you have a 400mg caffeine limit and 30.5g sugar limit!
 				</p>
 			</div>
-
-			<div className="h-6" />
-			<div className="h-6" />
 		</div>
 	);
 }

src/lib/components/MobileNav.jsx

@@ -6,6 +6,7 @@ import {
     Home as IconHome,
     BookText as BookImage,
     User as UserImage,
+    Plus as PlusImage,
 } from "lucide-react";
 
 import { useDevice } from "@/lib/context/DeviceContext";
@@ -23,9 +24,14 @@ const MobileNav = () => {
                     <BookImage />
                 </Navigation.Tile>
                 {isAuthenticated ? (
+                    <div>
+                        <Navigation.Tile label="Profile" href="/posts" className="flex flex-col items-center">
+                            <PlusImage />
+                        </Navigation.Tile>
                         <Navigation.Tile label="Profile" href="/profile" className="flex flex-col items-center">
                                 <UserImage />
                         </Navigation.Tile>
+                    </div>
                 ) : null}
             </Navigation.Bar>
         </div>