robobyte-front-builder 1.0.0

package/src/@core/theme/shadows/index.js

@@ -0,0 +1,61 @@
+const shadows = mode => {
+  if (mode === 'light') {
+    return [
+      'none',
+      '0px 2px 1px -1px rgba(76, 78, 100, 0.2), 0px 1px 1px 0px rgba(76, 78, 100, 0.14), 0px 1px 3px 0px rgba(76, 78, 100, 0.12)',
+      '0px 3px 1px -2px rgba(76, 78, 100, 0.2), 0px 2px 2px 0px rgba(76, 78, 100, 0.14), 0px 1px 5px 0px rgba(76, 78, 100, 0.12)',
+      '0px 4px 8px -4px rgba(76, 78, 100, 0.42)',
+      '0px 6px 18px -8px rgba(76, 78, 100, 0.56)',
+      '0px 3px 5px -1px rgba(76, 78, 100, 0.2), 0px 5px 8px 0px rgba(76, 78, 100, 0.14), 0px 1px 14px 0px rgba(76, 78, 100, 0.12)',
+      '0px 2px 10px 0px rgba(76, 78, 100, 0.22)',
+      '0px 4px 5px -2px rgba(76, 78, 100, 0.2), 0px 7px 10px 1px rgba(76, 78, 100, 0.14), 0px 2px 16px 1px rgba(76, 78, 100, 0.12)',
+      '0px 5px 5px -3px rgba(76, 78, 100, 0.2), 0px 8px 10px 1px rgba(76, 78, 100, 0.14), 0px 3px 14px 2px rgba(76, 78, 100, 0.12)',
+      '0px 5px 6px -3px rgba(76, 78, 100, 0.2), 0px 9px 12px 1px rgba(76, 78, 100, 0.14), 0px 3px 16px 2px rgba(76, 78, 100, 0.12)',
+      '0px 6px 6px -3px rgba(76, 78, 100, 0.2), 0px 10px 14px 1px rgba(76, 78, 100, 0.14), 0px 4px 18px 3px rgba(76, 78, 100, 0.12)',
+      '0px 6px 7px -4px rgba(76, 78, 100, 0.2), 0px 11px 15px 1px rgba(76, 78, 100, 0.14), 0px 4px 20px 3px rgba(76, 78, 100, 0.12)',
+      '0px 7px 8px -4px rgba(76, 78, 100, 0.2), 0px 12px 17px 2px rgba(76, 78, 100, 0.14), 0px 5px 22px 4px rgba(76, 78, 100, 0.12)',
+      '0px 7px 8px -4px rgba(76, 78, 100, 0.2), 0px 13px 19px 2px rgba(76, 78, 100, 0.14), 0px 5px 24px 4px rgba(76, 78, 100, 0.12)',
+      '0px 7px 9px -4px rgba(76, 78, 100, 0.2), 0px 14px 21px 2px rgba(76, 78, 100, 0.14), 0px 5px 26px 4px rgba(76, 78, 100, 0.12)',
+      '0px 8px 9px -5px rgba(76, 78, 100, 0.2), 0px 15px 22px 2px rgba(76, 78, 100, 0.14), 0px 6px 28px 5px rgba(76, 78, 100, 0.12)',
+      '0px 8px 10px -5px rgba(76, 78, 100, 0.2), 0px 16px 24px 2px rgba(76, 78, 100, 0.14), 0px 6px 30px 5px rgba(76, 78, 100, 0.12)',
+      '0px 8px 11px -5px rgba(76, 78, 100, 0.2), 0px 17px 26px 2px rgba(76, 78, 100, 0.14), 0px 6px 32px 5px rgba(76, 78, 100, 0.12)',
+      '0px 9px 11px -5px rgba(76, 78, 100, 0.2), 0px 18px 28px 2px rgba(76, 78, 100, 0.14), 0px 7px 34px 6px rgba(76, 78, 100, 0.12)',
+      '0px 9px 12px -6px rgba(76, 78, 100, 0.2), 0px 19px 29px 2px rgba(76, 78, 100, 0.14), 0px 7px 36px 6px rgba(76, 78, 100, 0.12)',
+      '0px 10px 13px -6px rgba(76, 78, 100, 0.2), 0px 20px 31px 3px rgba(76, 78, 100, 0.14), 0px 8px 38px 7px rgba(76, 78, 100, 0.12)',
+      '0px 10px 13px -6px rgba(76, 78, 100, 0.2), 0px 21px 33px 3px rgba(76, 78, 100, 0.14), 0px 8px 40px 7px rgba(76, 78, 100, 0.12)',
+      '0px 10px 14px -6px rgba(76, 78, 100, 0.2), 0px 22px 35px 3px rgba(76, 78, 100, 0.14), 0px 8px 42px 7px rgba(76, 78, 100, 0.12)',
+      '0px 11px 14px -7px rgba(76, 78, 100, 0.2), 0px 23px 36px 3px rgba(76, 78, 100, 0.14), 0px 9px 44px 8px rgba(76, 78, 100, 0.12)',
+      '0px 11px 15px -7px rgba(76, 78, 100, 0.2), 0px 24px 38px 3px rgba(76, 78, 100, 0.14), 0px 9px 46px 8px rgba(76, 78, 100, 0.12)'
+    ]
+  } else {
+    return [
+      'none',
+      '0px 2px 1px -1px rgba(20, 21, 33, 0.2), 0px 1px 1px 0px rgba(20, 21, 33, 0.14), 0px 1px 3px 0px rgba(20, 21, 33, 0.12)',
+      '0px 3px 1px -2px rgba(20, 21, 33, 0.2), 0px 2px 2px 0px rgba(20, 21, 33, 0.14), 0px 1px 5px 0px rgba(20, 21, 33, 0.12)',
+      '0px 4px 8px -4px rgba(20, 21, 33, 0.42)',
+      '0px 6px 18px -8px rgba(20, 21, 33, 0.56)',
+      '0px 3px 5px -1px rgba(20, 21, 33, 0.2), 0px 5px 8px 0px rgba(20, 21, 33, 0.14), 0px 1px 14px 0px rgba(20, 21, 33, 0.12)',
+      '0px 2px 10px 0px rgba(20, 21, 33,  0.18)',
+      '0px 4px 5px -2px rgba(20, 21, 33, 0.2), 0px 7px 10px 1px rgba(20, 21, 33, 0.14), 0px 2px 16px 1px rgba(20, 21, 33, 0.12)',
+      '0px 5px 5px -3px rgba(20, 21, 33, 0.2), 0px 8px 10px 1px rgba(20, 21, 33, 0.14), 0px 3px 14px 2px rgba(20, 21, 33, 0.12)',
+      '0px 5px 6px -3px rgba(20, 21, 33, 0.2), 0px 9px 12px 1px rgba(20, 21, 33, 0.14), 0px 3px 16px 2px rgba(20, 21, 33, 0.12)',
+      '0px 6px 6px -3px rgba(20, 21, 33, 0.2), 0px 10px 14px 1px rgba(20, 21, 33, 0.14), 0px 4px 18px 3px rgba(20, 21, 33, 0.12)',
+      '0px 6px 7px -4px rgba(20, 21, 33, 0.2), 0px 11px 15px 1px rgba(20, 21, 33, 0.14), 0px 4px 20px 3px rgba(20, 21, 33, 0.12)',
+      '0px 7px 8px -4px rgba(20, 21, 33, 0.2), 0px 12px 17px 2px rgba(20, 21, 33, 0.14), 0px 5px 22px 4px rgba(20, 21, 33, 0.12)',
+      '0px 7px 8px -4px rgba(20, 21, 33, 0.2), 0px 13px 19px 2px rgba(20, 21, 33, 0.14), 0px 5px 24px 4px rgba(20, 21, 33, 0.12)',
+      '0px 7px 9px -4px rgba(20, 21, 33, 0.2), 0px 14px 21px 2px rgba(20, 21, 33, 0.14), 0px 5px 26px 4px rgba(20, 21, 33, 0.12)',
+      '0px 8px 9px -5px rgba(20, 21, 33, 0.2), 0px 15px 22px 2px rgba(20, 21, 33, 0.14), 0px 6px 28px 5px rgba(20, 21, 33, 0.12)',
+      '0px 8px 10px -5px rgba(20, 21, 33, 0.2), 0px 16px 24px 2px rgba(20, 21, 33, 0.14), 0px 6px 30px 5px rgba(20, 21, 33, 0.12)',
+      '0px 8px 11px -5px rgba(20, 21, 33, 0.2), 0px 17px 26px 2px rgba(20, 21, 33, 0.14), 0px 6px 32px 5px rgba(20, 21, 33, 0.12)',
+      '0px 9px 11px -5px rgba(20, 21, 33, 0.2), 0px 18px 28px 2px rgba(20, 21, 33, 0.14), 0px 7px 34px 6px rgba(20, 21, 33, 0.12)',
+      '0px 9px 12px -6px rgba(20, 21, 33, 0.2), 0px 19px 29px 2px rgba(20, 21, 33, 0.14), 0px 7px 36px 6px rgba(20, 21, 33, 0.12)',
+      '0px 10px 13px -6px rgba(20, 21, 33, 0.2), 0px 20px 31px 3px rgba(20, 21, 33, 0.14), 0px 8px 38px 7px rgba(20, 21, 33, 0.12)',
+      '0px 10px 13px -6px rgba(20, 21, 33, 0.2), 0px 21px 33px 3px rgba(20, 21, 33, 0.14), 0px 8px 40px 7px rgba(20, 21, 33, 0.12)',
+      '0px 10px 14px -6px rgba(20, 21, 33, 0.2), 0px 22px 35px 3px rgba(20, 21, 33, 0.14), 0px 8px 42px 7px rgba(20, 21, 33, 0.12)',
+      '0px 11px 14px -7px rgba(20, 21, 33, 0.2), 0px 23px 36px 3px rgba(20, 21, 33, 0.14), 0px 9px 44px 8px rgba(20, 21, 33, 0.12)',
+      '0px 11px 15px -7px rgba(20, 21, 33, 0.2), 0px 24px 38px 3px rgba(20, 21, 33, 0.14), 0px 9px 46px 8px rgba(20, 21, 33, 0.12)'
+    ]
+  }
+}
+
+export default shadows

