Skip to content

Commit

Permalink
Merge pull request #13 from martinIvovIv/feat/add-nav-icons
Browse files Browse the repository at this point in the history 
feat(add-nav-icons): adds nav icons
  • Loading branch information
@martinIvovIv
martinIvovIv committed Jun 19, 2024
2 parents 2d31586 + 0ab2a83 commit c0a48d8
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/components/about-us-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const AboutUsDropDown = ({ className }: { className?: string }) => {
<DropdownMenu.Trigger asChild>
<Link
href={ABOUT_MISSION}
className="hidden hover:underline sm:inline-block"
className="hidden whitespace-nowrap hover:underline sm:inline-block"
>
{m.og_nav_about_us()}
</Link>
Expand Down
8 changes: 8 additions & 0 deletions src/components/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import {
Home,
Images,
Loader2,
LogOut,
LucideProps,
Mail,
Menu,
Moon,
PersonStanding,
Phone,
Sun,
Trophy,
UserRoundPlus,
} from 'lucide-react';

export const Icons = {
Expand All @@ -19,6 +23,10 @@ export const Icons = {
phone: Phone,
email: Mail,
badge: Trophy,
home: Home,
images: Images,
person: PersonStanding,
userPlus: UserRoundPlus,
youtube: (props: LucideProps) => (
<svg viewBox="0 0 24 24" {...props}>
<path
Expand Down
89 changes: 70 additions & 19 deletions src/components/navbar/mobile-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,113 +41,164 @@ export const MobileMenu = ({ className }: { className?: string }) => {
<DropdownMenu.Portal>
<DropdownMenu.Content
hideWhenDetached={true}
className="bg-primary dark:bg-secondary text-primary-foreground dark:text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-20 data-[state=open]:fade-in-20 data-[state=closed]:zoom-out-90 data-[state=open]:zoom-in-90 mt-3 flex min-w-[100vw] flex-col items-stretch rounded-l-md rounded-br-sm text-xl font-medium leading-tight tracking-wide"
className="bg-primary dark:bg-secondary text-primary-foreground dark:text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-20 data-[state=open]:fade-in-20 data-[state=closed]:zoom-out-90 data-[state=open]:zoom-in-90 mt-3 flex min-w-[100vw] flex-col items-stretch rounded-b-lg text-xl font-medium leading-tight tracking-wide"
>
<Link
href={HOME_PATH}
className={cn(
'py-2 text-center',
'py-3',
pathname === HOME_PATH &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>{m.og_nav_beginning_home()}</DropdownMenu.Item>
<DropdownMenu.Item>
<p className="flex flex-row items-center justify-center gap-3">
<Icons.home className="size-4" aria-hidden={true} />
{m.og_nav_beginning_home()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={ABOUT_MISSION}
className={cn(
'py-2 text-center',
'py-3',
pathname === ABOUT_MISSION &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>
{m.og_nav_about_us()}: {m.og_nav_missions()}
<p className="flex flex-row items-center justify-center gap-3">
<Icons.userPlus className="size-4" aria-hidden={true} />
{m.og_nav_about_us()}: {m.og_nav_missions()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={ABOUT_ACTIVITIES}
className={cn(
'py-2 text-center',
'py-3',
pathname === ABOUT_ACTIVITIES &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>
{m.og_nav_about_us()}: {m.og_nav_activities()}
<p className="flex flex-row items-center justify-center gap-3">
<Icons.userPlus className="size-4" aria-hidden={true} />
{m.og_nav_about_us()}: {m.og_nav_activities()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={ABOUT_AWARDS}
className={cn(
'py-2 text-center',
'py-3',
pathname === ABOUT_AWARDS &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>
{m.og_nav_about_us()}: {m.og_nav_awards_only()}
<p className="flex flex-row items-center justify-center gap-3">
<Icons.userPlus className="size-4" aria-hidden={true} />
{m.og_nav_about_us()}: {m.og_nav_awards_only()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={ABOUT_PROJECTS}
className={cn(
'py-2 text-center',
'py-3',
pathname === ABOUT_PROJECTS &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>
{m.og_nav_about_us()}: {m.og_nav_projects()}
<p className="flex flex-row items-center justify-center gap-3">
<Icons.userPlus className="size-4" aria-hidden={true} />
{m.og_nav_about_us()}: {m.og_nav_projects()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={ABOUT_FOUNDERS}
className={cn(
'py-2 text-center',
'py-3',
pathname === ABOUT_FOUNDERS &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>
{m.og_nav_about_us()}: {m.og_nav_founders()}
<p className="flex flex-row items-center justify-center gap-3">
<Icons.userPlus className="size-4" aria-hidden={true} />
{m.og_nav_about_us()}: {m.og_nav_founders()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={GALLERY}
className={cn(
'py-2 text-center',
'py-3',
pathname === GALLERY && 'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>{m.og_nav_gallery()}</DropdownMenu.Item>
<DropdownMenu.Item>
<p className="flex flex-row items-center justify-center gap-3">
<Icons.images className="size-4" aria-hidden={true} />
{m.og_nav_gallery()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={JUNIOR}
className={cn(
'py-2 text-center',
'py-3',
pathname === JUNIOR && 'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>{m.og_nav_fenix_junior()}</DropdownMenu.Item>
<DropdownMenu.Item>
<p className="flex flex-row items-center justify-center gap-3">
<Icons.person className="size-4" aria-hidden={true} />
{m.og_nav_fenix_junior()}
</p>
</DropdownMenu.Item>
</Link>

<Separator />

<Link
href={CONTACTS}
className={cn(
'py-2 text-center',
'py-3',
pathname === CONTACTS &&
'font-bold underline underline-offset-2'
)}
>
<DropdownMenu.Item>{m.og_nav_contact_us()}</DropdownMenu.Item>
<DropdownMenu.Item>
<p className="flex flex-row items-center justify-center gap-3">
<Icons.phone className="size-4" aria-hidden={true} />
{m.og_nav_contact_us()}
</p>
</DropdownMenu.Item>
</Link>
</DropdownMenu.Content>
</DropdownMenu.Portal>
Expand Down
57 changes: 31 additions & 26 deletions src/components/navbar/navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Image from 'next/image';

import { AboutUsDropDown } from '../about-us-dropdown';
import { Icons } from '../icons';
import { ThemeSwitcher } from '../theme-switcher';
import { LanguageSwitcher } from './language-switcher';
import { MobileMenu } from './mobile-menu';
Expand All @@ -18,7 +19,7 @@ export const Navbar = async () => {
return (
<header className="bg-fg w-full border-b">
<div className="container flex h-16 items-center justify-between">
<div className="flex flex-row items-center gap-1.5 text-base font-bold leading-relaxed tracking-tight sm:gap-3 md:gap-5 md:text-lg lg:gap-7 lg:text-xl">
<div className="flex flex-row items-center gap-1.5 text-base font-bold leading-relaxed sm:gap-3 sm:tracking-tighter md:gap-4 md:text-lg md:tracking-tight lg:gap-7 lg:text-xl">
<Image
src="/favicon/android-chrome-192x192.png"
height={55}
Expand All @@ -27,31 +28,35 @@ export const Navbar = async () => {
alt={m.fenix_logo_alt()}
priority={true}
/>
<Link
className="hidden hover:underline sm:inline-block"
href={HOME_PATH}
>
{m.og_nav_beginning_home()}
</Link>
<AboutUsDropDown />
<Link
href={GALLERY}
className="hidden hover:underline sm:inline-block"
>
{m.og_nav_gallery()}
</Link>
<Link
href={JUNIOR}
className="hidden whitespace-nowrap hover:underline sm:inline-block"
>
{m.og_nav_fenix_junior()}
</Link>
<Link
href={CONTACTS}
className="hidden whitespace-nowrap hover:underline sm:inline-block"
>
{m.og_nav_contact_us()}
</Link>

<div className="hidden flex-row items-center hover:underline sm:inline-flex sm:gap-0.5 md:gap-1 lg:gap-2">
<Icons.home className="size-4" aria-hidden={true} />
<Link href={HOME_PATH}>{m.og_nav_beginning_home()}</Link>
</div>

<div className="hidden flex-row items-center hover:underline sm:inline-flex sm:gap-0.5 md:gap-1 lg:gap-2">
<Icons.userPlus className="size-4" aria-hidden={true} />
<AboutUsDropDown />
</div>

<div className="hidden flex-row items-center hover:underline sm:inline-flex sm:gap-0.5 md:gap-1 lg:gap-2">
<Icons.images className="size-4" aria-hidden={true} />
<Link href={GALLERY}>{m.og_nav_gallery()}</Link>
</div>

<div className="hidden flex-row items-center hover:underline sm:inline-flex sm:gap-0.5 md:gap-1 lg:gap-2">
<Icons.person className="size-4" aria-hidden={true} />
<Link href={JUNIOR} className="whitespace-nowrap">
{m.og_nav_fenix_junior()}
</Link>
</div>

<div className="hidden flex-row items-center hover:underline sm:inline-flex sm:gap-0.5 md:gap-1 lg:gap-2">
<Icons.phone className="size-4" aria-hidden={true} />
<Link href={CONTACTS} className="whitespace-nowrap">
{m.og_nav_contact_us()}
</Link>
</div>
</div>

<div className="flex flex-row items-center gap-3 sm:flex-row-reverse sm:gap-3 ">
Expand Down
2 changes: 1 addition & 1 deletion src/messages/bg.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"og_nav_founders": "Основатели",
"og_nav_gallery": "Галерия",
"og_nav_fenix_junior": "Феникс Джуниър",
"og_nav_contact_us": "Свържи се с нас",
"og_nav_contact_us": "Свържи се",

"og_home_p_one": "Сдружение “Феникс 2009” (Сдружението) е създадено през 2009 година. Към него има театрална формация “Феникс” с цел интегриране на младежи с различен здравен статус чрез способите на театралното изкуство.",
"og_home_p_label_of_ul": "Основните цели на Сдружението са:",
Expand Down

0 comments on commit c0a48d8

Please sign in to comment.