Skip to content

Commit

Permalink
Merge pull request #134 from frtug/fix-dropdown-mobile
Browse files Browse the repository at this point in the history 
fixed the hamburger open on mobile devices
  • Loading branch information
@ambujraj
ambujraj authored Apr 9, 2024
2 parents fa1be3e + 953e5ef commit 74de6bd
Showing 1 changed file with 85 additions and 156 deletions.
241 changes: 85 additions & 156 deletions ui/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,9 @@ export const Header = ({ authorised, statusLoaded, name, email }) => {
) : statusLoaded ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="text-xs md:text-sm">{getFormattedName(name)}</Button>
<Button variant="outline" className="text-xs md:text-sm">
{getFormattedName(name)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel className="text-xs font-medium select-none">
Expand All @@ -152,7 +154,6 @@ export const Header = ({ authorised, statusLoaded, name, email }) => {
className="cursor-pointer"
onClick={() => router.push('/auth/logout')}
>

Logout
</DropdownMenuItem>
</DropdownMenuContent>
Expand Down Expand Up @@ -184,80 +185,80 @@ export const Header = ({ authorised, statusLoaded, name, email }) => {
</svg>
</button>
</div>
{statusLoaded ? (
authorised ? (
<div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-cta"
>
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Feedback
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<form onSubmit={handleFeedbackSubmit}>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="name" className="text-left">
Name
</Label>
<Input
id="name"
value={feedbackName}
onChange={(e) => setFeedbackName(e.target.value)}
className="col-span-4"
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="email" className="text-left">
Email
</Label>
<Input
id="email"
type="email"
value={feedbackEmail}
onChange={(e) => setFeedbackEmail(e.target.value)}
className="col-span-4"
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="message" className="text-left">
Message<span className="text-red-500">*</span>
</Label>
<Textarea
id="message"
value={feedbackMessage}
onChange={(e) =>
setFeedbackMessage(e.target.value)
}
className="col-span-4"
required
/>
</div>
<div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-cta"
>
{!statusLoaded ? (
<></>
) : (
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Feedback
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<form onSubmit={handleFeedbackSubmit}>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="name" className="text-left">
Name
</Label>
<Input
id="name"
value={feedbackName}
onChange={(e) => setFeedbackName(e.target.value)}
className="col-span-4"
/>
</div>
<Button type="submit" className="flex justify-end">
Submit
</Button>
</form>
</PopoverContent>
</Popover>
</li>
<li>
<Button
variant="ghost"
onClick={() => router.push('/help')}
className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Help
</Button>
</li>
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="email" className="text-left">
Email
</Label>
<Input
id="email"
type="email"
value={feedbackEmail}
onChange={(e) => setFeedbackEmail(e.target.value)}
className="col-span-4"
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="message" className="text-left">
Message<span className="text-red-500">*</span>
</Label>
<Textarea
id="message"
value={feedbackMessage}
onChange={(e) => setFeedbackMessage(e.target.value)}
className="col-span-4"
required
/>
</div>
</div>
<Button type="submit" className="flex justify-end">
Submit
</Button>
</form>
</PopoverContent>
</Popover>
</li>
<li>
<Button
variant="ghost"
onClick={() => router.push('/help')}
className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Help
</Button>
</li>
{authorised ? (
<li>
<Button
variant="ghost"
Expand All @@ -267,6 +268,10 @@ export const Header = ({ authorised, statusLoaded, name, email }) => {
History
</Button>
</li>
) : (
<></>
)}
{authorised ? (
<li>
<Button
variant="default"
Expand All @@ -280,81 +285,7 @@ export const Header = ({ authorised, statusLoaded, name, email }) => {
Upgrade
</Button>
</li>
</ul>
</div>
) : (
<div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-cta"
>
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button
variant="ghost"
className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Feedback
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<form onSubmit={handleFeedbackSubmit}>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="name" className="text-left">
Name
</Label>
<Input
id="name"
value={feedbackName}
onChange={(e) => setFeedbackName(e.target.value)}
className="col-span-4"
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="email" className="text-left">
Email
</Label>
<Input
id="email"
type="email"
value={feedbackEmail}
onChange={(e) => setFeedbackEmail(e.target.value)}
className="col-span-4"
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<Label htmlFor="message" className="text-left">
Message<span className="text-red-500">*</span>
</Label>
<Textarea
id="message"
value={feedbackMessage}
onChange={(e) =>
setFeedbackMessage(e.target.value)
}
className="col-span-4"
required
/>
</div>
</div>
<Button type="submit" className="flex justify-end">
Submit
</Button>
</form>
</PopoverContent>
</Popover>
</li>
<li>
<Button
variant="ghost"
onClick={() => router.push('/help')}
className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Help
</Button>
</li>
) : (
<li>
<Button
variant="ghost"
Expand All @@ -364,12 +295,10 @@ export const Header = ({ authorised, statusLoaded, name, email }) => {
Pricing
</Button>
</li>
</ul>
</div>
)
) : (
<></>
)}
)}
</ul>
)}
</div>
</div>
</nav>
)
Expand Down

0 comments on commit 74de6bd

Please sign in to comment.