docs: Add a new SDKs menu to the website

website/docusaurus.config.js

@@ -4,6 +4,7 @@
 const {sdk} = require('./data/sdk');
 const lightCodeTheme = require('prism-react-renderer').themes.github;
 const darkCodeTheme = require('prism-react-renderer').themes.dracula;
+const {generateSdksDropdownHTML} = require('./src/components/navbar/sdks');
 
 /** @type {import("@docusaurus/types").Config} */
 const config = {
@@ -196,17 +197,7 @@ const config = {
         ],
       },
     ],
-    async function myPlugin(context, options) {
-      return {
-        name: 'docusaurus-tailwindcss',
-        configurePostCss(postcssOptions) {
-          // Appends TailwindCSS and AutoPrefixer.
-          postcssOptions.plugins.push(require('tailwindcss'));
-          postcssOptions.plugins.push(require('autoprefixer'));
-          return postcssOptions;
-        },
-      };
-    },
+    require('./plugins/tailwind-plugin.cjs'),
   ],
 
   customFields: {
@@ -292,6 +283,18 @@ const config = {
           src: 'img/logo/navbar.png',
         },
         items: [
+          {
+            label: 'SDKs',
+            type: 'dropdown',
+            className: 'dyte-dropdown',
+            items: [
+              {
+                type: 'html',
+                value: generateSdksDropdownHTML(),
+                className: 'dyte-dropdown',
+              },
+            ],
+          },
           {
             position: 'left',
             label: 'Product',

website/plugins/tailwind-plugin.cjs

@@ -0,0 +1,16 @@
+function tailwindPlugin(context, options) {
+  return {
+    name: "tailwind-plugin",
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins = [
+        require("postcss-import"),
+        require("tailwindcss/nesting"),
+        require("tailwindcss"),
+        require("autoprefixer"),
+      ];
+      return postcssOptions;
+    },
+  };
+}
+
+module.exports = tailwindPlugin;

website/src/components/navbar/sdks.js

@@ -0,0 +1,56 @@
+import {sdk} from '../../../data/sdk.js';
+
+// Function to generate HTML string for SDKs dropdown
+export function generateSdksDropdownHTML() {
+  const clientSdks = sdk.filter(s => s.paradigm.includes('Client'));
+  const serverSdks = sdk.filter(s => s.paradigm.includes('Server'));
+
+  const generateSdkSection = sectionItem => {
+    return `
+      <section class="flex flex-col gap-3 mb-5">
+      <div class="text-center lg:text-left">
+        <h3 class="text-2xl font-poppins font-[800] tracking-[-0.08rem] mb-0">
+          ${sectionItem.title}
+        </h3>
+        <p class="text-xs text-gray-400 font-poppins font-[400] leading-8 mb-0">
+          ${sectionItem.description}
+        </p>
+      </div>
+
+      <div class="inline-flex flex-wrap gap-2">
+        ${sectionItem.sdks.map(sdkItem => generateSdkCard(sdkItem)).join('')}
+      </div>
+    </section>
+    `;
+  };
+
+  const generateSdkCard = sdkItem => {
+    return `
+        <a
+          href="/docs/sdk/${sdkItem.docLink}"
+          class="no-underline hover:no-underline inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-lg text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-500"
+        >
+          <i class="${sdkItem.faLogo} text-xl"></i>
+          ${sdkItem.name}
+        </a>
+    `;
+  };
+
+  return `
+    <div class="sdks-dropdown flex max-w-4xl flex-col rounded-2xl lg:min-w-[600px]">
+      <div class="flex flex-col bg-secondary-800lg:min-h-[300px]">
+        ${generateSdkSection({
+          title: 'Client SDKs',
+          description:
+            'Use feature flags in your web or mobile applications with these SDKs.',
+          sdks: clientSdks,
+        })}  
+        ${generateSdkSection({
+          title: 'Server SDKs',
+          description:
+            'Use feature flags in your backend applications with these SDKs.',
+          sdks: serverSdks,
+        })}
+    </div>
+  `;
+}