@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/layout/components/promo-bar/promo-bar-content.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Copy, Check } from "lucide-react"
+
+export default function PromoBarContent({ text, code: explicitCode, value: explicitValue }: { text: string; code: string | null; value: string | null }) {
+  const [copied, setCopied] = useState(false)
+
+  // Regex for code and value
+  const codeRegex = /\b[A-Z0-9]{4,}\b/;
+  const valueRegex = /(\d+%\s?(OFF)?)|([₹$]\d+)|(\d+\s?(Rs|₹|%|OFF))/gi;
+
+  let currentText = text;
+  let codeToCopy = explicitCode || "";
+  
+  // Find code part
+  let codeMatch = explicitCode && currentText.includes(explicitCode) 
+    ? { text: explicitCode, index: currentText.indexOf(explicitCode) }
+    : null;
+
+  if (!codeMatch) {
+    const regMatch = currentText.match(codeRegex);
+    if (regMatch) {
+      codeMatch = { text: regMatch[0], index: regMatch.index! };
+      if (!explicitCode) codeToCopy = regMatch[0];
+    }
+  }
+
+  // Find value part
+  let valueMatch = explicitValue && currentText.includes(explicitValue)
+    ? { text: explicitValue, index: currentText.indexOf(explicitValue) }
+    : null;
+
+  if (!valueMatch) {
+    const regMatch = Array.from(currentText.matchAll(valueRegex));
+    if (regMatch.length > 0) {
+      const firstValue = regMatch[0];
+      valueMatch = { text: firstValue[0], index: firstValue.index! };
+    }
+  }
+
+  // Handle priority: if explicitCode/explicitValue exist but not found in text, 
+  // we replace the detected ones or append if none detected? 
+  // User said "replace" essentially by saying priority.
+
+  // To render precisely, we need to collect all segments.
+  const segments: Array<{ text: string; type: 'text' | 'code' | 'value' }> = [];
+  let lastIndex = 0;
+
+  const matches = [
+    ...(codeMatch ? [{ ...codeMatch, type: 'code' as const }] : []),
+    ...(valueMatch ? [{ ...valueMatch, type: 'value' as const }] : [])
+  ].sort((a, b) => a.index - b.index);
+
+  // Avoid overlaps
+  let filteredMatches: typeof matches = [];
+  let currentPos = 0;
+  for (const match of matches) {
+    if (match.index >= currentPos) {
+      filteredMatches.push(match);
+      currentPos = match.index + match.text.length;
+    }
+  }
+
+  filteredMatches.forEach(match => {
+    if (match.index > lastIndex) {
+      segments.push({ text: currentText.substring(lastIndex, match.index), type: 'text' });
+    }
+    
+    // Use explicit values if they exist, even if the text match was different (Priority logic)
+    const displayText = match.type === 'code' ? (explicitCode || match.text) : (explicitValue || match.text);
+    segments.push({ text: displayText, type: match.type });
+    lastIndex = match.index + match.text.length;
+  });
+
+  if (lastIndex < currentText.length) {
+    segments.push({ text: currentText.substring(lastIndex), type: 'text' });
+  }
+
+  // Fallback for cases where no match was found but explicit values exist: 
+  // (Optional: we could append them, but usually text should contain them)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(codeToCopy || text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="max-w-[1440px] mx-auto w-full relative z-10 flex flex-row items-center justify-start lg:justify-center gap-x-4 text-center font-medium overflow-hidden whitespace-nowrap py-0.5">
+      {/* Visual Feedback Overlay for Copy Success - Mobile Only */}
+      {copied && (
+        <div className="absolute inset-0 z-50 flex sm:hidden items-center justify-center bg-gradient-to-r from-[#8B5AB1] via-[#9B6BC1] to-[#8B5AB1] animate-in fade-in zoom-in duration-200">
+          <span className="text-yellow-300 text-[11px] sm:text-[13px] font-extrabold tracking-wider uppercase flex items-center gap-2 drop-shadow-md">
+            PROMOCODE COPIED! APPLY AT CHECKOUT 🎁
+          </span>
+        </div>
+      )}
+
+      <div className="flex items-center lg:animate-none animate-marquee whitespace-nowrap min-w-full lg:min-w-0">
+        <button 
+          onClick={handleCopy}
+          className="group/btn flex items-center justify-center gap-1.5 focus:outline-none flex-shrink-0"
+          title={codeToCopy ? `Click to copy promo code: ${codeToCopy}` : "Click to copy"}
+        >
+          {/* Main Content Segment */}
+          <div className="flex items-center gap-1.5 px-2 sm:px-0">
+            <span className="text-[11px] sm:text-[12.5px] font-bold tracking-[0.05em] uppercase drop-shadow-sm group-hover/btn:text-yellow-100 transition-colors flex items-center">
+              {segments.length > 0 ? segments.map((s, i) => (
+                s.type === 'text' ? (
+                  <span key={i}>{s.text}</span>
+                ) : (
+                  <span key={i} className="text-yellow-300 text-[12px] sm:text-[13.5px] mx-1 font-extrabold shadow-sm group-hover/btn:text-yellow-200 transition-colors drop-shadow-md">
+                    "{s.text}"
+                  </span>
+                )
+              )) : text}
+            </span>
+            <span className="bg-white/20 p-1 rounded-md group-hover/btn:bg-white/30 transition-colors flex items-center justify-center flex-shrink-0 ml-1">
+              {copied ? (
+                <Check size={13} className="text-green-300" strokeWidth={3} />
+              ) : (
+                <Copy size={13} className="text-white/80 group-hover/btn:text-white" strokeWidth={2.5} />
+              )}
+            </span>
+          </div>
+        </button>
+ 
+        <div className="mx-4 h-3 w-px bg-white/30 flex-shrink-0" />
+ 
+        <Link 
+          href="/store" 
+          className="text-[11px] sm:text-[12.5px] font-bold tracking-[0.02em] uppercase text-yellow-300 hover:text-white underline underline-offset-4 decoration-white/40 hover:decoration-white transition-all flex items-center group/link flex-shrink-0 mr-8 sm:mr-0"
+        >
+          SHOP NOW
+          <svg 
+            className="ml-1 w-3 h-3 transform group-hover/link:translate-x-1 transition-transform" 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+ 
+        {/* Duplicated Content for Seamless Loop on Mobile and Tablet */}
+        <div className="flex lg:hidden items-center gap-x-4">
+          <div className="mx-4 h-3 w-px bg-white/30 flex-shrink-0" />
+          <div className="flex items-center gap-1.5 px-2">
+            <span className="text-[11px] font-bold tracking-[0.05em] uppercase drop-shadow-sm flex items-center">
+              {segments.length > 0 ? segments.map((s, i) => (
+                s.type === 'text' ? (
+                  <span key={i}>{s.text}</span>
+                ) : (
+                  <span key={i} className="text-yellow-300 text-[12px] mx-1 font-extrabold">
+                    "{s.text}"
+                  </span>
+                )
+              )) : text}
+            </span>
+            <span className="bg-white/20 p-1 rounded-md flex items-center justify-center flex-shrink-0 ml-1">
+              <Copy size={13} className="text-white/80" strokeWidth={2.5} />
+            </span>
+          </div>
+          <div className="mx-4 h-3 w-px bg-white/30 flex-shrink-0" />
+          <span className="text-[11px] font-bold tracking-[0.02em] uppercase text-yellow-300 flex items-center mr-8">
+            SHOP NOW
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/layout/components/push-notification-manager/index.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+import { registerNotificationToken } from "@core/data/notifications"
+import { Button, IconButton } from "@medusajs/ui"
+import { XMark } from "@medusajs/icons"
+
+interface PushNotificationManagerProps {
+    customerId?: string
+}
+
+const PushNotificationManager: React.FC<PushNotificationManagerProps> = ({ customerId }) => {
+    const [showPrompt, setShowPrompt] = useState(false)
+    const [status, setStatus] = useState<"idle" | "requesting" | "registered" | "denied">("idle")
+
+    useEffect(() => {
+
+
+        const checkStatus = async () => {
+            if (typeof window === "undefined") return
+
+            const permission = Notification.permission
+            const storageKey = customerId ? `fcm_reg_${customerId}` : "fcm_reg_guest"
+            const alreadyRegistered = localStorage.getItem(storageKey)
+
+            console.log("DEBUG: PushNotification Status", {
+                customerId,
+                permission,
+                alreadyRegistered,
+                isDismissed: localStorage.getItem("push_notification_dismissed")
+            })
+
+            if (permission === "default") {
+                const isDismissed = localStorage.getItem("push_notification_dismissed")
+                if (isDismissed === "true") return
+                setShowPrompt(true)
+            } else if (permission === "granted") {
+                if (!alreadyRegistered) {
+                    handleAllow(true)
+                } else {
+                    setStatus("registered")
+                }
+            } else if (permission === "denied") {
+                setStatus("denied")
+            }
+        }
+
+        setTimeout(checkStatus, 1000)
+
+        // Listen for foreground messages
+        const setupListener = async () => {
+            try {
+                const { onMessageListener } = await import("@core/firebase")
+                onMessageListener().then((payload: any) => {
+
+                    if (Notification.permission === "granted") {
+                        new Notification(payload.notification.title, {
+                            body: payload.notification.body,
+                            icon: "/Logo.png"
+                        })
+                    }
+                })
+            } catch (err) {
+                // Listener setup error
+            }
+        }
+        setupListener()
+    }, [customerId])
+
+    const handleAllow = async (isBackground = false) => {
+        if (!isBackground) setStatus("requesting")
+        try {
+            const { requestNotificationPermission } = await import("@core/firebase")
+            const token = await requestNotificationPermission()
+            if (token) {
+                const deviceInfo = {
+                    userAgent: navigator.userAgent,
+                    platform: navigator.platform,
+                    language: navigator.language,
+                }
+                const success = await registerNotificationToken(token, deviceInfo)
+                if (success) {
+                    const storageKey = customerId ? `fcm_reg_${customerId}` : "fcm_reg_guest"
+                    localStorage.setItem(storageKey, "true")
+                    setStatus("registered")
+                    setShowPrompt(false)
+                    if (!isBackground) alert("Notifications enabled successfully!")
+                } else {
+                    setStatus("idle")
+                    if (!isBackground) alert("Failed to register token with backend.")
+                }
+            } else {
+                setStatus("denied")
+            }
+        } catch (error) {
+            setStatus("idle")
+            if (!isBackground) alert("Failed to enable notifications. Please check your browser's settings.")
+        }
+    }
+
+    const handleDismiss = () => {
+        setShowPrompt(false)
+        localStorage.setItem("push_notification_dismissed", "true")
+    }
+
+    if (!customerId || !showPrompt || status === "registered") return null
+
+    return (
+        <div
+            id="push-notification-prompt"
+            className="fixed inset-0 z-[999999] flex items-center justify-center p-6"
+        >
+            {/* Backdrop with elegant blur */}
+            <div
+                className="absolute inset-0 bg-black/40 backdrop-blur-sm animate-in fade-in duration-500"
+                onClick={handleDismiss}
+            />
+
+            <div className="bg-white dark:bg-neutral-900 w-full max-w-[440px] rounded-[32px] shadow-[0_32px_128px_-16px_rgba(0,0,0,0.3)] border border-neutral-100 dark:border-neutral-800 relative overflow-hidden animate-in zoom-in-95 fade-in slide-in-from-bottom-20 duration-500">
+                {/* Subtle Brand Background Blobs */}
+                <div className="absolute top-0 right-0 -mt-16 -mr-16 w-48 h-48 bg-[#8B5AB1]/10 rounded-full blur-[60px]" />
+
+                <div className="relative z-10 p-10">
+                    <div className="flex justify-between items-start mb-8">
+                        <div className="bg-gradient-to-br from-[#A879CF] to-[#8B5AB1] w-16 h-16 rounded-[24px] shadow-[0_20px_40px_-10px_rgba(139,90,177,0.6)] grid place-items-center flex-shrink-0 border border-white/20 relative group">
+                            <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-[24px]" />
+                            <svg
+                                width="34"
+                                height="34"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="white"
+                                strokeWidth="2.2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="drop-shadow-sm"
+                            >
+                                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+                            </svg>
+                        </div>
+                        <button
+                            onClick={handleDismiss}
+                            className="p-2.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full transition-all group active:scale-90"
+                        >
+                            <XMark className="w-6 h-6 text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-white" />
+                        </button>
+                    </div>
+
+                    <div className="text-left">
+                        <h3 className="text-2xl sm:text-3xl font-black text-neutral-900 dark:text-white mb-3 tracking-tight">
+                            {status === "denied" ? "Notifications Blocked" : "Enable Notifications?"}
+                        </h3>
+                        <p className="text-neutral-500 dark:text-neutral-400 text-base sm:text-lg mb-10 leading-relaxed">
+                            {status === "denied"
+                                ? "Please enable notifications in your browser settings to stay updated."
+                                : "Don't miss out! Get real-time updates for your order status and exclusive member-only offers."}
+                        </p>
+                    </div>
+
+                    {status !== "denied" && (
+                        <div className="flex flex-col gap-4">
+                            <button
+                                className="w-full rounded-[20px] h-14 bg-gradient-to-r from-[#8B5AB1] to-[#784ca1] hover:bg-[#7a4f9b] text-white font-bold text-lg shadow-[0_12px_32px_rgba(139,90,177,0.25)] hover:shadow-[0_16px_40px_rgba(139,90,177,0.35)] active:scale-[0.98] transition-all flex items-center justify-center gap-3 disabled:opacity-75"
+                                onClick={() => handleAllow()}
+                                disabled={status === "requesting"}
+                            >
+                                {status === "requesting" ? (
+                                    <>
+                                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                        <span>Connecting...</span>
+                                    </>
+                                ) : (
+                                    "Yes, Notify Me"
+                                )}
+                            </button>
+                            <button
+                                className="w-full rounded-[20px] h-14 bg-white dark:bg-neutral-800 border-2 border-neutral-100 dark:border-neutral-800 text-neutral-500 dark:text-neutral-300 font-bold text-lg hover:bg-neutral-50 dark:hover:bg-neutral-700/50 hover:text-neutral-900 dark:hover:text-white transition-all active:scale-[0.98]"
+                                onClick={handleDismiss}
+                            >
+                                Maybe Later
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PushNotificationManager

package/templates/storefront/src/modules/layout/components/search-panel/index.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import { Popover, PopoverPanel, Transition } from "@headlessui/react"
+import { XMark } from "@medusajs/icons"
+import { Fragment, useState, useEffect, useRef } from "react"
+import { useSearchParams } from "next/navigation"
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type SearchPanelProps = {
+  countryCode: string
+}
+
+const SearchPanel = ({ countryCode }: SearchPanelProps) => {
+  const searchParams = useSearchParams()
+  const q = searchParams.get("q") || ""
+  const [searchQuery, setSearchQuery] = useState(q)
+  const prevOpenRef = useRef(false)
+
+  useEffect(() => {
+    setSearchQuery(q)
+  }, [q])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [])
+
+  return (
+    <div className="h-full">
+      <div className="flex items-center h-full">
+        <Popover className="h-full flex">
+          {({ open, close }) => {
+            // Lock body scroll when panel opens/closes
+            if (open !== prevOpenRef.current) {
+              prevOpenRef.current = open
+              if (open) {
+                document.body.style.overflow = "hidden"
+              } else {
+                document.body.style.overflow = "unset"
+              }
+            }
+
+            return (
+              <>
+                <Popover.Button
+                  data-testid="search-panel-button"
+                  className="relative h-full flex items-center transition-all ease-out duration-200 focus:outline-none hover:opacity-80"
+                >
+                  <Image
+                    src="/Search.svg"
+                    alt="Search"
+                    width={26}
+                    height={26}
+                    className="w-5 h-5"
+                  />
+                </Popover.Button>
+
+                {open && (
+                  <div
+                    className="fixed inset-0 z-[50] bg-black/20 backdrop-blur-sm pointer-events-auto"
+                    onClick={close}
+                    data-testid="search-panel-backdrop"
+                  />
+                )}
+
+                <Transition
+                  show={open}
+                  as={Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="translate-x-full opacity-0"
+                  enterTo="translate-x-0 opacity-100"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="translate-x-0 opacity-100"
+                  leaveTo="translate-x-full opacity-0"
+                >
+                  <PopoverPanel className="fixed right-0 top-0 h-full w-full max-w-[400px] min-[300px]:max-w-[300px] min-[400px]:max-w-[320px] min-[640px]:max-w-[400px] bg-page-bg shadow-2xl z-[51] flex flex-col">
+                    <div className="flex flex-col h-full">
+                      <div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]">
+                        <h2 className="text-xl font-bold text-heading">Search</h2>
+                        <button
+                          data-testid="close-search-button"
+                          onClick={close}
+                          className="p-2 hover:bg-surface-muted transition-colors"
+                        >
+                          <XMark className="w-5 h-5 text-muted" />
+                        </button>
+                      </div>
+
+                      <div className="p-6 border-b border-[var(--color-border)]">
+                        <div className="relative">
+                          <input
+                            type="text"
+                            placeholder="Search products..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="w-full pl-4 pr-12 py-3 border border-[var(--color-border)] bg-surface-muted focus:bg-surface focus:outline-none focus:ring-2 focus:ring-brand-accent transition-all"
+                            autoFocus
+                          />
+                          <LocalizedClientLink
+                            href={`/store?q=${encodeURIComponent(searchQuery)}`}
+                            onClick={close}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 p-2 hover:bg-surface-muted transition-colors"
+                          >
+                            <Image
+                              src="/Search.svg"
+                              alt="Search"
+                              width={20}
+                              height={20}
+                              className="w-5 h-5"
+                            />
+                          </LocalizedClientLink>
+                        </div>
+                      </div>
+
+                      <div className="flex-1 overflow-y-auto p-6">
+                        <div className="flex flex-col items-center justify-center py-12 text-center">
+                          <p className="text-muted">Start typing to search...</p>
+                        </div>
+                      </div>
+                    </div>
+                  </PopoverPanel>
+                </Transition>
+              </>
+            )
+          }}
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+export default SearchPanel
+

package/templates/storefront/src/modules/layout/components/side-menu/index.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { Popover, PopoverPanel, Transition } from "@headlessui/react"
+import { ArrowRightMini, XMark } from "@medusajs/icons"
+import { Text, clx, useToggleState } from "@medusajs/ui"
+import { Fragment } from "react"
+
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import CountrySelect from "../country-select"
+import LanguageSelect from "../language-select"
+import { HttpTypes } from "@medusajs/types"
+import { Locale } from "@core/data/locales"
+
+const SideMenuItems = {
+  Home: "/",
+  Store: "/store",
+  Account: "/account",
+  Cart: "/cart",
+}
+
+type SideMenuProps = {
+  regions: HttpTypes.StoreRegion[] | null
+  locales: Locale[] | null
+  currentLocale: string | null
+}
+
+const SideMenu = ({ regions, locales, currentLocale }: SideMenuProps) => {
+  const countryToggleState = useToggleState()
+  const languageToggleState = useToggleState()
+
+  return (
+    <div className="h-full">
+      <div className="flex items-center h-full">
+        <Popover className="h-full flex">
+          {({ open, close }) => (
+            <>
+              <div className="relative flex h-full">
+                <Popover.Button
+                  data-testid="nav-menu-button"
+                  className="relative h-full flex items-center transition-all ease-out duration-200 focus:outline-none hover:text-ui-fg-base"
+                >
+                  Menu
+                </Popover.Button>
+              </div>
+
+              {open && (
+                <div
+                  className="fixed inset-0 z-[50] bg-black/0 pointer-events-auto"
+                  onClick={close}
+                  data-testid="side-menu-backdrop"
+                />
+              )}
+
+              <Transition
+                show={open}
+                as={Fragment}
+                enter="transition ease-out duration-150"
+                enterFrom="opacity-0"
+                enterTo="opacity-100 backdrop-blur-2xl"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 backdrop-blur-2xl"
+                leaveTo="opacity-0"
+              >
+                <PopoverPanel className="flex flex-col absolute w-full pr-4 sm:pr-0 sm:w-1/3 2xl:w-1/4 sm:min-w-min h-[calc(100vh-1rem)] z-[51] inset-x-0 text-sm text-ui-fg-on-color m-2 backdrop-blur-2xl">
+                  <div
+                    data-testid="nav-menu-popup"
+                    className="flex flex-col h-full bg-[rgba(3,7,18,0.5)] rounded-rounded justify-between p-6"
+                  >
+                    <div className="flex justify-end" id="xmark">
+                      <button data-testid="close-menu-button" onClick={close}>
+                        <XMark />
+                      </button>
+                    </div>
+                    <ul className="flex flex-col gap-6 items-start justify-start">
+                      {Object.entries(SideMenuItems).map(([name, href]) => {
+                        return (
+                          <li key={name}>
+                            <LocalizedClientLink
+                              href={href}
+                              className="text-3xl leading-10 hover:text-ui-fg-disabled"
+                              onClick={close}
+                              data-testid={`${name.toLowerCase()}-link`}
+                            >
+                              {name}
+                            </LocalizedClientLink>
+                          </li>
+                        )
+                      })}
+                    </ul>
+                    <div className="flex flex-col gap-y-6">
+                      {!!locales?.length && (
+                        <div
+                          className="flex justify-between"
+                          onMouseEnter={languageToggleState.open}
+                          onMouseLeave={languageToggleState.close}
+                        >
+                          <LanguageSelect
+                            toggleState={languageToggleState}
+                            locales={locales}
+                            currentLocale={currentLocale}
+                          />
+                          <ArrowRightMini
+                            className={clx(
+                              "transition-transform duration-150",
+                              languageToggleState.state ? "-rotate-90" : ""
+                            )}
+                          />
+                        </div>
+                      )}
+                      <div
+                        className="flex justify-between"
+                        onMouseEnter={countryToggleState.open}
+                        onMouseLeave={countryToggleState.close}
+                      >
+                        {regions && (
+                          <CountrySelect
+                            toggleState={countryToggleState}
+                            regions={regions}
+                          />
+                        )}
+                        <ArrowRightMini
+                          className={clx(
+                            "transition-transform duration-150",
+                            countryToggleState.state ? "-rotate-90" : ""
+                          )}
+                        />
+                      </div>
+                      <Text className="flex justify-between txt-compact-small">
+                        © {new Date().getFullYear()} Chocomelon. All rights
+                        reserved.
+                      </Text>
+                    </div>
+                  </div>
+                </PopoverPanel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+export default SideMenu