package/src/@core/theme/shadows.js

@@ -0,0 +1,12 @@
+const Shadows = mode => {
+  const color = mode === 'light' ? 'rgba(76, 78, 100, 0.15)' : 'rgba(0,0,0,0.3)'
+
+  return [
+    'none',
+    `0px 2px 1px -1px ${color}, 0px 1px 1px 0px ${color}, 0px 1px 3px 0px ${color}`,
+    `0px 3px 1px -2px ${color}, 0px 2px 2px 0px ${color}, 0px 1px 5px 0px ${color}`,
+    ...Array(22).fill(`0px 2px 6px ${color}`) // just filler to hit 25
+  ]
+}
+
+export default Shadows

package/src/@core/theme/spacing/index.js

@@ -0,0 +1,3 @@
+export default {
+  spacing: factor => `${0.25 * factor}rem`
+}

package/src/@core/theme/spacing.js

@@ -0,0 +1,5 @@
+const spacing = {
+  spacing: factor => `${0.25 * factor}rem`
+}
+
+export default spacing

package/src/@core/theme/typography/index.js

@@ -0,0 +1,65 @@
+const Typography = theme => {
+  return {
+    h1: {
+      fontWeight: 500,
+      letterSpacing: '-1.5px',
+      color: theme.palette.text.primary
+    },
+    h2: {
+      fontWeight: 500,
+      letterSpacing: '-0.5px',
+      color: theme.palette.text.primary
+    },
+    h3: {
+      fontWeight: 500,
+      letterSpacing: 0,
+      color: theme.palette.text.primary
+    },
+    h4: {
+      fontWeight: 500,
+      letterSpacing: '0.25px',
+      color: theme.palette.text.primary
+    },
+    h5: {
+      fontWeight: 500,
+      letterSpacing: 0,
+      color: theme.palette.text.primary
+    },
+    h6: {
+      letterSpacing: '0.15px',
+      color: theme.palette.text.primary
+    },
+    subtitle1: {
+      letterSpacing: '0.15px',
+      color: theme.palette.text.primary
+    },
+    subtitle2: {
+      letterSpacing: '0.1px',
+      color: theme.palette.text.secondary
+    },
+    body1: {
+      letterSpacing: '0.15px',
+      color: theme.palette.text.primary
+    },
+    body2: {
+      lineHeight: 1.429,
+      letterSpacing: '0.15px',
+      color: theme.palette.text.secondary
+    },
+    button: {
+      letterSpacing: '0.4px',
+      color: theme.palette.text.primary
+    },
+    caption: {
+      lineHeight: 1.25,
+      letterSpacing: '0.4px',
+      color: theme.palette.text.secondary
+    },
+    overline: {
+      letterSpacing: '1px',
+      color: theme.palette.text.secondary
+    }
+  }
+}
+
+export default Typography

