datopian · khalilcodes · Feb 24, 2023 · Feb 12, 2023 · Feb 16, 2023 · Feb 24, 2023
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @flowershow/core
 
+## 0.3.2
+
+### Patch Changes
+
+- e83bc87: Remove support for nav dropdown
+
 ## 0.3.1
 
 ### Patch Changes

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flowershow/core",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Core Flowershow components, configs and utils.",
   "repository": {
     "type": "git",

diff --git a/packages/core/src/ui/Layout/Footer.tsx b/packages/core/src/ui/Layout/Footer.tsx
@@ -1,29 +1,26 @@
 import Link from "next/link.js";
 
-import { AuthorConfig, isNavDropdown, NavDropdown, NavLink } from "../types";
+import { AuthorConfig, NavLink } from "../types";
 
 interface Props {
-  links: Array<NavLink | NavDropdown>;
+  links: Array<NavLink>;
   author: AuthorConfig;
 }
 
 export const Footer: React.FC<Props> = ({ links, author }) => {
   return (
     <footer className="bg-background dark:bg-background-dark prose dark:prose-invert max-w-none flex flex-col items-center justify-center w-full h-auto pt-10 pb-20">
       <div className="flex w-full flex-wrap justify-center">
-        {links.map(
-          (item) =>
-            !isNavDropdown(item) && (
-              <Link
-                key={item.href}
-                href={item.href}
-                className="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
-              >
-                {/* TODO aria-current={item.current ? "page" : undefined} */}
-                {item.name}
-              </Link>
-            )
-        )}
+        {links.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
+          >
+            {/* TODO aria-current={item.current ? "page" : undefined} */}
+            {item.name}
+          </Link>
+        ))}
       </div>
       <p className="flex items-center justify-center">
         Created by

diff --git a/packages/core/src/ui/Nav/NavItem.tsx b/packages/core/src/ui/Nav/NavItem.tsx
@@ -1,82 +1,21 @@
-import { Menu, Transition } from "@headlessui/react";
+import { Menu } from "@headlessui/react";
 import Link from "next/link.js";
-import { Fragment, useRef, useState } from "react";
-
 import { BaseLink } from "../Base";
-
-import { NavLink, NavDropdown, isNavDropdown } from "../types";
+import { NavLink } from "../types";
 
 interface Props {
-  link: NavLink | NavDropdown;
+  link: NavLink;
 }
 
 export const NavItem: React.FC<Props> = ({ link }) => {
-  const dropdownRef = useRef(null);
-  const [showDropdown, setshowDropdown] = useState(false);
-
-  const timeoutDuration = 200;
-  let timeoutId;
-
-  const openDropdown = () => {
-    clearTimeout(timeoutId);
-    setshowDropdown(true);
-  };
-  const closeDropdown = () => {
-    timeoutId = setTimeout(() => setshowDropdown(false), timeoutDuration);
-  };
-
   return (
     <Menu as="div" className="relative">
-      <Menu.Button
-        onClick={() => setshowDropdown(!showDropdown)}
-        onMouseEnter={openDropdown}
-        onMouseLeave={closeDropdown}
+      <Link
+        href={link.href}
+        className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
       >
-        {!isNavDropdown(link) ? (
-          <Link
-            href={link.href}
-            className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
-          >
-            {link.name}
-          </Link>
-        ) : (
-          <div className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600 fill-slate-500 hover:fill-slate-600">
-            {link.name}
-          </div>
-        )}
-      </Menu.Button>
-
-      {isNavDropdown(link) && (
-        <Transition
-          as={Fragment}
-          show={showDropdown}
-          enter="transition ease-out duration-200"
-          enterFrom="transform opacity-0 scale-5"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-5"
-        >
-          <Menu.Items
-            className="absolute top-5 flex flex-col dark:bg-slate-900/95 backdrop-blur"
-            ref={dropdownRef}
-            onMouseEnter={openDropdown}
-            onMouseLeave={closeDropdown}
-          >
-            {link.subItems.map(({ name, href }) => (
-              <Menu.Item key={name}>
-                <BaseLink
-                  href={href}
-                  onClick={() => setshowDropdown(false)}
-                  className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
-                >
-                  {name}
-                </BaseLink>
-              </Menu.Item>
-            ))}
-          </Menu.Items>
-        </Transition>
-      )}
+        {link.name}
+      </Link>
     </Menu>
   );
 };
diff --git a/packages/core/src/ui/Nav/NavMobile.tsx b/packages/core/src/ui/Nav/NavMobile.tsx
@@ -1,21 +1,14 @@
-import { Dialog, Menu, Transition } from "@headlessui/react";
+import { Dialog, Menu } from "@headlessui/react";
 import Link from "next/link.js";
 import { useRouter } from "next/router.js";
-import { Fragment, useEffect, useState } from "react";
-
+import { useEffect, useState } from "react";
 import { SearchContext, SearchField } from "../Search";
-import { BaseLink } from "../Base";
 import { MenuIcon, CloseIcon } from "../Icons";
-import {
-  NavLink,
-  NavDropdown,
-  isNavDropdown,
-  SearchProviderConfig,
-} from "../types";
+import { NavLink, SearchProviderConfig } from "../types";
 
 interface Props extends React.PropsWithChildren {
   author?: string;
-  links?: Array<NavLink | NavDropdown>;
+  links?: Array<NavLink>;
   search?: SearchProviderConfig;
 }
 
@@ -99,56 +92,16 @@ export const NavMobile: React.FC<Props> = ({
               {links.map((link) => (
                 <Menu as="div" key={link.name} className="relative">
                   <Menu.Button>
-                    {!isNavDropdown(link) ? (
-                      <li key={link.href}>
-                        <Link
-                          href={link.href}
-                          className={`
+                    <li key={link.href}>
+                      <Link
+                        href={link.href}
+                        className={`
                   block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300`}
-                        >
-                          {link.name}
-                        </Link>
-                      </li>
-                    ) : (
-                      <li key={link.name}>
-                        <div className="flex w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300 dark:hover:fill-slate-300 fill-slate-500 hover:fill-slate-600">
-                          {link.name}
-                          <svg
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path d="M7 10l5 5 5-5z" />
-                          </svg>
-                        </div>
-                      </li>
-                    )}
+                      >
+                        {link.name}
+                      </Link>
+                    </li>
                   </Menu.Button>
-                  {isNavDropdown(link) && (
-                    <Transition
-                      as={Fragment}
-                      enter="transition ease-out duration-200"
-                      enterFrom="transform opacity-0 scale-5"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-5"
-                    >
-                      <Menu.Items className="flex flex-col ml-3">
-                        {link.subItems.map((subItem) => (
-                          <Menu.Item key={subItem.name}>
-                            <BaseLink
-                              href={subItem.href}
-                              className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
-                            >
-                              {subItem.name}
-                            </BaseLink>
-                          </Menu.Item>
-                        ))}
-                      </Menu.Items>
-                    </Transition>
-                  )}
                 </Menu>
               ))}
             </ul>

diff --git a/packages/core/src/ui/types.ts b/packages/core/src/ui/types.ts
@@ -7,22 +7,11 @@ export interface NavLink {
   href: string;
 }
 
-export interface NavDropdown {
-  name: string;
-  subItems: Array<NavLink>;
-}
-
-export function isNavDropdown(
-  link: NavLink | NavDropdown
-): link is NavDropdown {
-  return (link as NavDropdown).subItems !== undefined;
-}
-
 export interface NavConfig {
   title: string;
   logo?: string;
   version?: string;
-  links: Array<NavLink | NavDropdown>;
+  links: Array<NavLink>;
   search?: SearchProviderConfig;
   social?: Array<SocialLink>;
 }

diff --git a/packages/template/package.json b/packages/template/package.json
@@ -12,7 +12,7 @@
     "generate": "contentlayer build && cross-env NODE_OPTIONS=\"--experimental-json-modules --experimental-modules\" node ./scripts/search.mjs"
   },
   "dependencies": {
-    "@flowershow/core": "^0.3.1",
+    "@flowershow/core": "^0.3.2",
     "@flowershow/remark-callouts": "^1.0.0",
     "@flowershow/remark-embed": "^1.0.0",
     "@flowershow/remark-wiki-link": "^1.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/content/docs/config.md b/site/content/docs/config.md
@@ -26,27 +26,6 @@ const config = {
 export default config;
 ```
 
-## Navbar
-
-### Dropdown
-
-Flowershow supports adding dropdown menus in your navbar.
-
-Example of configuration in `your-content-dir/config.js`:
-
-```js
-const userConfig = {
-  // links to the pages you want to add to the navbar
-  navLinks: [
-    { href: '/about', name: 'About' },
-    //dropdown menu should not have an href and should contain 'subItems' array
-    {name: 'DropdownExample', subItems: [{href: '/goToLink1', name: 'Link1'}, {href: 'goToLink2', name: 'Link2}]}
-  ],
-}
-
-export default userConfig
-```
-
 ### Title and Logo
 
 The Title and the logo in the navbar can be set by adding a **navbarTitle** attribute in your config. If you don't want a logo to be displayed in the navbar of your site, then don't include the logo field.

diff --git a/site/content/index.md b/site/content/index.md
@@ -21,7 +21,7 @@ import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx"
     <h2 className="text-center">
       Self-publish your digital garden with Flowershow
     </h2>
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-12">
+    <div className="grid grid-cols-1 md:grid-cols-2 md:gap-8 gap-4 lg:gap-12">
       { /* 1. markdown folder */ }
       <div className="relative">
         <div className="flex items-center space-x-4 sm:space-x-8">
@@ -88,7 +88,7 @@ import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx"
     </h2>
     <p className="text-center">🚧 Coming soon! 🚧</p>
     <p>We are actively trialling Flowershow before wide release. If you'd like to help us test or be first on the list to use it please sign up using the form at the top of this page.</p>
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-12">
+    <div className="grid grid-cols-1 md:grid-cols-2 md:gap-8 gap-4 lg:gap-12">
       { /* 1. markdown folder */ }
       <div className="relative">
         <div className="flex items-center space-x-4 sm:space-x-8">