📱mobile responsiveness for navbar Menu

components/effects/glitch-button.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface GlitchButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+  variant?: 'default' | 'subtle'
+  glitchColor?: 'cyan' | 'pink' | 'purple' | 'magenta'
+  disabled?: boolean
+}
+
+export function GlitchButton({
+  children,
+  variant = 'default',
+  glitchColor = 'cyan',
+  disabled = false,
+  className,
+  ...props
+}: GlitchButtonProps) {
+  const glitchClasses = !disabled
+    ? cn(
+        'glitch-btn-cyber',
+        variant === 'subtle' && 'glitch-btn-subtle',
+        'relative'
+      )
+    : ''
+
+  const overlayColorClass = {
+    cyan: '',
+    pink: 'glitch-overlay-pink',
+    purple: 'glitch-overlay-purple',
+    magenta: 'glitch-overlay-magenta',
+  }[glitchColor]
+
+  return (
+    <button
+      className={cn(glitchClasses, className)}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+
+      {!disabled && (
+        <div
+          className={cn('glitch-overlay', overlayColorClass)}
+          aria-hidden="true"
+        >
+          {children}
+        </div>
+      )}
+    </button>
+  )
+}