From 3d9c5553ebb246dc0f91514c225ecd479d2f75c0 Mon Sep 17 00:00:00 2001
From: Kyrylo Karalyus <kyrylokaralyus@protonmail.com>
Date: Fri, 3 Nov 2023 16:42:31 +0100
Subject: [PATCH] DEV

---
 .../menu/MenuNavigationDropdown.vue           | 51 +++++++++++++++++++
 frontend/layouts/sidebar.vue                  |  4 +-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/menu/MenuNavigationDropdown.vue

diff --git a/frontend/components/menu/MenuNavigationDropdown.vue b/frontend/components/menu/MenuNavigationDropdown.vue
new file mode 100644
index 000000000..145301306
--- /dev/null
+++ b/frontend/components/menu/MenuNavigationDropdown.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="fixed top-12 bg-dark-gray
+    z-20 w-full h-10 border-b-2 md:hidden bg-light-header dark:bg-dark-header border-light-section-div dark:border-dark-section-div
+    ">
+      <Listbox v-model="selectedPerson">
+        <ListboxButton class="flex items-center align-middle text-white
+        relative w-full py-2 pl-3 pr-10 text-left shadow-md">
+          <Icon name="bi:person-fill-check" class="w-5 h-5 mr-2 align-middle" aria-hidden="true" />
+          {{ selectedPerson.name }}
+          <span
+          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+          >
+            <Icon name="tabler:chevron-down" class="w-5 h-5 mr-2 align-middle" aria-hidden="true" />
+
+          </span>
+        </ListboxButton>
+        <ListboxOptions class="bg-dark-gray">
+          <ListboxOption
+            v-for="person in people"
+            :key="person.id"
+            :value="person"
+            :disabled="person.unavailable"
+            class="text-white"
+          >
+            {{ person.name }}
+          </ListboxOption>
+        </ListboxOptions>
+      </Listbox>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
+const people = [
+  { id: 1, name: 'Durward Reynolds', unavailable: false },
+  { id: 2, name: 'Kenton Towne', unavailable: false },
+  { id: 3, name: 'Therese Wunsch', unavailable: false },
+  { id: 4, name: 'Benedict Kessler', unavailable: true },
+  { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+const selectedPerson = ref(people[0])
+</script>
+
+<style scoped>
+.bg-dark-gray {
+  background-color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/layouts/sidebar.vue b/frontend/layouts/sidebar.vue
index 6266afb01..3d3ee5a2d 100644
--- a/frontend/layouts/sidebar.vue
+++ b/frontend/layouts/sidebar.vue
@@ -1,5 +1,6 @@
 <template>
   <HeaderMobile />
+  <MenuNavigationDropdown />
   <SidebarLeft
     @mouseover="sidebarHover = true"
     @mouseleave="sidebarHover = false"
@@ -39,7 +40,8 @@
 
 <script setup lang="ts">
 const sidebar = useSidebar();
-let sidebarHover: boolean;
+
+let sidebarHover: boolean = false;
 
 onMounted(() => {
   window.addEventListener("resize", handleWindowSizeChange);