Fix file input for mobile

resources/views/components/nav/user-dropdown.blade.php

@@ -3,20 +3,41 @@
     'name' => 'User',
 ])
 
-<div class="dropdown dropdown-end">
-    <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
-        <div class="w-10 rounded-full">
+@php
+    $colors = [
+        '#F44336', '#E91E63', '#9C27B0', '#673AB7',
+        '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',
+        '#009688', '#4CAF50', '#8BC34A', '#CDDC39',
+        '#FFC107', '#FF9800', '#FF5722', '#795548',
+    ];
+
+    $hash = crc32($name);
+    $color = $colors[$hash % count($colors)];
+
+@endphp
+
+<div
+        class="dropdown dropdown-end"
+       >
+    <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar @if(!$avatar) avatar-placeholder @endif">
+        <div class="w-10 rounded-full bg-secondary text-white flex items-center
+        justify-center text-xl font-semibold overflow-hidden"
+             style="background-color: {{ $avatar ? 'transparent' : $color }}">
             @if($avatar)
             <img
                     alt="User avatar"
                     src="{{ $avatar }}" />
             @else
-                {{ strtoupper($name[0]) }}
+                <span>
+                    {{ strtoupper($name[0]) }}
+                </span>
             @endif
         </div>
     </div>
-    <ul tabindex="0"
+    <ul
         class="menu menu-sm dropdown-content bg-primary rounded-box mt-3 w-52 p-2 z-50 drop-shadow-xl">
         {{ $slot }}
     </ul>
-</div>
+
+</div>
+