Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mrswastik robot hiding hamburger #513

Merged
merged 8 commits into from
Oct 14, 2023
Merged

Mrswastik robot hiding hamburger #513

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bbfc2ad
drop-down menu closes on clicking hamburger icon
mrswastik-robot Oct 7, 2023
3f19fac
Merge branch 'master' into hiding-hamburger
mrswastik-robot Oct 8, 2023
4ec9a08
Merge branch 'master' into hiding-hamburger
origranot Oct 13, 2023
6432377
moved the onClick to button component.
mrswastik-robot Oct 13, 2023
e91219b
Merge branch 'origranot:master' into hiding-hamburger
mrswastik-robot Oct 13, 2023
7655fce
Merge branch 'hiding-hamburger' of https://github.com/mrswastik-robot…
mrswastik-robot Oct 13, 2023
1efe206
Merge branch 'master' into hiding-hamburger
origranot Oct 14, 2023
89af7a2
fix: button
Oct 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 62 additions & 48 deletions apps/frontend/src/components/navbar/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { component$, useContext, useStylesScoped$ } from '@builder.io/qwik';
import { component$, useContext, useSignal, useStylesScoped$ } from '@builder.io/qwik';
import { Link, useLocation } from '@builder.io/qwik-city';
import { GlobalStore } from '../../context';
import { useGetCurrentUser } from '../../routes/layout';
Expand All @@ -15,6 +15,8 @@ export const Navbar = component$(() => {
const user = useGetCurrentUser();
const location = useLocation();

const showDropdown = useSignal(false);

return (
<div class="navbar bg-base-100 drop-shadow-md relative" style={{ zIndex: 100 }}>
<div class="flex-1">
Expand All @@ -38,55 +40,67 @@ export const Navbar = component$(() => {
Reduced.to
</Link>
</div>
<div class="block sm:hidden dropdown dropdown-end">
<div
class="block sm:hidden dropdown dropdown-end"
onFocusout$={({ relatedTarget }, currentTarget) => {
if (relatedTarget instanceof HTMLElement && currentTarget.contains(relatedTarget as Node)) {
return;
}

showDropdown.value = false;
}}
onClick$={() => (showDropdown.value = !showDropdown.value)}
>
<BurgerButton buttonTitle="Open" />
<ul tabIndex={0} class="menu dropdown-content shadow bg-base-100 rounded-box w-52 mt-4 p-2">
<li class={user.value ? 'px-4 py-2' : ''}>
{user.value ? (
`Welcome ${user.value?.name}!`
) : (
<Link href="/login" class="btn-ghost">
Login
</Link>
)}
</li>
{user.value && (
<>
<li class="pr-2 border-black"></li>
<li>
<Link href="/dashboard" class="btn-ghost py-2 text-sm justify-between">
Dashboard
<span class="badge">New</span>
</Link>
<Link href="/logout" class="btn-ghost py-2 text-sm">
Logout
{showDropdown.value && (
<ul tabIndex={0} class="menu dropdown-content shadow bg-base-100 rounded-box w-52 mt-4 p-2">
<li class={user.value ? 'px-4 py-2' : ''}>
{user.value ? (
`Welcome ${user.value?.name}!`
) : (
<Link href="/login" class="btn-ghost">
Login
</Link>
</li>
<li class="pr-2 border-black"></li>
</>
)}
<li>
<a href="https://github.com/origranot/reduced.to" target="_blank" title="GitHub" class="btn-ghost">
Github
</a>
</li>
<li>
<a href="https://docs.reduced.to" target="_blank" title="Documentation" class="btn-ghost">
Docs
</a>
</li>
<li>
<a
class="btn-ghost"
onClick$={() => {
globalStore.theme = globalStore.theme === 'light' ? DARK_THEME : LIGHT_THEME;
setPreference(globalStore.theme);
}}
>
{globalStore.theme === 'light' ? 'Dark' : 'Light'} theme
</a>
</li>
</ul>
)}
</li>
{user.value && (
<>
<li class="pr-2 border-black"></li>
<li>
<Link href="/dashboard" class="btn-ghost py-2 text-sm justify-between">
Dashboard
<span class="badge">New</span>
</Link>
<Link href="/logout" class="btn-ghost py-2 text-sm">
Logout
</Link>
</li>
<li class="pr-2 border-black"></li>
</>
)}
<li>
<a href="https://github.com/origranot/reduced.to" target="_blank" title="GitHub" class="btn-ghost">
Github
</a>
</li>
<li>
<a href="https://docs.reduced.to" target="_blank" title="Documentation" class="btn-ghost">
Docs
</a>
</li>
<li>
<a
class="btn-ghost"
onClick$={() => {
globalStore.theme = globalStore.theme === 'light' ? DARK_THEME : LIGHT_THEME;
setPreference(globalStore.theme);
}}
>
{globalStore.theme === 'light' ? 'Dark' : 'Light'} theme
</a>
</li>
</ul>
)}
</div>
<div class="sm:flex hidden">
{user.value ? (
Expand Down