fix: navbar dropdown fixes

dyte-io · Oct 19, 2022 · 1ef768a · 1ef768a
1 parent 6332900
commit 1ef768a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 9 deletions.
diff --git a/src/components/homepage/APIReferenceSection.jsx b/src/components/homepage/APIReferenceSection.jsx
@@ -2,12 +2,17 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import { useColorMode } from '@docusaurus/theme-common';
 import { ArrowTopRightIcon } from '@radix-ui/react-icons';
+import Head from '@docusaurus/Head';
 
 export default function APIReferenceSection() {
   const { colorMode } = useColorMode();
 
   return (
-    <section className="px-6 mb-20">
+    <section className="mb-20 px-6">
+      <Head>
+        <link rel="prefetch" href="/static/landing-page/api-ref-light.png" />
+        <link rel="prefetch" href="/static/landing-page/api-ref-dark.png" />
+      </Head>
       <div className="relative mx-auto flex w-full max-w-7xl flex-col items-center gap-10 rounded-2xl bg-gradient-to-r from-black to-zinc-800 px-6 py-20 text-center text-white dark:from-zinc-100 dark:to-white dark:text-black lg:flex-row lg:p-20 lg:py-32 lg:text-left">
         <Link
           href="/api"

diff --git a/src/components/homepage/HeroSection.jsx b/src/components/homepage/HeroSection.jsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import { useColorMode } from '@docusaurus/theme-common';
+import Head from '@docusaurus/Head';
 
 export default function HeroSection() {
   const { colorMode } = useColorMode();
 
   return (
     <section className="noise-bg py-16 px-4 lg:py-24">
+      <Head>
+        <link rel="prefetch" href="/static/landing-page/hero-light.png" />
+        <link rel="prefetch" href="/static/landing-page/hero-dark.png" />
+      </Head>
       <div className="mx-auto flex max-w-7xl flex-col items-center lg:flex-row">
         <div className="flex-1 text-center lg:text-left">
           <h1 className="mb-6 font-jakarta text-4xl font-bold lg:text-6xl">

diff --git a/src/components/homepage/SDKsSection.jsx b/src/components/homepage/SDKsSection.jsx
@@ -13,6 +13,7 @@ import {
   SwiftIcon,
   VueIcon,
 } from '../../icons';
+import Head from '@docusaurus/Head';
 
 function SDKLink({ href, Icon, label, disabled = false }) {
   // yes, this is a weird way to do it :)
@@ -58,6 +59,10 @@ export default function SDKsSection() {
 
   return (
     <section className="py-20 px-4">
+      <Head>
+        <link rel="prefetch" href="/static/landing-page/plugin-sdk-light.png" />
+        <link rel="prefetch" href="/static/landing-page/plugin-sdk-dark.png" />
+      </Head>
       <div className="mx-auto max-w-7xl">
         <div className="mb-4 inline-block rounded-sm bg-zinc-200 p-2 text-text-400 dark:bg-zinc-800">
           SDKs

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -678,6 +678,32 @@ code[data-code='required'] {
   @apply bg-primary-200/80 text-white dark:bg-primary-100/60;
 }
 
+.dropdown > .navbar__link {
+  display: flex;
+  align-items: center;
+}
+
+.dropdown > .navbar__link:after {
+  content: '';
+  border: none;
+  position: static;
+  top: auto;
+  transform: none;
+  width: 12px;
+  height: 12px;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z' fill='%23888888'/%3E%3C/svg%3E");
+  background-size: 12px;
+  background-repeat: no-repeat;
+}
+
+html[data-theme='dark'] .dropdown > .navbar__link:after {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z' fill='%23ffffff'/%3E%3C/svg%3E");
+}
+
+.dropdown:hover > .navbar__link:after {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z' fill='%231a90ff'/%3E%3C/svg%3E") !important;
+}
+
 .dyte-dropdown .sdk-link {
   @apply flex items-center gap-1 rounded-md p-2 text-inherit hover:bg-secondary-700;
   @apply text-xs;

diff --git a/src/snippets/resources.html b/src/snippets/resources.html
@@ -1,18 +1,25 @@
 <div
   class="resources-dropdown-menu flex flex-col rounded-2xl p-4 lg:min-w-[220px]"
 >
-  <h2 class="text-sm text-primary dark:text-primary-100">Resources</h2>
   <ul
     class="flex list-none flex-col gap-2 pl-0 text-gray-700 dark:text-zinc-200"
   >
     <li>
-      <a href="https://dev.dyte.io" class="flex items-center gap-2 text-inherit">
+      <a
+        href="https://dev.dyte.io"
+        class="flex items-center gap-2 text-inherit"
+        target="_blank"
+      >
         <img src="/static/landing-page/sdk-icons/resources/laptop.png" />
         Developer Portal
       </a>
     </li>
     <li>
-      <a href="#" class="flex items-center gap-2 text-inherit">
+      <a
+        href="https://github.com/dyte-samples"
+        class="flex items-center gap-2 text-inherit"
+        target="_blank"
+      >
         <img src="/static/landing-page/sdk-icons/resources/apps.png" />
         Sample Apps
       </a>
@@ -22,14 +29,14 @@ <h2 class="text-sm text-primary dark:text-primary-100">Resources</h2>
         <img
           src="/static/landing-page/sdk-icons/resources/question-answer.png"
         />
-        FAQ</a
-      >
+        FAQ
+      </a>
     </li>
   </ul>
 
-  <div class="hr-line"></div>
+  <!-- <div class="hr-line"></div> -->
 
-  <h2 class="text-sm text-primary dark:text-primary-100">
+  <!-- <h2 class="text-sm text-primary dark:text-primary-100">
     Getting started with Dyte
   </h2>
   <ul
@@ -57,5 +64,5 @@ <h2 class="text-sm text-primary dark:text-primary-100">
 
   <a href="#" class="mt-4 font-semibold text-primary dark:text-primary-100">
     View all resources &rarr;
-  </a>
+  </a> -->
 </div>