adding mobile menu script;

app/Factories/QrCodeFactory.php

@@ -6,30 +6,33 @@
 use Da\QrCode\Contracts\QrCodeInterface;
 use Da\QrCode\QrCode;
 use Exception;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
 
 class QrCodeFactory
 {
+    use LivewireAlert;
+
     /**
      * @param int $format
      * @param array $content
      * @return QrCodeInterface
      * @throws Exception
      */
-    public static function build(int $format, array $content): QrCodeInterface
+    public static function build(int $format, array $content): ?QrCodeInterface
     {
         try {
             $format = FormatEnum::tryFrom($format);
-
-            if ($format->value == FormatEnum::Text->value) {
-                return new QrCode($content['text']);
-            }
-
-            $formatClass = "\\Da\\QrCode\\Format\\{$format->name}Format";
-            $qrCodeFormat = new $formatClass($content);
-
-            return new QrCode($qrCodeFormat);
         } catch (Exception $exception) {
             throw new Exception('Format must be enum of ' . FormatEnum::class);
         }
+
+        if ($format->value == FormatEnum::Text->value) {
+            return new QrCode($content['text']);
+        }
+
+        $formatClass = "\\Da\\QrCode\\Format\\{$format->name}Format";
+        $qrCodeFormat = new $formatClass($content);
+
+        return new QrCode($qrCodeFormat);
     }
 }

app/Livewire/QrCodeComponent.php

@@ -9,11 +9,14 @@
 use Da\QrCode\QrCode;
 use Da\QrCode\Writer\JpgWriter;
 use Illuminate\Support\Facades\Storage;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
 use Livewire\Attributes\On;
 use Livewire\Component;
-
+use Exception;
 class QrCodeComponent extends Component
 {
+    use LivewireAlert;
+
     protected QrCode $qrCode;
     public int $format;
     public array $options;
@@ -27,12 +30,17 @@ class QrCodeComponent extends Component
 
     public function mount()
     {
-        $this->format= FormatEnum::Text->value;
+        $this->init();
+    }
+
+    protected function init($notify = false)
+    {
+        $this->format = FormatEnum::Text->value;
         $this->options = [
             'text' => 'https://2am.tech',
         ];
 
-        $this->build();
+        $this->build(notify: $notify);
     }
 
     #[On('create-qr-code')]
@@ -85,44 +93,55 @@ public function applyLogo(string $path)
         $this->build();
     }
 
-    public function build()
+    public function build($notify = true)
     {
         $this->normalizeOptions();
 
-        /** @var QrCode $qrCode */
-        $qrCode = QrCodeFactory::build($this->format, $this->options);
-
-        if ($bgColors = $this->colors['background']) {
-            $qrCode->setBackgroundColor($bgColors['r'], $bgColors['g'], $bgColors['b']);
-        }
-
-        if ($fgColors = $this->colors['foreground']) {
-            $qrCode->setForegroundColor($fgColors['r'], $fgColors['g'], $fgColors['b']);
-        }
-
-        if ($label = $this->label) {
-            $qrCode->setLabel(new Label(
-                text: $label['label'],
-                fontSize: $label['size'],
-                align: $label['align'],
-            ));
-        }
-
-        if ($margins = $this->margins) {
-            $qrCode->setMargin($margins);
-        }
-
-        if (! is_null($this->logoPath)) {
-            $qrCode->setLogo($this->logoPath)
-                ->setLogoWidth(((int) $qrCode->getSize() * 0.16));
+        try {
+            /** @var QrCode $qrCode */
+            $qrCode = QrCodeFactory::build($this->format, $this->options);
+
+            if ($bgColors = $this->colors['background']) {
+                $qrCode->setBackgroundColor($bgColors['r'], $bgColors['g'], $bgColors['b']);
+            }
+
+            if ($fgColors = $this->colors['foreground']) {
+                $qrCode->setForegroundColor($fgColors['r'], $fgColors['g'], $fgColors['b']);
+            }
+
+            if ($label = $this->label) {
+                $qrCode->setLabel(new Label(
+                    text: $label['label'],
+                    fontSize: $label['size'],
+                    align: $label['align'],
+                ));
+            }
+
+            if ($margins = $this->margins) {
+                $qrCode->setMargin($margins);
+            }
+
+            if (! is_null($this->logoPath)) {
+                $qrCode->setLogo($this->logoPath)
+                    ->setLogoWidth(((int) $qrCode->getSize() * 0.16));
+            }
+
+            $this->qrCode = $qrCode;
+
+            if ($notify) {
+                $this->alert('success', 'QR Code updated!');
+            }
+        } catch (Exception $exception) {
+            $this->init();
+            $this->alert('error', $exception->getMessage());
         }
-
-        $this->qrCode = $qrCode;
     }
 
     public function getUri()
     {
-        return $this->qrCode->writeDataUri();
+        return isset($this->qrCode)
+            ? $this->qrCode->writeDataUri()
+            : '';
     }
 
     public function download(string $extension)

composer.json

@@ -8,6 +8,7 @@
         "php": "^8.1",
         "2amigos/qrcode-library": "3.0",
         "guzzlehttp/guzzle": "^7.2",
+        "jantinnerezo/livewire-alert": "3.0@beta",
         "laravel/framework": "^10.10",
         "laravel/sanctum": "^3.2",
         "laravel/tinker": "^2.8",

resources/css/app.css

@@ -23,3 +23,17 @@
     width: 22px;
     height: 22px;
 }
