@syscore/ui-library 1.1.12 → 1.2.0

package/client/components/ui/navigation.tsx

@@ -0,0 +1,861 @@
+import * as React from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+import { UtilityClose } from "../icons/UtilityClose";
+import { NavLogo } from "../icons/NavLogo";
+import { NavAccount } from "../icons/NavAccount";
+import { NavBullet } from "../icons/NavBullet";
+import { Button } from "@/components/ui/button";
+
+export interface NavItem {
+  label: string;
+  active?: boolean;
+}
+
+// Define a Link component type that matches common routing patterns
+export type LinkComponent = React.ComponentType<{
+  href: string;
+  className?: string;
+  "aria-label"?: string;
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+}>;
+
+interface NavigationProps {
+  navItems?: NavItem[];
+  isStrategy?: boolean;
+  Link?: LinkComponent; // Optional Link component from routing library
+  onLinkClick?: (href: string) => void; // Fallback callback for navigation
+  onClose?: () => void;
+}
+
+export const Navigation: React.FC<NavigationProps> = ({
+  navItems,
+  isStrategy = false,
+  Link: LinkComponent,
+  onLinkClick,
+  onClose,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState<number | null>(null);
+
+  const containerRef = React.useRef<HTMLElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const menuItemsRef = React.useRef<HTMLDivElement>(null);
+  const overlayRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+    setActiveItem(null);
+  };
+
+  const handleNavItemMouseEnter = (index: number) => {
+    setIsOpen(true);
+    setActiveItem(index + 1);
+  };
+
+  // Internal NavLink component that handles different routing scenarios
+  const NavLink: React.FC<{
+    href: string;
+    className?: string;
+    "aria-label"?: string;
+    children: React.ReactNode;
+  }> = ({ href, className, "aria-label": ariaLabel, children }) => {
+    // If Link component is provided, use it
+    if (LinkComponent) {
+      return (
+        <LinkComponent href={href} className={className} aria-label={ariaLabel}>
+          {children}
+        </LinkComponent>
+      );
+    }
+
+    // If onLinkClick callback is provided, use anchor with click handler
+    if (onLinkClick) {
+      return (
+        <a
+          href={href}
+          className={className}
+          aria-label={ariaLabel}
+          onClick={(e) => {
+            e.preventDefault();
+            onLinkClick(href);
+          }}
+        >
+          {children}
+        </a>
+      );
+    }
+
+    // Default: plain anchor tag (browser navigation)
+    return (
+      <a href={href} className={className} aria-label={ariaLabel}>
+        {children}
+      </a>
+    );
+  };
+
+  return (
+    <nav
+      ref={containerRef}
+      className={cn("navigation", isStrategy && "navigation--strategy")}
+      data-strategy={isStrategy}
+      onMouseLeave={handleMouseLeave}
+    >
+      {!isStrategy && (
+        <div
+          ref={overlayRef}
+          className="navigation-overlay"
+          data-open={isOpen}
+        />
+      )}
+
+      <div className="navigation-container">
+        <div className="navigation-logo-container">
+          {isStrategy ? (
+            <Button
+              className="navigation-close-button"
+              size="icon"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onClose) {
+                  onClose();
+                } else if (onLinkClick) {
+                  onLinkClick("/");
+                }
+              }}
+            >
+              <UtilityClose className="navigation-close-icon" />
+            </Button>
+          ) : null}
+
+          <NavLink
+            href="/"
+            className={cn(
+              "navigation-logo-link",
+              isStrategy && "navigation-logo-link--strategy",
+            )}
+            data-strategy={isStrategy}
+            aria-label="Home"
+          >
+            <NavLogo dark={isStrategy} />
+          </NavLink>
+        </div>
+
+        {!isStrategy ? (
+          <div className="navigation-nav-container">
+            <ul className="navigation-nav-list">
+              {navItems
+                ? navItems.map((item, index) => (
+                    <li
+                      key={index + 1}
+                      className="navigation-nav-item"
+                      onMouseEnter={() => handleNavItemMouseEnter(index)}
+                    >
+                      <span className="navigation-nav-link">{item.label}</span>
+
+                      {/* Underline */}
+                      {activeItem === index + 1 && (
+                        <motion.div
+                          id="underline"
+                          className="navigation-underline"
+                          layoutId="underline"
+                          transition={{ duration: 0.2, ease: "easeOut" }}
+                        >
+                          <div
+                            className="navigation-underline-circle navigation-underline-circle--gradient"
+                            style={{
+                              width: "10px",
+                              height: "5px",
+                              borderBottomLeftRadius: "100px",
+                              borderBottomRightRadius: "100px",
+                              borderBottom: "0",
+                              boxSizing: "border-box",
+                            }}
+                          />
+                        </motion.div>
+                      )}
+                      {index === 0 && (
+                        <div
+                          className="navigation-underline navigation-underline--static"
+                          style={{ transition: "all 0.2s ease-out" }}
+                        >
+                          <div
+                            className="navigation-underline-circle navigation-underline-circle--white"
+                            style={{
+                              width: "10px",
+                              height: "5px",
+                              borderTopLeftRadius: "100px",
+                              borderTopRightRadius: "100px",
+                              borderBottom: "0",
+                              boxSizing: "border-box",
+                            }}
+                          />
+                        </div>
+                      )}
+                    </li>
+                  ))
+                : null}
+            </ul>
+          </div>
+        ) : null}
+
+        <div className="navigation-actions">
+          <NavLink
+            href="/"
+            aria-label="Account link"
+            className="navigation-account-link"
+            data-open={isOpen}
+            data-strategy={isStrategy}
+          >
+            <NavAccount
+              className={cn(
+                "navigation-account-icon",
+                isStrategy
+                  ? "navigation-account-icon--strategy"
+                  : "navigation-account-icon--default",
+              )}
+            />
+          </NavLink>
+        </div>
+      </div>
+
+      {isOpen && <div className="navigation-divider" />}
+
+      {/* Tray */}
+      <div ref={menuRef} className="navigation-tray" data-open={isOpen}>
+        <div className="navigation-tray-content">
+          <div ref={menuItemsRef} className="navigation-tray-grid">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={activeItem ? activeItem + 1 : "empty"}
+                initial={{ y: 10, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: -10, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                {/* WELL Tray */}
+                {activeItem === 1 && (
+                  <div className="navigation-tray-section">
+                    <h2
+                      className="navigation-tray-heading"
+                      style={{
+                        background:
+                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        backgroundClip: "text",
+                      }}
+                    >
+                      WELL sets the standard for people-first places
+                    </h2>
+
+                    <div className="navigation-tray-columns">
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Everything
+                        </h3>
+                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Explore WELL
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Enroll in WELL
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              What's new
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          WHY WELL
+                        </h3>
+                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Performance
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              ROI
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Impact
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Standard
+                        </h3>
+                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Strategies
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Themes
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Milestones
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Network
+                        </h3>
+                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Organizations
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              People
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Solutions
+                        </h3>
+                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Products
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Services
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">Places</h3>
+                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Locations
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Portfolios
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Pursuits Tray */}
+                {activeItem === 2 && (
+                  <div className="navigation-tray-section">
+                    <h2
+                      className="navigation-tray-heading"
+                      style={{
+                        background:
+                          "linear-gradient(99deg, #41D5F6 3.39%, #3EECD1 57.86%, #66FCD9 112.32%)",
+                        backgroundClip: "text",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                      }}
+                    >
+                      WELL works everywhere, at any scale
+                    </h2>
+                    <div className="navigation-tray-columns">
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          SUBSCRIBE
+                        </h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL at scale
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink href="/">
+                                <span className="navigation-tray-link-small">
+                                  Pricing
+                                </span>
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink href="/">
+                                <span className="navigation-tray-link-small">
+                                  Leaderboard
+                                </span>
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Certify
+                        </h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL Certification
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink
+                              href="/"
+                              className="navigation-tray-link navigation-tray-link--with-badge"
+                            >
+                              WELL Residence
+                              <span className="navigation-tray-badge">
+                                PILOT
+                              </span>
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Get rated
+                        </h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL Ratings
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <NavBullet color="#F3E7D8" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Health-Safety Rating
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <NavBullet color="#0F748A" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Performance Rating
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <NavBullet color="#17AA8D" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Equity Rating
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Network Tray */}
+                {activeItem === 3 && (
+                  <div className="navigation-tray-section">
+                    <h2
+                      className="navigation-tray-heading"
+                      style={{
+                        background:
+                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                      }}
+                    >
+                      Our network drives our movement
+                    </h2>
+
+                    <div className="navigation-tray-columns">
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">JOIN</h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Membership
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Works with WELL
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <NavBullet color="#2E74AD" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Enterprise Provider
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <NavBullet color="#149EBD" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Product Provider
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <NavBullet color="#ED896F" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Performance Testing Provider
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">EARN</h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL AP
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL Faculty
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Knowledge Tray */}
+                {activeItem === 4 && (
+                  <div className="navigation-tray-section">
+                    <h2
+                      className="navigation-tray-heading"
+                      style={{
+                        background:
+                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                      }}
+                    >
+                      Learn from the experts on health
+                    </h2>
+
+                    <div className="navigation-tray-columns">
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">LEARN</h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL Forum
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Threads
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Webcasts
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Trainings
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">ATTEND</h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              WELL 2025
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Flagship events
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Thematic summits
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Regional summits
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          GUIDANCE
+                        </h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Knowledge base
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Tutorials
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Guides
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                FAQs
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Resources
+                        </h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Resource library
+                            </NavLink>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Technical tools
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Sales tools
+                              </NavLink>
+                            </div>
+                          </li>
+                          <li>
+                            <div className="navigation-tray-bullet-item">
+                              <div className="navigation-tray-bullet" />
+                              <NavLink
+                                href="/"
+                                className="navigation-tray-link-small"
+                              >
+                                Media
+                              </NavLink>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* IWBI Tray */}
+                {activeItem === 5 && (
+                  <div className="navigation-tray-section">
+                    <h2
+                      className="navigation-tray-heading"
+                      style={{
+                        background:
+                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                      }}
+                    >
+                      The International WELL Building Institute (IWBI)
+                    </h2>
+
+                    <div className="navigation-tray-columns">
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">About</h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              IWBI
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Research
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Advocacy
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">Meet</h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Team
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Advisories
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Governance Council
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="navigation-tray-column">
+                        <h3 className="navigation-tray-column-title">
+                          Explore
+                        </h3>
+                        <ul className="navigation-tray-column-list">
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Newsroom
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Jobs
+                            </NavLink>
+                          </li>
+                          <li>
+                            <NavLink href="/" className="navigation-tray-link">
+                              Blog
+                            </NavLink>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};