Add Create Item button on location page (#1189)

* this is a test. add item fucntionality added

* feat: collapse text on mobile

---------

Co-authored-by: Ell <tonya@tokia.dev>

Author: mesab0ogie

frontend/pages/location/[id].vue

@@ -5,6 +5,7 @@
   import { useLocationStore } from "~~/stores/locations";
   import MdiLoading from "~icons/mdi/loading";
   import MdiPackageVariant from "~icons/mdi/package-variant";
+  import MdiPlus from "~icons/mdi/plus";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiDelete from "~icons/mdi/delete";
   import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -97,6 +98,10 @@
     openDialog(DialogID.UpdateLocation);
   }
 
+  function openCreateItem() {
+    openDialog(DialogID.CreateItem);
+  }
+
   async function update() {
     updating.value = true;
     updateData.parentId = parent.value?.id || null;
@@ -217,15 +222,25 @@
                 </div>
               </div>
             </div>
-            <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
+            <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-2">
               <LabelMaker :id="location.id" type="location" />
-              <Button @click="openUpdate">
+              <Button @click="openCreateItem" class="w-9 md:w-auto">
+                <MdiPlus name="mdi-plus" />
+                <span class="hidden md:inline">
+                  {{ $t("components.item.create_modal.title") }}
+                </span>
+              </Button>
+              <Button @click="openUpdate" class="w-9 md:w-auto">
                 <MdiPencil name="mdi-pencil" />
-                {{ $t("global.edit") }}
+                <span class="hidden md:inline">
+                  {{ $t("global.edit") }}
+                </span>
               </Button>
-              <Button variant="destructive" @click="confirmDelete()">
+              <Button variant="destructive" @click="confirmDelete()" class="w-9 md:w-auto">
                 <MdiDelete name="mdi-delete" />
-                {{ $t("global.delete") }}
+                <span class="hidden md:inline">
+                  {{ $t("global.delete") }}
+                </span>
               </Button>
             </div>
           </div>