{"size": 1343, "ext": "js", "max_stars_repo_path": "resources/js/Shared/TopHeader.js", "max_stars_repo_name": "moherik/bungkus-be", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "resources/js/Shared/TopHeader.js", "max_issues_repo_name": "moherik/bungkus-be", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/js/Shared/TopHeader.js", "max_forks_repo_name": "moherik/bungkus-be", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 37.3055555556, "max_line_length": 119, "alphanum_fraction": 0.5755770663}
import React, { useState } from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';
import { Logo } from '@/Shared/Logo';
import { MainMenu } from '@/Shared/MainMenu';

export const TopHeader = () => {
  const [menuOpened, setMenuOpened] = useState(false);
  return (
    <div className="flex items-center justify-between px-6 py-4 bg-red-600 md:flex-shrink-0 md:w-56 md:justify-center">
      <InertiaLink className="-mt-2" href="/">
        {/* <Logo className="text-white fill-current" width="120" height="28" /> */}
        <Logo className="text-white text-2xl font-medium" />
      </InertiaLink>
      <div className="relative md:hidden">
        <svg
          onClick={() => setMenuOpened(true)}
          className="w-6 h-6 text-white cursor-pointer fill-current"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
        >
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
        </svg>
        <div className={`${menuOpened ? '' : 'hidden'} absolute right-0 z-20`}>
          <MainMenu className="relative z-20 p-2 mt-2 bg-primary rounded shadow-lg" />
          <div
            onClick={() => {
              setMenuOpened(false);
            }}
            className="fixed inset-0 z-10 bg-black opacity-25"
          ></div>
        </div>
      </div>
    </div>
  );
};
