web/components/NavBar/NavBAr.jsx

"use client";

import React, { useContext, useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import Image from "next/image";
import logo from "@img/logo.png";
import setting from "@img/setting.png";
import AppContext from "@ctx/AppContext";
import HasPermission from "plugins/HasPermission/page";
import { Link } from "src/i18n/routing";

const NavBAr = (props) => {
  const usePath = usePathname();
  const CTX = useContext(AppContext);
  const notifUnreadData = CTX.state.notifUnreadData;

  const [profileFill, setProfileFill] = useState(false);
  const permissions = CTX.state.profile?.permissions;

  const openBigPlus = () => {
    setTimeout(() => {
      CTX.setBigPlusRotateIcon(true);
    }, 500);
    CTX.setBigPlusOpen(true);
  };

  useEffect(() => {
    setTimeout(() => {
      setProfileFill(true);
    }, 300);
  }, [permissions]);

  return (
    <div className=" bg-body-100 h-10 z-90 w-full fixed bottom-0">
      <div
        className={`fixed   w-full z-[110] tr03 ${
          profileFill ? "bottom-0" : "bottom-[-300px]"
        } `}
      >
        {/* <div className="w-[100px] text-left  overflow-hidden">
        <Image src={divide} alt="" className=" " />
      </div> */}

        <div className="bg-gray-100 rounded-t-3xl shadow py-3 flex  ">
          {HasPermission("ViewDashboard", permissions) && (
            <Link href={"/app/home"} className="w-full !no-underline">
              <>
                {usePath.includes("/home") ? (
                  <div className="flex justify-center  w-full">
                    <svg
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M11 14L15 20H21L12 4L3 20H9L13 14"
                        stroke="black"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="flex justify-center opacity-20 w-full">
                    <svg
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M11 14L15 20H21L12 4L3 20H9L13 14"
                        stroke="black"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                )}
              </>
            </Link>
          )}
          {HasPermission("ViewShiftPlans", permissions) && (
            <Link href={"/app/shifts"} className="w-full !no-underline">
              <>
                {usePath.includes("/shifts") ? (
                  <div className="flex justify-center  w-full">
                    <svg
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M20.984 12.53C21.0938 10.6693 20.6232 8.82034 19.6371 7.23856C18.6511 5.65678 17.1982 4.42018 15.4792 3.69954C13.7601 2.9789 11.8598 2.80978 10.0405 3.21554C8.22123 3.62129 6.57282 4.5819 5.32292 5.9647C4.07303 7.3475 3.28331 9.08426 3.06283 10.9351C2.84235 12.786 3.20198 14.6597 4.09207 16.2974C4.98216 17.9351 6.35878 19.2561 8.03183 20.0779C9.70487 20.8996 11.5918 21.1817 13.432 20.885"
                        stroke="black"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12 7V12L15 15M19 16L17 19H21L19 22"
                        stroke="black"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="flex justify-center   opacity-20 w-full">
                    <svg
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M20.984 12.53C21.0938 10.6693 20.6232 8.82034 19.6371 7.23856C18.6511 5.65678 17.1982 4.42018 15.4792 3.69954C13.7601 2.9789 11.8598 2.80978 10.0405 3.21554C8.22123 3.62129 6.57282 4.5819 5.32292 5.9647C4.07303 7.3475 3.28331 9.08426 3.06283 10.9351C2.84235 12.786 3.20198 14.6597 4.09207 16.2974C4.98216 17.9351 6.35878 19.2561 8.03183 20.0779C9.70487 20.8996 11.5918 21.1817 13.432 20.885"
                        stroke="black"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12 7V12L15 15M19 16L17 19H21L19 22"
                        stroke="black"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                )}
              </>
            </Link>
          )}

          {HasPermission("ViewComplexSettings", permissions) && (
            <Link href={"/app/employees"} className="w-full !no-underline ">
              <>
                {usePath.includes("/employees") ? (
                  <div className="flex justify-center  w-full">
                    <div className="w-[32px]">
                      <Image src={setting} />
                    </div>
                  </div>
                ) : (
                  <div className="flex justify-center  opacity-20  w-full">
                    <div className="w-[32px] ">
                      <Image src={setting} />
                    </div>
                  </div>
                )}
              </>
            </Link>
          )}

          {HasPermission("ViewActivities", permissions) && (
            <Link href={"/app/tasks"} className="w-full !no-underline ">
              <>
                {notifUnreadData > 0 && (
                  <div className="relative flex justify-center">
                    <div className="absolute top-[-10px]">
                      <div className="w-[8px] h-[8px] rounded-full bg-red-300"></div>
                    </div>
                  </div>
                )}
                {usePath.includes("/tasks") ? (
                  <div className="flex justify-center  w-full">
                    <div className="w-[32px] mt-2">
                      <Image src={logo} />
                    </div>
                  </div>
                ) : (
                  <div className="flex justify-center  opacity-20  w-full">
                    <div className="w-[32px] mt-2">
                      <Image src={logo} />
                    </div>
                  </div>
                )}
              </>
            </Link>
          )}
        </div>
      </div>
    </div>
  );
};

export default NavBAr;