Remove flowbite from the main navigation bar

The main navigation bar (on the top) uses the Collapsible components
from Flowbite to provide actions for the hamburger menu. It turns out
that Flowbite is a bit annoying to get right with SSR, so let's just
remove it and rely in pure Vue concepts for something as trivial as a
collapsible menu bar.

While at it, also
* Follow the style guide more closely and display a close button
  whenever the menu is open.
* Reduce the amount of executed JavaScript.
* Use icons directly from the icon library.

components/FfNavMain.vue

@@ -4,8 +4,6 @@ The main navigation bar
 Style guide reference: Web components/Navigation/Navbar
 
 TODO:
-- Mobile: the distinct open and close buttons are not implemented.
-  Instead, the hamburger menu is shown unconditionally.
 - Desktop: the menu items are right-aligned, while (maybe) only the
   "Get involved" button is supposed to be right-aligned, and the remainder of
   the items should be centered.
@@ -21,19 +19,18 @@ TODO:
         <!-- logo -->
         <FfLinkLarge to="/" class="flex-none">
           <span class="sr-only">FOSSi Foundation home page</span>
-          <NuxtImg class="w-[180px]" width="180" height="60" alt="FOSSi Foundation logo" src="/images/fossi-logo-full.svg" />
+          <NuxtImg class="w-[180px]" width="180" height="60" alt="The FOSSi Foundation" src="/images/fossi-logo-full.svg" />
         </FfLinkLarge>
 
         <!-- hamburger icon (phone/tablet only) -->
-        <button data-collapse-toggle="navbar" type="button" class="inline-flex items-center desktop:hidden" aria-controls="navbar" aria-expanded="false">
+        <button @click="showMobileNavbar = !showMobileNavbar" type="button" class="inline-flex items-center desktop:hidden" aria-controls="navbar" :aria-expanded="showMobileNavbar">
           <span class="sr-only">Open main menu</span>
-          <svg class="w-48 h-48" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
-          </svg>
+          <IconPhList v-if="!showMobileNavbar" class="w-48 h-48"/>
+          <IconPhX v-if="showMobileNavbar" class="w-48 h-48"/>
         </button>
 
         <!-- navigation items -->
-        <div class="hidden items-center justify-between w-full desktop:flex desktop:w-auto desktop:order-1" id="navbar">
+        <div class="items-center justify-between w-full desktop:flex desktop:w-auto desktop:order-1" :class="{ 'hidden': !showMobileNavbar }">
           <ul class="flex flex-col desktop:px-16 mt-24 desktop:mt-0 space-y-20 desktop:flex-row desktop:space-y-0 desktop:space-x-16 desktop:items-center">
             <li>
               <FfLinkLarge class="block" to="/">Home</FfLinkLarge>
@@ -63,16 +60,13 @@ TODO:
   </FfContainer>
 </template>
 
-<script setup>
-import { onMounted } from "vue";
-import { useFlowbite } from '~/composables/useFlowbite';
-import { initCollapses } from 'flowbite';
+<script setup lang="ts">
+import { ref } from "vue";
 
-// JS for the mobile menu: initialize components based on data attribute
-// selectors
-onMounted(() => {
-  useFlowbite(() => {
-    initCollapses();
-  })
-})
+import IconPhList from '~icons/ph/list-bold';
+import IconPhX from '~icons/ph/x-bold';
+
+// Show the mobile navigation bar? (The desktop navigation bar is always
+// visible.) Default to false.
+const showMobileNavbar = ref(false);
 </script>

package.json

@@ -22,7 +22,6 @@
     "@fontsource/ibm-plex-mono": "^5.0.0",
     "@nuxt/devtools": "^1.0.0",
     "@nuxt/image": "^1.2.0",
-    "flowbite": "^2.0.0",
     "nuxt-content-assets": "^1.3.3"
   },
   "resolutions": {

tailwind.config.js

@@ -122,7 +122,4 @@ export default {
       'desktop': '1280px', // xl
     },
   },
-  plugins: [
-    require('flowbite/plugin')
-  ],
 }

yarn.lock

@@ -1243,11 +1243,6 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
-"@popperjs/core@^2.9.3":
-  version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@rollup/plugin-alias@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz#99a94accc4ff9a3483be5baeedd5d7da3b597e93"
@@ -3195,23 +3190,6 @@ flatted@^3.3.1:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
-flowbite-datepicker@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/flowbite-datepicker/-/flowbite-datepicker-1.3.0.tgz#60b2423dfa1013e61c50babcf8512501d8b835ee"
-  integrity sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==
-  dependencies:
-    "@rollup/plugin-node-resolve" "^15.2.3"
-    flowbite "^2.0.0"
-
-flowbite@^2.0.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/flowbite/-/flowbite-2.4.1.tgz#d177173b13247186c4768c4a8a7cc46ce5c260eb"
-  integrity sha512-I++vDsSOOlzHNuxY2OcFMNVC4CNzpPU2K14YHJ81cYrANXdzgizqniMB/1KQ219x8fqw+S0msY9Q45ZSXDqAPw==
-  dependencies:
-    "@popperjs/core" "^2.9.3"
-    flowbite-datepicker "^1.3.0"
-    mini-svg-data-uri "^1.4.3"
-
 foreground-child@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.2.1.tgz#767004ccf3a5b30df39bed90718bab43fe0a59f7"
@@ -4742,11 +4720,6 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
-mini-svg-data-uri@^1.4.3:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
-  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
-
 minimatch@^3.0.4, minimatch@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"