summaryrefslogtreecommitdiff
path: root/src/components/navbar.tsx
blob: 4078405899c9956d6c376d043ba72b829db3c2be (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { CartFill } from "react-bootstrap-icons";
import "./stylesheets/navbar.css";
import "./stylesheets/shared.css";
import MainPageDropdownMenu from "./main_page_dropdown_menu";
import Token from "../lib/token";

export default function Navbar() {
  const session = new Token();
  let cart;

  if (session.present()) {
    cart = (
      <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
          href="/account/cart">
        <span className="[&>svg]:w-5">
          <CartFill color="#394490" size={32}/>
        </span>
      </a>
    );  
  }
  else {
    cart = null;
  }

  return(
    <>
      <header>
          <nav className="navbar inset-x-0 top-0 bg-white shadow-2 items-center justify-between bg-neutral-100 py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
               data-te-navbar-ref>
            <div className="flex w-full flex-wrap items-center justify-between px-3">
              {/* Lado izquierdo */}
              <div className="flex-grow basis-[100%] items-center lg:!flex lg:basis-auto">
                <img className="logo" src="https://www.grupoarma.com.mx/imagen/logo.png"/>

                <ul className="list-style-none mr-auto flex flex-col pl-0 lg:flex-row">
                  <li className="mb-4 lg:mb-0 lg:pr-2">
                    <a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
                       href="/products">
                      Productos
                    </a>
                  </li>

                  <li className="mb-4 lg:mb-0 lg:pr-2">
                    <a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
                       href="/companies">
                      Proveedores
                    </a>
                  </li>
                </ul>
              </div>

              { /* Lado derecho */}
              <div className="flex items-center">

                {cart}

                <MainPageDropdownMenu/>
              </div>
            </div>
          </nav>
      </header>
    </>
  );
}