+
+.options-menu-mobile {
+    display: none !important;
+}
+
+@media (max-width: 767px) {
+    .options-menu {
+        display: none !important;
+    }
+
+    .options-menu-mobile {
+        display: block !important;
+    }
+}

resources/js/app.js

@@ -1,5 +1,6 @@
 import './bootstrap';
 import Alpine from 'alpinejs'
+import $ from "cash-dom";
 window.Alpine = Alpine
 Alpine.start()
 
@@ -12,6 +13,39 @@ window.addEventListener("scroll", (event) => {
     }
 });
 
+$(function () {
+    let body = $('body');
+
+    body.on('click', '.header__addon button', () => {
+        let el = $('.header__addon button');
+
+        if (el.hasClass('btn--sandwich')) {
+            menuOpened()
+        }
+        else {
+            menuClosed()
+        }
+    })
+
+    function menuOpened() {
+        let el = $('.header__addon button');
+
+        el.addClass('btn--close')
+        el.removeClass('btn--sandwich')
+        $('body').addClass('overflow--hidden')
+        $('.menu').addClass('active')
+    }
+
+    function menuClosed() {
+        let el = $('.header__addon button');
+
+        el.addClass('btn--sandwich')
+        el.removeClass('btn--close')
+        $('body').removeClass('overflow--hidden')
+        $('.menu').removeClass('active')
+    }
+})
+
 let parseLinks = () => {
     let links = document.querySelectorAll('a');
 

resources/views/components/icons/plus.blade.php

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+</svg>

resources/views/components/inputs/success-button.blade.php

@@ -1,6 +1,6 @@
 <button {!! $attributes->merge([
                 'class' => 'rounded-md bg-tred py-2 px-2 text-white font-bold text-xs shadow
-                hover:bg-red-500 transition duration-150'
+                hover:bg-red-500 transition duration-150 focus:outline-none outline-none'
             ]) !!}
         type="button"
 >

resources/views/components/layout.blade.php

@@ -56,9 +56,12 @@ function gtag() {
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/themes/airbnb.min.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
     <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <x-livewire-alert::scripts />
     @vite('resources/css/app.css')
     @vite('resources/css/2am.css')
     @vite('resources/js/app.js')

resources/views/components/menu-item.blade.php

@@ -4,6 +4,7 @@
             transition duration-100'
     ]) }}
     {{ $attributes->whereStartsWith('wire:click') }}
+    {{ $attributes->whereDoesntStartWith('wire:click') }}
     >
     {{ $slot }}
 </div>