Merge pull request #9 from martinIvovIv/fix/add-all-header-links

Fix: adds all nav links
martinIvovIv · Jun 18, 2024 · 4136880 · 4136880
2 parents 94d168c + 690fd18
commit 4136880
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 14 deletions.
diff --git a/src/components/about-us-dropdown.tsx b/src/components/about-us-dropdown.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Link from 'next/link';
+
+import { Separator } from './ui/separator';
+
+import { cn } from '@/lib/utils';
+import * as m from '@/paraglide/messages';
+
+const ABOUT_MISSION = '/about/mission';
+const ABOUT_ACTIVITIES = '/about/activities';
+const ABOUT_AWARDS = '/about/awards';
+const ABOUT_PROJECTS = '/about/projects';
+const ABOUT_FOUNDERS = '/about/founders';
+
+export const AboutUsDropDown = ({ className }: { className?: string }) => {
+  return (
+    <div className={cn('hidden sm:inline-block', className)}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <Link
+            href={ABOUT_MISSION}
+            className="hidden hover:underline sm:inline-block"
+          >
+            {m.og_nav_about_us()}
+          </Link>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            hideWhenDetached={true}
+            className="bg-secondary dark:bg-secondary text-secondary-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-bold leading-tight tracking-wide"
+          >
+            <Link
+              href={ABOUT_MISSION}
+              className={
+                'underline-offset-3 py-4 text-center hover:text-2xl hover:underline'
+              }
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_missions()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_ACTIVITIES}
+              className={
+                'underline-offset-3 py-4 text-center hover:text-2xl hover:underline'
+              }
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_activities()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_AWARDS}
+              className={
+                'underline-offset-3 py-4 text-center hover:text-2xl hover:underline'
+              }
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_awards_only()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_PROJECTS}
+              className={
+                'underline-offset-3 py-4 text-center hover:text-2xl hover:underline'
+              }
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_projects()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_FOUNDERS}
+              className={
+                'underline-offset-3 py-4 text-center hover:text-2xl hover:underline'
+              }
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_founders()}
+              </DropdownMenu.Item>
+            </Link>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
+  );
+};
diff --git a/src/components/navbar/mobile-menu.tsx b/src/components/navbar/mobile-menu.tsx
@@ -6,12 +6,17 @@ import { usePathname } from 'next/navigation';
 
 import { Icons } from '../icons';
 import { Button } from '../ui/button';
+import { Separator } from '../ui/separator';
 
 import { cn } from '@/lib/utils';
 import * as m from '@/paraglide/messages';
 
 const HOME_PATH = '/';
 const ABOUT_MISSION = '/about/mission';
+const ABOUT_ACTIVITIES = '/about/activities';
+const ABOUT_AWARDS = '/about/awards';
+const ABOUT_PROJECTS = '/about/projects';
+const ABOUT_FOUNDERS = '/about/founders';
 const GALLERY = '/gallery';
 const JUNIOR = '/junior';
 const CONTACTS = '/contacts';
@@ -31,50 +36,108 @@ 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-5 flex 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-l-md rounded-br-sm text-xl font-medium leading-tight tracking-wide"
           >
             <Link
               href={HOME_PATH}
               className={cn(
-                'py-2 pl-3 pr-4 text-center',
+                'py-2 text-center',
                 pathname === HOME_PATH &&
                   'font-bold underline underline-offset-2'
               )}
             >
               <DropdownMenu.Item>{m.og_nav_beginning_home()}</DropdownMenu.Item>
             </Link>
+            <Separator />
             <Link
               href={ABOUT_MISSION}
               className={cn(
-                'py-2 pl-3 pr-4 text-center',
+                'py-2 text-center',
                 pathname === ABOUT_MISSION &&
                   'font-bold underline underline-offset-2'
               )}
             >
-              <DropdownMenu.Item>{m.og_nav_about_us()}</DropdownMenu.Item>
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_missions()}
+              </DropdownMenu.Item>
             </Link>
