feat: Added Navbar component

src/components/Navbar/Navbar.vue

@@ -1,61 +1,27 @@
 <template>
-  <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
+  <nav :class="navbarClasses">
     <div class="container flex flex-wrap justify-between items-center mx-auto">
-      <a href="https://flowbite.com/" class="flex items-center">
-<!--        <img src="/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />-->
-        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
-      </a>
-      <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
+      <slot name="logo"/>
+      <button @click="toggleMobileMenu()" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
         <span class="sr-only">Open main menu</span>
-        <svg class="w-6 h-6" 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>
-        <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        <slot name="menu-icon">
+          <svg class="w-6 h-6" 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>
+        </slot>
       </button>
-      <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
-        <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
-          </li>
-          <li>
-            <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
-          </li>
-        </ul>
+      <slot name="default" :isShowMenu="isShowMenu" />
+      <div v-if="slots['right-side']" class="flex md:order-2 hidden md:flex">
+        <slot name="right-side" />
       </div>
     </div>
   </nav>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { useSlots, ref, computed } from 'vue'
+import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
+import classNames from 'classnames'
 
 const props = defineProps({
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  className: {
-    type: String,
-    default: '',
-  },
-  fluid: {
-    type: Boolean,
-    default: false,
-  },
-  menuOpen: {
+  sticky: {
     type: Boolean,
     default: false,
   },
@@ -63,6 +29,36 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  solid: {
+    type: Boolean,
+    default: false,
+  },
 })
+const slots = useSlots()
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('md')
+const isShowMenuOnMobile = ref(false)
+const toggleMobileMenu = useToggle(isShowMenuOnMobile)
+const navbarBaseClasses = ' border-gray-200'
+const navbarFloatClasses = 'fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600'
+const navbarRoundedClasses = 'rounded'
+const navbarSolidClasses = 'p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
+const navbarWhiteClasses = 'bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900'
+
+const navbarClasses = computed(() => {
+  return classNames(
+      navbarBaseClasses,
+      props.sticky ? navbarFloatClasses : '',
+      props.rounded ? navbarRoundedClasses: '',
+      props.solid ? navbarSolidClasses : navbarWhiteClasses,
+  )
+})
+const isShowMenu = computed(() => {
+  if(!isMobile) {
+    return true
+  } else {
+    return isShowMenuOnMobile.value
+  }
+})
 </script>

src/components/Navbar/NavbarCollapse.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="menuClasses">
+    <ul :class="listClasses">
+      <slot name="default" />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import classNames from 'classnames'
+import { computed } from 'vue'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('md')
+const props = defineProps({
+  isShowMenu: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const menuClassesDefault = 'w-full md:block md:w-auto'
+const listClassesDefault = 'flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700'
+const mobileListClasses = 'bg-gray-50'
+const menuClasses = computed(() => {
+  return classNames(menuClassesDefault, props.isShowMenu ? '': 'hidden')
+})
+const listClasses = computed(() => {
+  return classNames(listClassesDefault, isMobile.value ? mobileListClasses : '')
+})
+</script>

src/components/Navbar/NavbarLink.ts

@@ -0,0 +1,61 @@
+import { defineComponent, h } from 'vue'
+import classNames from 'classnames'
+
+export default defineComponent({
+    name: 'NavbarLink',
+    props: {
+        link: {
+            type: String,
+            default: '/',
+        },
+        isActive: {
+            type: Boolean,
+            default: false,
+        },
+        component: {
+            type: [Object, String],
+            default: 'a',
+        },
+        linkAttr: {
+            type: String,
+            default: 'href',
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: [
+        'click',
+    ],
+    setup(props, { slots, emit }) {
+        const currentPageClasses = 'bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white'
+        const defaultStateClasses = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent'
+        const defaultClasses = 'block py-2 pr-4 pl-3 rounded md:p-0'
+        const linkClasses = classNames(
+            defaultClasses,
+            props.isActive ? currentPageClasses : defaultStateClasses,
+        )
+        const handleClick = (event: Event) => {
+            if (props.disabled) {
+                return
+            }
+            emit('click', event)
+        }
+        return () =>
+            h('li', null, h(
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                props.component,
+                {
+                    ...props,
+                    class: linkClasses,
+                    [props.linkAttr]: props.link,
+                    onClick: handleClick,
+                },
+                {
+                    default: () => slots.default && slots.default(),
+                },
+            ))
+    },
+})

src/components/Navbar/NavbarLogo.ts

@@ -0,0 +1,60 @@
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+    name: 'NavbarLogo',
+    props: {
+        link: {
+            type: String,
+            default: '/',
+        },
+        imageUrl: {
+            type: String,
+            default: '/assets/logo.svg',
+        },
+        alt: {
+            type: String,
+            default: 'Logo',
+        },
+        component: {
+            type: [Object, String],
+            default: 'a',
+        },
+        linkAttr: {
+            type: String,
+            default: 'href',
+        },
+    },
+    emits: [
+        'click',
+    ],
+    setup(props, { slots }) {
+        return () =>
+            h(
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                props.component,
+                {
+                    [props.linkAttr]: props.link,
+                    class: 'flex items-center',
+                },
+                {
+                    default: () => [
+                        h(
+                            'img',
+                            {
+                                src: props.imageUrl,
+                                class: 'mr-3 h-6 sm:h-10',
+                                alt: props.alt,
+                            },
+                        ),
+                        h(
+                            'span',
+                            {
+                                class: 'self-center text-xl font-semibold whitespace-nowrap dark:text-white',
+                            },
+                            slots,
+                        )],
+                },
+            )
+    },
+})