From fb78791be7c54bb7a7a6acb2c8322fbc60dbfccd Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Wed, 22 Nov 2023 11:58:57 -0500
Subject: [PATCH] Hide transactions button if not logged in

---
 web/src/layouts/NavbarLayout/NavbarLayout.tsx | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/web/src/layouts/NavbarLayout/NavbarLayout.tsx b/web/src/layouts/NavbarLayout/NavbarLayout.tsx
index a2c8a03..1d1f0a7 100644
--- a/web/src/layouts/NavbarLayout/NavbarLayout.tsx
+++ b/web/src/layouts/NavbarLayout/NavbarLayout.tsx
@@ -17,7 +17,7 @@ type NavBarLayoutProps = {
 }
 
 const NavBarLayout = ({ children }: NavBarLayoutProps) => {
-  const { hasRole } = useAuth()
+  const { hasRole, isAuthenticated } = useAuth()
   const [basket] = useState(getBasket())
 
   return (
@@ -40,14 +40,18 @@ const NavBarLayout = ({ children }: NavBarLayoutProps) => {
         </div>
         <div className="ml-auto justify-end space-x-3">
           <ul className="relative hidden items-center space-x-3 lg:flex">
-            <li>
-              <Link
-                to={routes.userTransactions()}
-                className="btn btn-ghost font-inter hover:shadow-lg"
-              >
-                Transactions
-              </Link>
-            </li>
+            {isAuthenticated ? (
+              <li>
+                <Link
+                  to={routes.userTransactions()}
+                  className="btn btn-ghost font-inter hover:shadow-lg"
+                >
+                  Transactions
+                </Link>
+              </li>
+            ) : (
+              <></>
+            )}
           </ul>
           <ThemeToggle />
           <Link
@@ -114,14 +118,18 @@ const NavBarLayout = ({ children }: NavBarLayoutProps) => {
                     <p className="font-inter text-base">Basket</p>
                   </Link>
                 </li>
-                <li>
-                  <Link
-                    to={routes.userTransactions()}
-                    className="btn btn-ghost w-full hover:shadow-lg"
-                  >
-                    <p className="font-inter text-base">Transactions</p>
-                  </Link>
-                </li>
+                {isAuthenticated ? (
+                  <li>
+                    <Link
+                      to={routes.userTransactions()}
+                      className="btn btn-ghost w-full hover:shadow-lg"
+                    >
+                      <p className="font-inter text-base">Transactions</p>
+                    </Link>
+                  </li>
+                ) : (
+                  <></>
+                )}
               </ul>
             </div>
           </div>