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

feat: add back to home link on mobile #93

Merged
merged 1 commit into from
Jan 5, 2025
Merged

feat: add back to home link on mobile #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
49 changes: 27 additions & 22 deletions src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,14 @@ import { useMainStore } from "@/hooks/useMainStore"
import { useMediaQuery } from "@/hooks/useMediaQuery"
import { cn } from "@/lib/utils"
import i18next from "i18next"
import { HomeIcon, LogOut, Settings, User2 } from "lucide-react"
import { LogOut, Settings, User2 } from "lucide-react"
import { DateTime } from "luxon"
import { useEffect, useRef, useState } from "react"
import { useTranslation } from "react-i18next"
import { Link, useLocation, useNavigate } from "react-router-dom"

import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
import { Button } from "./ui/button"
import { Card } from "./ui/card"
import {
DropdownMenu,
DropdownMenuContent,
Expand Down Expand Up @@ -76,7 +75,7 @@ export default function Header() {
className={cn(
"absolute right-0 z-[9999] top-11 w-20 scale-100 pointer-events-none",
{
"top-2 right-4": location.pathname === "/dashboard/login",
hidden: location.pathname === "/dashboard/login",
},
)}
alt={"animated-man"}
Expand All @@ -87,7 +86,10 @@ export default function Header() {
<div className="flex justify-between items-center w-full">
<NavigationMenuLink
asChild
className={navigationMenuTriggerStyle() + " !text-foreground"}
className={
navigationMenuTriggerStyle() +
" !text-foreground hover:opacity-60 transition-opacity"
}
>
<Link to={profile ? "/dashboard" : "#"}>
<img className="h-7 mr-1" src="/dashboard/logo.svg" />
Expand All @@ -96,6 +98,13 @@ export default function Header() {
</NavigationMenuLink>

<div className="flex items-center gap-1">
<a
href={"/"}
rel="noopener noreferrer"
className="flex items-center text-nowrap gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
>
{t("BackToHome")}
</a>
<ModeToggle />
{profile && (
<>
Expand Down Expand Up @@ -147,15 +156,6 @@ export default function Header() {
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem className="cursor-pointer">
<a
href="/"
className="flex items-center gap-2 w-full"
>
<HomeIcon />
{t("BackToHome")}
</a>
</DropdownMenuItem>
<DropdownMenuItem
onClick={logout}
className="cursor-pointer"
Expand Down Expand Up @@ -251,7 +251,7 @@ export default function Header() {
</NavigationMenu>
</header>
) : (
<header className="flex border-b-2 px-4 h-16">
<header className="flex dark:bg-black/40 bg-muted border-b-[1px] px-4 h-16">
<div className="flex max-w-max flex-1 items-center justify-center gap-2">
{profile && (
<Drawer open={open} onOpenChange={setOpen}>
Expand Down Expand Up @@ -288,15 +288,20 @@ export default function Header() {
</Drawer>
)}
</div>
<Card className="mx-2 my-2 flex justify-center items-center hover:bg-accent transition duration-200">
<Link
className="inline-flex w-full items-center px-4 py-2"
to={profile ? "/dashboard" : "#"}
>
<img className="h-7 mr-1" src="/dashboard/logo.svg" /> NEZHA
</Link>
</Card>
<Link
className="mx-2 my-2 inline-flex w-full items-center"
to={profile ? "/dashboard" : "#"}
>
<img className="h-7 mr-1" src="/dashboard/logo.svg" /> {t("nezha")}
</Link>
<div className="ml-auto flex items-center gap-1">
<a
href={"/"}
rel="noopener noreferrer"
className="flex items-center text-nowrap gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
>
{t("BackToHome")}
</a>
<ModeToggle />
{profile && (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/navigation-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
"group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
"group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
)

const NavigationMenuTrigger = React.forwardRef<
Expand Down
2 changes: 1 addition & 1 deletion src/routes/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function Login() {
const { t } = useTranslation()

return (
<div className="mt-28 sm:max-w-sm m-auto max-w-fit">
<div className="mt-28 sm:max-w-sm m-auto max-w-xs">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
Expand Down
Loading