package/src/@core/theme/typography.js

@@ -0,0 +1,84 @@
+const typography = fontFamily => ({
+  fontFamily:
+    typeof fontFamily === 'undefined' || fontFamily === ''
+      ? [
+          'Inter',
+          'sans-serif',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          '"Segoe UI"',
+          'Roboto',
+          '"Helvetica Neue"',
+          'Arial',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"'
+        ].join(',')
+      : fontFamily,
+  fontSize: 13.125,
+  h1: {
+    fontSize: '2.875rem',
+    fontWeight: 500,
+    lineHeight: 1.478261
+  },
+  h2: {
+    fontSize: '2.375rem',
+    fontWeight: 500,
+    lineHeight: 1.47368421
+  },
+  h3: {
+    fontSize: '1.75rem',
+    fontWeight: 500,
+    lineHeight: 1.5
+  },
+  h4: {
+    fontSize: '1.5rem',
+    fontWeight: 500,
+    lineHeight: 1.58334
+  },
+  h5: {
+    fontSize: '1.125rem',
+    fontWeight: 500,
+    lineHeight: 1.5556
+  },
+  h6: {
+    fontSize: '0.9375rem',
+    fontWeight: 500,
+    lineHeight: 1.46667
+  },
+  subtitle1: {
+    fontSize: '0.9375rem',
+    lineHeight: 1.46667
+  },
+  subtitle2: {
+    fontSize: '0.8125rem',
+    fontWeight: 400,
+    lineHeight: 1.53846154
+  },
+  body1: {
+    fontSize: '0.9375rem',
+    lineHeight: 1.46667
+  },
+  body2: {
+    fontSize: '0.8125rem',
+    lineHeight: 1.53846154
+  },
+  button: {
+    fontSize: '0.9375rem',
+    lineHeight: 1.46667,
+    textTransform: 'none'
+  },
+  caption: {
+    fontSize: '0.8125rem',
+    lineHeight: 1.38462,
+    letterSpacing: '0.4px'
+  },
+  overline: {
+    fontSize: '0.75rem',
+    lineHeight: 1.16667,
+    letterSpacing: '0.8px'
+  }
+})
+
+export default typography