+            <Separator />
+            <Link
+              href={ABOUT_ACTIVITIES}
+              className={cn(
+                'py-2 text-center',
+                pathname === ABOUT_ACTIVITIES &&
+                  'font-bold underline underline-offset-2'
+              )}
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_activities()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_AWARDS}
+              className={cn(
+                'py-2 text-center',
+                pathname === ABOUT_AWARDS &&
+                  'font-bold underline underline-offset-2'
+              )}
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_awards_only()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_PROJECTS}
+              className={cn(
+                'py-2 text-center',
+                pathname === ABOUT_PROJECTS &&
+                  'font-bold underline underline-offset-2'
+              )}
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_projects()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
+            <Link
+              href={ABOUT_FOUNDERS}
+              className={cn(
+                'py-2 text-center',
+                pathname === ABOUT_FOUNDERS &&
+                  'font-bold underline underline-offset-2'
+              )}
+            >
+              <DropdownMenu.Item>
+                {m.og_nav_about_us()}: {m.og_nav_founders()}
+              </DropdownMenu.Item>
+            </Link>
+            <Separator />
             <Link
               href={GALLERY}
               className={cn(
-                'py-2 pl-3 pr-4 text-center',
+                'py-2 text-center',
                 pathname === GALLERY && 'font-bold underline underline-offset-2'
               )}
             >
               <DropdownMenu.Item>{m.og_nav_gallery()}</DropdownMenu.Item>
             </Link>
+            <Separator />
             <Link
               href={JUNIOR}
               className={cn(
-                'py-2 pl-3 pr-4 text-center',
+                'py-2 text-center',
                 pathname === JUNIOR && 'font-bold underline underline-offset-2'
               )}
             >
               <DropdownMenu.Item>{m.og_nav_fenix_junior()}</DropdownMenu.Item>
             </Link>
+            <Separator />
             <Link
               href={CONTACTS}
               className={cn(
-                'py-2 pl-3 pr-4 text-center',
+                'py-2 text-center',
                 pathname === CONTACTS &&
                   'font-bold underline underline-offset-2'
               )}

diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 
+import { AboutUsDropDown } from '../about-us-dropdown';
 import { ThemeSwitcher } from '../theme-switcher';
 import { LanguageSwitcher } from './language-switcher';
 import { MobileMenu } from './mobile-menu';
@@ -8,7 +9,7 @@ import { Link } from '@/lib/i18n';
 import * as m from '@/paraglide/messages';
 
 const HOME_PATH = '/';
-const ABOUT_MISSION = '/about/mission';
+// const ABOUT_MISSION = '/about/mission';
 const GALLERY = '/gallery';
 const JUNIOR = '/junior';
 const CONTACTS = '/contacts';
@@ -32,12 +33,7 @@ export const Navbar = async () => {
           >
             {m.og_nav_beginning_home()}
           </Link>
-          <Link
-            href={ABOUT_MISSION}
-            className="hidden whitespace-nowrap hover:underline sm:inline-block"
-          >
-            {m.og_nav_about_us()}
-          </Link>
+          <AboutUsDropDown />
           <Link
             href={GALLERY}
             className="hidden hover:underline sm:inline-block"

diff --git a/src/messages/bg.json b/src/messages/bg.json
@@ -17,6 +17,7 @@
   "og_nav_missions": "Мисия",
   "og_nav_activities": "Дейности",
   "og_nav_awards": "Награди и Медийно отразяване",
+  "og_nav_awards_only": "Награди",
   "og_nav_projects": "Проекти",
   "og_nav_founders": "Основатели",
   "og_nav_gallery": "Галерия",

diff --git a/src/messages/en.json b/src/messages/en.json
@@ -17,6 +17,7 @@
     "og_nav_missions": "Mission",
     "og_nav_activities": "Activities",
     "og_nav_awards": "Awards and Media Coverage",
+    "og_nav_awards_only": "Awards",
     "og_nav_projects": "Projects",
     "og_nav_founders": "Founders",
     "og_nav_gallery": "Gallery",