github.com/grafviktor/keep-my-secret@v0.9.10-0.20230908165355-19f35cce90e5/website/src/components/Navigation/index.jsx (about)

     1  import {useContext} from 'react'
     2  import Logo from '../Logo'
     3  import ApplicationContext from '../../context'
     4  
     5  export default ({loggedIn}) => {
     6    const {setAccessToken, api} = useContext(ApplicationContext)
     7  
     8    const logout = async () => {
     9      try {
    10        await api.logout()
    11        setAccessToken('')
    12      } catch (error) {
    13        console.warn(error)
    14      }
    15  
    16      // navigateTo('login')
    17    }
    18  
    19    return (
    20      <nav className="navbar navbar-expand-lg navbar-light bg-light">
    21        <div className="container-fluid">
    22          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    23            <span className="navbar-toggler-icon" />
    24          </button>
    25          <div className="collapse navbar-collapse" id="navbarSupportedContent">
    26            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
    27              <li className="nav-item">
    28                <Logo width="38" height="38" />
    29              </li>
    30  
    31              <li className="nav-item">
    32                <a className="nav-link active" aria-current="page" href="/">
    33                  Keep My Secret
    34                </a>
    35              </li>
    36            </ul>
    37            {loggedIn
    38              && (
    39              <div className="d-flex">
    40                <button className="btn btn-danger" type="button" onClick={logout}>Logout</button>
    41              </div>
    42              )}
    43          </div>
    44        </div>
    45      </nav>
    46    )
    47  }