package/src/@core/utils/create-emotion-cache.js

@@ -0,0 +1,5 @@
+import createCache from '@emotion/cache'
+
+export const createEmotionCache = () => {
+  return createCache({ key: 'css' })
+}

package/src/@core/utils/hex-to-rgba.js

@@ -0,0 +1,11 @@
+export const hexToRGBA = (hexCode, opacity) => {
+  let hex = hexCode.replace('#', '')
+  if (hex.length === 3) {
+    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
+  }
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`
+}

package/src/@core/utils/serverHelpers.js

@@ -0,0 +1,45 @@
+// Next Imports
+import { cookies } from 'next/headers'
+
+// Third-party Imports
+import 'server-only'
+
+// Config Imports
+import themeConfig from 'src/configs/themeConfig'
+
+export const getSettingsFromCookie = async () => {
+  const cookieStore = await cookies()
+  const cookieName = themeConfig.settingsCookieName
+
+  return JSON.parse(cookieStore.get(cookieName)?.value || '{}')
+}
+
+export const getMode = async () => {
+  const settingsCookie = await getSettingsFromCookie()
+
+  // Get mode from cookie or fallback to theme config
+  const _mode = settingsCookie.mode || themeConfig.mode
+
+  return _mode
+}
+
+export const getSystemMode = async () => {
+  const cookieStore = await cookies()
+  const mode = await getMode()
+  const colorPrefCookie = cookieStore.get('colorPref')?.value || 'light'
+
+  return (mode === 'system' ? colorPrefCookie : mode) || 'light'
+}
+
+export const getServerMode = async () => {
+  const mode = await getMode()
+  const systemMode = await getSystemMode()
+
+  return mode === 'system' ? systemMode : mode
+}
+
+export const getSkin = async () => {
+  const settingsCookie = await getSettingsFromCookie()
+
+  return settingsCookie.skin || 'default'
+}

package/src/@menu/components/RouterLink.jsx

@@ -0,0 +1,18 @@
+'use client'
+
+// React Imports
+import { forwardRef } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+
+export const RouterLink = forwardRef((props, ref) => {
+  // Props
+  const { href, className, ...other } = props
+
+  return (
+    <Link ref={ref} href={href} className={className} {...other}>
+      {props.children}
+    </Link>
+  )
+})

package/src/@menu/components/horizontal-menu/HorizontalNav.jsx

@@ -0,0 +1,88 @@
+'use client'
+
+// React Imports
+import { useEffect, useRef } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import VerticalNavInHorizontal from './VerticalNavInHorizontal'
+
+// Hook Imports
+import useMediaQuery from '../../hooks/useMediaQuery'
+import useHorizontalNav from '../../hooks/useHorizontalNav'
+
+// Util Imports
+import { horizontalNavClasses } from '../../utils/menuClasses'
+
+// Styled Component Imports
+import StyledHorizontalNav from '../../styles/horizontal/StyledHorizontalNav'
+
+// Default Config Imports
+import { defaultBreakpoints } from '../../defaultConfigs'
+
+const HorizontalNav = props => {
+  // Props
+  const {
+    switchToVertical = false,
+    hideMenu = false,
+    breakpoint = 'lg',
+    customBreakpoint,
+    breakpoints,
+    customStyles,
+    className,
+    children,
+    verticalNavProps,
+    verticalNavContent: VerticalNavContent
+  } = props
+
+  // Vars
+  const mergedBreakpoints = { ...defaultBreakpoints, ...breakpoints }
+  const horizontalMenuClasses = classnames(horizontalNavClasses.root, className)
+
+  // Refs
+  const prevBreakpoint = useRef(false)
+
+  // Hooks
+  const { updateIsBreakpointReached } = useHorizontalNav()
+
+  // Find the breakpoint from which screen size responsive behavior should enable and if its reached or not
+  const breakpointReached = useMediaQuery(customBreakpoint ?? (breakpoint ? mergedBreakpoints[breakpoint] : breakpoint))
+
+  // Set the breakpointReached value in the state
+  useEffect(() => {
+    if (prevBreakpoint.current === breakpointReached) return
+    updateIsBreakpointReached(breakpointReached)
+    prevBreakpoint.current = breakpointReached
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [breakpointReached])
+
+  // If switchToVertical is true, then render the VerticalNav component if breakpoint is reached
+  if (switchToVertical && breakpointReached) {
+    return (
+      <VerticalNavInHorizontal
+        breakpoint={breakpoint}
+        className={horizontalMenuClasses}
+        customBreakpoint={customBreakpoint}
+        verticalNavProps={verticalNavProps}
+      >
+        {VerticalNavContent && <VerticalNavContent>{children}</VerticalNavContent>}
+      </VerticalNavInHorizontal>
+    )
+  }
+
+  // If hideMenu is true, then hide the HorizontalNav component if breakpoint is reached
+  if (hideMenu && breakpointReached) {
+    return null
+  }
+
+  // If switchToVertical & hideMenu are false, then render the HorizontalNav component
+  return (
+    <StyledHorizontalNav customStyles={customStyles} className={horizontalMenuClasses}>
+      {children}
+    </StyledHorizontalNav>
+  )
+}
+
+export default HorizontalNav

package/src/@menu/components/horizontal-menu/Menu.jsx

@@ -0,0 +1,83 @@
+'use client'
+
+// React Imports
+import { createContext, forwardRef, useMemo } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { FloatingTree } from '@floating-ui/react'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+// Styled Component Imports
+import StyledHorizontalMenu from '../../styles/horizontal/StyledHorizontalMenu'
+
+// Style Imports
+import styles from '../../styles/horizontal/horizontalUl.module.css'
+
+// Default Config Imports
+import { horizontalSubMenuToggleDuration } from '../../defaultConfigs'
+
+export const HorizontalMenuContext = createContext({})
+
+const Menu = (props, ref) => {
+  // Props
+  const {
+    children,
+    className,
+    rootStyles,
+    menuItemStyles,
+    triggerPopout = 'hover',
+    browserScroll = false,
+    transitionDuration = horizontalSubMenuToggleDuration,
+    renderExpandIcon,
+    renderExpandedMenuItemIcon,
+    popoutMenuOffset = { mainAxis: 0 },
+    textTruncate = true,
+    verticalMenuProps,
+    ...rest
+  } = props
+
+  const providerValue = useMemo(
+    () => ({
+      triggerPopout,
+      browserScroll,
+      menuItemStyles,
+      renderExpandIcon,
+      renderExpandedMenuItemIcon,
+      transitionDuration,
+      popoutMenuOffset,
+      textTruncate,
+      verticalMenuProps
+    }),
+    [
+      triggerPopout,
+      browserScroll,
+      menuItemStyles,
+      renderExpandIcon,
+      renderExpandedMenuItemIcon,
+      transitionDuration,
+      popoutMenuOffset,
+      textTruncate,
+      verticalMenuProps
+    ]
+  )
+
+  return (
+    <HorizontalMenuContext.Provider value={providerValue}>
+      <FloatingTree>
+        <StyledHorizontalMenu
+          ref={ref}
+          className={classnames(menuClasses.root, className)}
+          rootStyles={rootStyles}
+          {...rest}
+        >
+          <ul className={styles.root}>{children}</ul>
+        </StyledHorizontalMenu>
+      </FloatingTree>
+    </HorizontalMenuContext.Provider>
+  )
+}
+
+export default forwardRef(Menu)

package/src/@menu/components/horizontal-menu/MenuButton.jsx

@@ -0,0 +1,100 @@
+// React Imports
+import { cloneElement, createElement, forwardRef } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { css } from '@emotion/react'
+
+// Component Imports
+import { RouterLink } from '../RouterLink'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+export const menuButtonStyles = props => {
+  // Props
+  const { level, disabled, children } = props
+
+  return css({
+    display: 'flex',
+    alignItems: 'center',
+    minBlockSize: '30px',
+    textDecoration: 'none',
+    color: 'inherit',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    paddingInline: '20px',
+    '&:hover': {
+      backgroundColor: '#f3f3f3'
+    },
+    '&:focus-visible': {
+      outline: 'none',
+      backgroundColor: '#f3f3f3'
+    },
+    ...(disabled && {
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: '#adadad'
+    }),
+
+    // All the active styles are applied to the button including menu items or submenu
+    [`&.${menuClasses.active}`]: {
+      ...(level === 0
+        ? {
+            color: 'white',
+            backgroundColor: '#765feb'
+          }
+        : {
+            ...(children ? { backgroundColor: '#f3f3f3' } : { color: '#765feb', backgroundColor: '#765feb1f' })
+          })
+    }
+  })
+}
+
+const MenuButton = ({ className, component, children, ...rest }, ref) => {
+  if (component) {
+    // If component is a string, create a new element of that type
+    if (typeof component === 'string') {
+      return createElement(
+        component,
+        {
+          className: classnames(className),
+          ...rest,
+          ref
+        },
+        children
+      )
+    } else {
+      // Otherwise, clone the element
+      const { className: classNameProp, ...props } = component.props
+
+      return cloneElement(
+        component,
+        {
+          className: classnames(className, classNameProp),
+          ...rest,
+          ...props,
+          ref
+        },
+        children
+      )
+    }
+  } else {
+    // If there is no component but href is defined, render RouterLink
+    if (rest.href) {
+      return (
+        <RouterLink ref={ref} className={className} href={rest.href} {...rest}>
+          {children}
+        </RouterLink>
+      )
+    } else {
+      return (
+        <a ref={ref} className={className} {...rest}>
+          {children}
+        </a>
+      )
+    }
+  }
+}
+
+export default forwardRef(MenuButton)