(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. My tech stack includes Vue.js 3 with composition API, TypeScript, Naive UI Component Library, and Tailwind CSS.
TopViewGuide.vue
<script setup lang="ts">
import {RouterLink, RouterView, useRouter} from 'vue-router'
import {
NAvatar, NButton, NConfigProvider, NDialogProvider, NDropdown,
NGradientText,
NLayout, NLayoutHeader, NLoadingBarProvider, NMenu, NMessageProvider, NSpace
} from 'naive-ui'
import type { DropdownOption } from 'naive-ui'
import TopViewGuide from "@/views/Guides/TopViewGuide.vue";
const $router = useRouter();
import {h, ref} from 'vue'
import type {Component} from "vue";
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
function renderIcon (icon: Component) {
return () => h(NIcon, null, { default: () => h(icon) })
}
const menuOptions: MenuOption[] = [
{
label: 'Home',
key: 'home'
},
{
label: 'Tools',
key: 'tools'
},
{
label: 'Schedules',
key: 'schedules'
},
{
label: 'Tasks',
key: 'tasks'
}
]
const activeKey = ref(), isLoggedIn = false;
const dropdownOptions: DropdownOption[] = [
{ label: "Account", key: "auth.principal" },
{ label: "Sign out", key: "auth.sign-out" },
];
function dropdownHandler(key: string) {
$router.push({ name: key });
}
</script>
<template>
<div class="flex items-center justify-between px-8 w-full">
<div class="flex items-center cursor-pointer">
<img src="@/assets/images/TaskJournal%20Icon.svg" width="40" height="40" />
<NGradientText>TaskJournal</NGradientText>
</div>
<div class="flex-grow">
<NMenu v-model:value="activeKey" mode="horizontal" :options="menuOptions"/>
</div>
<div v-if="!isLoggedIn" class="flex gap-3">
<NButton type="primary">Get Started</NButton>
</div>
<div v-else class="flex gap-3">
<NDropdown placement="bottom-end" show-arrow :options="dropdownOptions" @select="dropdownHandler">
<NAvatar/>
</NDropdown>
</div>
</div>
</template>
<style scoped>
</style>
LandingPage.vue
<script setup lang="ts">
import {RouterLink, RouterView, useRouter} from 'vue-router'
import {
NAvatar, NButton, NConfigProvider, NDialogProvider, NDropdown,
NGradientText,
NLayout, NLayoutHeader, NLoadingBarProvider, NMenu, NMessageProvider, NSpace
} from 'naive-ui'
import type { DropdownOption } from 'naive-ui'
import TopViewGuide from "@/views/Guides/TopViewGuide.vue";
const $router = useRouter();
import {h, ref} from 'vue'
import type {Component} from "vue";
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
</script>
<template>
<NDialogProvider>
<NConfigProvider>
<NMessageProvider>
<NLoadingBarProvider>
<NLayoutHeader bordered class="h-16 flex">
<TopViewGuide/>
</NLayoutHeader>
<div class="w-full relative">
<NLayout>
<NGradientText>
sadsada
</NGradientText>
</NLayout>
</div>
</NLoadingBarProvider>
</NMessageProvider>
</NConfigProvider>
</NDialogProvider>
</template>
<style scoped>
</style>
In my App.vue file, the <RouterView> component is the only element within the <template>.
I've attempted using flex containers for each element but it hasn't worked as expected. View image here for reference. Feeling quite confused at this point and could use some guidance.