89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import { ReactComponent as BarChart } from "bootstrap-icons/icons/bar-chart.svg";
|
|
import { ReactComponent as CardList } from "bootstrap-icons/icons/card-list.svg";
|
|
import { ReactComponent as House } from "bootstrap-icons/icons/house.svg";
|
|
import { ReactComponent as PeopleIcon } from "bootstrap-icons/icons/people.svg";
|
|
import React from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
|
|
import { ReactComponent as Logo } from "../assets/brick.svg";
|
|
import styles from "./Header.module.css";
|
|
|
|
const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;
|
|
|
|
const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-link active" : "nav-link");
|
|
|
|
export const Header: React.FC = () => {
|
|
return (
|
|
<header>
|
|
<nav className="navbar navbar-dark bg-dark navbar-expand-md">
|
|
<NavLink to="/" className="navbar-brand">
|
|
<span className={styles.logo}>
|
|
<Logo />
|
|
</span>
|
|
Biceps Bar System - BBS
|
|
</NavLink>
|
|
<button
|
|
className="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span className="navbar-toggler-icon" />
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarNav">
|
|
<ul className="navbar-nav">
|
|
<li className="nav-item">
|
|
<NavLink to="/" className={navLinkStyles} end>
|
|
<span className={styles.navIcon}>
|
|
<House />
|
|
</span>{" "}
|
|
Kjøp drikke
|
|
</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink to="/deposit" className={navLinkStyles}>
|
|
Sett inn penger
|
|
</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink to="/log" className={navLinkStyles}>
|
|
<span className={styles.navIcon}>
|
|
<CardList />
|
|
</span>{" "}
|
|
Logg
|
|
</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink to="/stats" className={navLinkStyles}>
|
|
<span className={styles.navIcon}>
|
|
<BarChart />
|
|
</span>{" "}
|
|
Statistikk
|
|
</NavLink>
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
<NavLink to="/users" className={navLinkStyles}>
|
|
<span className={styles.navIcon}>
|
|
<PeopleIcon />
|
|
</span>{" "}
|
|
Folk
|
|
</NavLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<ul className="navbar-nav">
|
|
<li className="nav-item">
|
|
<a href={ADMIN_URL} className="nav-link">
|
|
Admin
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
};
|