Enhance frontend components and introduce new features

- Updated PasswordInput component with improved styling and touch manipulation support.
- Added new IconMenu component for consistent icon representation in the UI.
- Refactored MapControls and introduced MapControlsContent for better organization and usability.
- Implemented suppress-leaflet-deprecation plugin to handle known warnings in Firefox.
- Enhanced default layout with a responsive drawer for mobile navigation and improved user experience.

frontend-nuxt/components/PasswordInput.vue

@@ -1,49 +1,49 @@
-<template>
-  <fieldset class="fieldset">
-    <label v-if="label" class="label" :for="inputId">
-      <span>{{ label }}</span>
-    </label>
-    <div class="relative flex">
-      <input
-        :id="inputId"
-        :value="modelValue"
-        :type="showPass ? 'text' : 'password'"
-        class="input flex-1 pr-10"
-        :placeholder="placeholder"
-        :required="required"
-        :autocomplete="autocomplete"
-        :readonly="readonly"
-        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      />
-      <button
-        type="button"
-        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-square min-h-0 h-8 w-8"
-        :aria-label="showPass ? 'Hide password' : 'Show password'"
-        @click="showPass = !showPass"
-      >
-        <icons-icon-eye-off v-if="showPass" />
-        <icons-icon-eye v-else />
-      </button>
-    </div>
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    modelValue: string
-    label?: string
-    placeholder?: string
-    required?: boolean
-    autocomplete?: string
-    readonly?: boolean
-    inputId?: string
-  }>(),
-  { required: false, autocomplete: 'off', inputId: undefined }
-)
-
-const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
-
-const showPass = ref(false)
-const inputId = computed(() => props.inputId ?? `password-${Math.random().toString(36).slice(2, 9)}`)
-</script>
+<template>
+  <fieldset class="fieldset">
+    <label v-if="label" class="label" :for="inputId">
+      <span>{{ label }}</span>
+    </label>
+    <div class="relative flex">
+      <input
+        :id="inputId"
+        :value="modelValue"
+        :type="showPass ? 'text' : 'password'"
+        class="input flex-1 pr-10 min-h-11 touch-manipulation"
+        :placeholder="placeholder"
+        :required="required"
+        :autocomplete="autocomplete"
+        :readonly="readonly"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      />
+      <button
+        type="button"
+        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-square min-h-9 min-w-9 touch-manipulation"
+        :aria-label="showPass ? 'Hide password' : 'Show password'"
+        @click="showPass = !showPass"
+      >
+        <icons-icon-eye-off v-if="showPass" />
+        <icons-icon-eye v-else />
+      </button>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label?: string
+    placeholder?: string
+    required?: boolean
+    autocomplete?: string
+    readonly?: boolean
+    inputId?: string
+  }>(),
+  { required: false, autocomplete: 'off', inputId: undefined }
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const showPass = ref(false)
+const inputId = computed(() => props.inputId ?? `password-${Math.random().toString(36).slice(2, 9)}`)
+</script>