Frontend navbar (#98)

smartuni · Jun 3, 2024 · ad05ae8 · ad05ae8
1 parent a361bb5
commit ad05ae8
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 5 deletions.
diff --git a/docs/src/content/docs/node/component_diagram.drawio.png:Zone.Identifier b/docs/src/content/docs/node/component_diagram.drawio.png:Zone.Identifier
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -4,6 +4,7 @@
 
 #root {
     display: flex;
+    flex-grow: 1;
     flex-direction: column;
     min-height: 100vh;
 }

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import './App.css'
 import LinkDevice from './Components/LinkDevice'
 import Footer from './Components/Footer';
+import Navbar from './Components/Navbar/Navbar'
 
 function App() {
   const auth = useAuth();
@@ -27,14 +28,30 @@ function App() {
 
   if (auth.isAuthenticated) {
     return (
-      <div>
+      <div style={{ backgroundColor: '#F5F5DC'}}>
         <div>
-          <h1 className='font-extrabold text-9xl'>
-            Click <a href="./docs">HERE</a> for Docs!
+        <div><Navbar /> </div>
+        <h1 >WELCOME TO TEAMAGOCHI GANG</h1>
+          <h1 className='font-extrabold text-9xl' >
+             <a href="https://www.youtube.com/watch?v=sf0PJsknZiM">CARTI </a>
           </h1>
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />  
+
+
+
 
         </div>
-        <h1>Frontend Demo Page</h1>
         <div className="card">
           <button onClick={() => setCount((count) => count + 1)}>
             count is {count}[]
@@ -49,7 +66,11 @@ function App() {
     );
   }
 
-  return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
+  return (
+    <div>
+      <Navbar /> 
+    </div>
+  ) 
 }
 
 export default App;
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { useAuth } from "react-oidc-context";
+import './navbar.css';
+
+const Navbar = () =>{
+    const auth = useAuth();
+    const [activePage, setActivePage] = useState("Pet Page");
+
+    const loginButtonStyles = {
+        color: '#fff',             // White text color
+        backgroundColor: '#006400', 
+        fontWeight: 'bold',        // Bold font weight
+        // Add any other custom styles as needed
+    };
+
+    const navbarItemStyles = {
+        marginRight: '20px', // Adjust the margin between navbar items
+    };
+
+    const handlePageClick = (page) => {
+        setActivePage(page);
+    };
+
+
+    return (
+
+<div>    
+    <nav className="navbar navbar-expand-lg navbar-dark bg-success">
+    <img src={"./android-chrome-192x192.png"} alt="Logo" style={{ width: '30px', height: '30px', marginLeft: '5px' }} />        
+    <a className="navbar-brand" href="#"> TEAMAGOCHI</a>
+    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon"></span>
+    </button>
+
+    <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}>
+        <ul className="navbar-nav ">
+        <li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}>
+            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</a>
+        </li>
+        <li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}>
+            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</a>
+        </li>
+        <li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}>
+            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</a>
+        </li>
+        <li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}>
+            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</a>
+        </li>
+        {/* <li className="nav-item dropdown" style={navbarItemStyles}>
+            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={navbarItemStyles}>
+            Settings
+            </a>
+            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a className="dropdown-item" href="#">Action</a>
+            <a className="dropdown-item" href="#">Another action</a>
+            <div className="dropdown-divider"></div>
+            <a className="dropdown-item" href="#">Something else here</a>
+            </div>
+        </li> */}
+        {auth.isAuthenticated ? (
+        <li className="navbar-item">
+            <button className="nav-link" onClick={() => auth.removeUser()} style={loginButtonStyles}>Log out</button>
+        </li>
+        ) : (
+        <li className="navbar-item">
+            <a className="nav-link" href="#" onClick={() => auth.signinRedirect()} style={loginButtonStyles}>Log in</a>
+        </li>
+        )}
+
+        </ul>
+    </div>
+    </nav>
+</div>
+    )
+}
+
+export default Navbar
diff --git a/frontend/src/Components/Navbar/navbar.css b/frontend/src/Components/Navbar/navbar.css
@@ -0,0 +1,4 @@
+.navbar-nav .nav-item.active .nav-link {
+    color: #ffffff; /* Change to the desired color */
+    text-shadow: 0 0 10px #ffffff;
+}