feat: add custom navigation link to org landing page (#569)

* feat: custom navbar UI complete

* chore: added translations

* fear: attending to reviews

* add orgname to org landing page

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Navigation/index.svelte

@@ -1,119 +1,81 @@
-<script>
-  import { goto } from '$app/navigation';
+<script lang="ts">
   import { page } from '$app/stores';
   import { user } from '$lib/utils/store/user';
   import { isCoursePage } from '$lib/utils/functions/app';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { t } from '$lib/utils/functions/translations';
+  import type { TCustomLinks } from './types';
+
+  import Logo from './Logo.svelte';
+  import CustomLinks from './CustomLinks.svelte';
+  import AuthButtons from './AuthButtons.svelte';
+  import MobileMenu from './MobileMenu.svelte';
 
   export let disableSignup = false;
-  export let logo;
-  export let orgName;
+  export let logo: string | undefined = undefined;
+  export let orgName: string | undefined = undefined;
   export let isOrgSite = false;
   export let backgroundColor = 'bg-white dark:bg-black';
+  export let customLinks: TCustomLinks | undefined = undefined;
 
   let navClass = '';
+  let mobileMenuOpen = false;
 
-  const redirect = isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '';
+  $: redirect = isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '';
+  $: showLinks =
+    customLinks && customLinks.show && customLinks.links && customLinks.links.length > 0;
 
-  $: navClass = '';
+  function toggleMobileMenu() {
+    mobileMenuOpen = !mobileMenuOpen;
+  }
 </script>
 
 <nav
   class="{navClass} {backgroundColor} sticky top-0 z-50 flex w-full border-b border-l-0 border-r-0 border-t-0 border-gray-300 px-2 py-1"
 >
   <ul class="flex w-full items-center">
-    <div class="logo">
-      <a
-        href="/"
-        title={`${$t('navigation.goto')} ${orgName || 'ClassroomIO'} ${$t('navigation.home')}`}
-        data-hveid="8"
-      >
-        <img
-          src={logo || '/logo-192.png'}
-          alt={`${orgName || 'ClassroomIO'} logo`}
-          class="mx-auto inline-block w-9 rounded"
-          data-atf="1"
-        />
-        {#if orgName}
-          <span class="line-clamp-1 hidden text-sm font-medium md:block">{orgName}</span>
-        {/if}
-      </a>
-    </div>
-
-    {#if $user.isLoggedIn}
-      <li class="hidden">
-        <a class="block" href="dashboard"> {$t('navigation.dashboard')} </a>
-      </li>
-
-      <li class="hidden">
-        <a class="block" href="courses"> {$t('navigation.courses')} </a>
-      </li>
-
-      <li class="hidden">
-        <a class="block" href="discussions"> {$t('navigation.discussion')} </a>
-      </li>
-
-      <li class="hidden">
-        <a class="block" href="people">{$t('navigation.people')} </a>
-      </li>
-    {/if}
+    <Logo {logo} {orgName} />
 
     <span class="flex-grow" />
 
+    <!-- Mobile Menu Button - Only show when custom links exist -->
+    {#if isOrgSite && showLinks}
+      <button
+        class="mobile-menu-btn hover:text-primary-600 rounded-md p-2 text-gray-700 transition-colors duration-200 hover:bg-gray-100 lg:hidden"
+        on:click={toggleMobileMenu}
+        aria-label="Toggle mobile menu"
+      >
+        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          ></path>
+        </svg>
+      </button>
+    {/if}
+
+    {#if customLinks && showLinks}
+      <CustomLinks {customLinks} />
+    {/if}
+
     {#if $user.isLoggedIn}
       {#if isOrgSite}
         <li><a class="block" href="/lms"> {$t('navigation.goto_lms')} </a></li>
       {/if}
-    {:else if !$page.url.pathname?.includes('/404')}
-      <li>
-        <div class="flex">
-          <PrimaryButton
-            label={$t('navigation.login')}
-            variant={VARIANTS.TEXT}
-            onClick={() => goto('/login' + redirect)}
-          />
-        </div>
-      </li>
-      <li>
-        {#if !disableSignup}
-          <div class="flex">
-            <PrimaryButton
-              label={$t('navigation.signup')}
-              variant={VARIANTS.CONTAINED}
-              onClick={() => goto('/signup' + redirect)}
-            />
-          </div>
-        {/if}
-      </li>
+    {:else if isOrgSite && !$page.url.pathname?.includes('/404')}
+      <!-- Hide login/signup buttons on mobile when custom links exist -->
+      <div class="hidden lg:block">
+        <AuthButtons {disableSignup} {redirect} />
+      </div>
+    {:else if !isOrgSite && !$page.url.pathname?.includes('/404')}
+      <AuthButtons {disableSignup} {redirect} />
     {/if}
-    <!-- <li class="hidden">
-      <a
-        class="flex items-center"
-        href="https://t.me/classroomio"
-        target="_blank"
-      >
-        <img
-          alt="File:Telegram logo.svg"
-          class="mr-1"
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
-          decoding="async"
-          width="25"
-          height="25"
-          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
-          data-file-width="25"
-          data-file-height="25"
-        />
-        <span><SendAlt32 class="carbon-icon dark:text-white" /> Канал</span>
-        <SendAlt32 class="carbon-icon dark:text-white" />
-        <span>Канал</span>
-      </a>
-    </li> -->
-    <!-- <li class="new-question">
-      <NewQuestion />
-    </li> -->
   </ul>
+
+  {#if showLinks}
+    <MobileMenu bind:mobileMenuOpen {customLinks} {disableSignup} {redirect} />
+  {/if}
 </nav>
 
 <style>
@@ -122,17 +84,12 @@
     padding: 0;
   }
 
-  /* clearfix */
   ul::after {
     content: '';
     display: block;
     clear: both;
   }
 
-  /* li.new-question {
-    margin-top: 10px;
-  } */
-
   a {
     text-decoration: none;
     color: var(--main-primary-color);
@@ -141,9 +98,15 @@
     display: flex;
     gap: 0.5rem;
     align-items: center;
+    flex-direction: column;
   }
 
-  @media only screen and (max-width: 1002px) {
+  /* Mobile menu button styles */
+  .mobile-menu-btn {
+    display: none;
+  }
+
+  @media only screen and (max-width: 1023px) {
     nav.hide {
       display: none;
     }
@@ -154,5 +117,9 @@
     a {
       padding: 0 0.5em;
     }
+
+    .mobile-menu-btn {
+      display: block;
+    }
   }
 </style>