feat: Added Navbar component

2022-11-17 21:05:24 +03:00
parent c658c323cd
commit 8f27fb03fd
12 changed files with 403 additions and 63 deletions
--- a/src/components/Navbar/NavbarLink.ts
+++ b/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(),
+                },
+            ))
+    },
+})