remix-demo

MainNavigation.tsx

(3131B)

 import { Role } from "@prisma/client";
 import { Form } from "@remix-run/react";
 import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import { useOptionalUser } from "~/utils/hooks";
 
 export default function MainNavigation() {
   const user = useOptionalUser();
   const menus = [
     { name: "Food Entries", link: "/food-entries" },
     { name: "Report", link: "/report" },
     { name: "Invite User", link: "/invite" },
   ];
 
   if (user?.role === Role.ADMIN) {
     menus.push({ name: "Admin Report", link: "/admin/report" });
   }
 
   const [dropdownHidden, setDropdownHidden] = useState(true);
   const toggleDropdown = () => setDropdownHidden(!dropdownHidden);
 
   return (
     <nav className="flex flex-wrap items-center justify-between py-2.5">
       <div>
         {user ? (
           <>
             <span className="font-semibold">{user.name}</span>
             <Form action="/logout" method="post" className="inline">
               <button
                 type="submit"
                 className="ml-2 text-sm text-red-600 hover:underline"
               >
                 Logout
               </button>
             </Form>
           </>
         ) : null}
       </div>
       <button
         onClick={toggleDropdown}
         data-collapse-toggle="navbar-default"
         type="button"
         className="ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden"
         aria-label="Toggle Main Menu"
         aria-controls="navbar-default"
         aria-expanded="false"
       >
         <span className="sr-only">Open main menu</span>
         <svg
           className="h-6 w-6"
           aria-hidden="true"
           fill="currentColor"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"
             d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
             clipRule="evenodd"
           ></path>
         </svg>
       </button>
       <div
         className={`${
           dropdownHidden ? "hidden" : ""
         } w-full md:block md:w-auto`}
         id="navbar-default"
       >
         <ul className="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:text-sm md:font-medium">
           {menus.map((menu) => (
             <li key={menu.link}>
               <NavLink
                 to={menu.link}
                 onClick={toggleDropdown}
                 className={({ isActive }: { isActive: boolean }) =>
                   "block rounded py-2 pr-4 pl-3 " +
                   (isActive
                     ? "bg-blue-700 text-white md:bg-transparent md:p-0 md:text-blue-700"
                     : "text-gray-700 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-blue-700")
                 }
               >
                 {menu.name}
               </NavLink>
             </li>
           ))}
         </ul>
       </div>
     </nav>
   );
 }