This repository has been archived by the owner on Dec 13, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Frontend navbar finished maybe? (#111)
- Loading branch information
1 parent
d84ce58
commit 0390054
Showing
8 changed files
with
134 additions
and
71 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
|
|
||
| const Friends = () => ( | ||
| <div> | ||
| <h1>Friends Page</h1> | ||
| <p>Welcome to the Friends Page!</p> | ||
| </div> | ||
| ); | ||
|
|
||
| export default Friends; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
|
|
||
| const Inventory = () => ( | ||
| <div> | ||
| <h1>Inventory Page</h1> | ||
| <p>Welcome to the Inventory Page!</p> | ||
| </div> | ||
| ); | ||
|
|
||
| export default Inventory; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,81 @@ | ||
| import React, { useState } from "react"; | ||
| import {BrowserRouter as Router, Link, Route, Routes} from "react-router-dom"; | ||
| import Inventory from '../Inventory.tsx'; | ||
| import Settings from '../Settings.tsx'; | ||
| import Friends from '../Friends.tsx'; | ||
| import PetPage from '../PetPage.tsx'; | ||
| import { useAuth } from "react-oidc-context"; | ||
| import './navbar.css'; | ||
|
|
||
| const Navbar = () =>{ | ||
| 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 | ||
| color: '#fff', | ||
| backgroundColor: '#006400', | ||
| fontWeight: 'bold', | ||
| }; | ||
|
|
||
| const navbarItemStyles = { | ||
| marginRight: '20px', // Adjust the margin between navbar items | ||
| marginRight: '20px', | ||
| }; | ||
|
|
||
| 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> | ||
| <Router> | ||
| <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 className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}> | ||
| <ul className="navbar-nav"> | ||
| {auth.isAuthenticated ? ( | ||
| <> | ||
| <li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}> | ||
| <Link className="nav-link" to="/PetPage" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</Link> | ||
| </li> | ||
| <li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}> | ||
| <Link className="nav-link" to="/inventory" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</Link> | ||
| </li> | ||
| <li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}> | ||
| <Link className="nav-link" to="/Friends" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</Link> | ||
| </li> | ||
| <li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}> | ||
| <Link className="nav-link" to="/Settings" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</Link> | ||
| </li> | ||
| <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> | ||
| </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> | ||
| </nav> | ||
| <Routes> | ||
| <Route path="/inventory" element={<Inventory />} /> | ||
| <Route path="/Settings" element={<Settings />} /> | ||
| <Route path="/Friends" element={<Friends />} /> | ||
| <Route path="/PetPage" element={<PetPage />} /> | ||
| </Routes> | ||
| </Router> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| <<<<<<< HEAD | ||
| export default Navbar; | ||
| ======= | ||
| export default Navbar | ||
| >>>>>>> d84ce58873962e255ae93e1ec5fcd937a2e765f9 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
|
|
||
| const PetPage = () => ( | ||
| <div> | ||
| <h1>Pet Page</h1> | ||
| <p>Welcome to the Pet Page!</p> | ||
| </div> | ||
| ); | ||
|
|
||
| export default PetPage; |
Empty file.