NuxtUI HorizontalNavigation

Hi, I'm new to Nuxt and want to make a simple web app that stores and displays my school grades. I have chosen NuxtUI for UI components and started straight ahead with the header.
Currently my code looks like this:

<script setup lang="ts">
const route = useRoute();

const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-space-between">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap"></UIcon>
      <h1 class="text-3xl font-bold">Grade Tracker</h1>
    </div>
    <UHorizontalNavigation
      :links="links"
      class="border-b border-gray-200 dark:border-gray-800"
    ></UHorizontalNavigation>
    <UIcon name="i-heroicons-moon"></UIcon>
  </header>
</template>

<script setup lang="ts">
const route = useRoute();

const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-space-between">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap"></UIcon>
      <h1 class="text-3xl font-bold">Grade Tracker</h1>
    </div>
    <UHorizontalNavigation
      :links="links"
      class="border-b border-gray-200 dark:border-gray-800"
    ></UHorizontalNavigation>
    <UIcon name="i-heroicons-moon"></UIcon>
  </header>
</template>

My problem is, that the HorizontalNavigation component has an extrem large margin on the right. I have tried to put the logo/title and the moon icon for dark/light theme in the Navigation Component, but I don't think this is the right way. I have attached an image of how i want the site to look like (made in figma). Can anybody help me with that?

Nuxt•13mo ago•

9 replies

StormOfGalaxy

NuxtUI HorizontalNavigation

<script setup lang="ts">
const route = useRoute();

const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-space-between">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap"></UIcon>
      <h1 class="text-3xl font-bold">Grade Tracker</h1>
    </div>
    <UHorizontalNavigation
      :links="links"
      class="border-b border-gray-200 dark:border-gray-800"
    ></UHorizontalNavigation>
    <UIcon name="i-heroicons-moon"></UIcon>
  </header>
</template>

<script setup lang="ts">
const route = useRoute();

const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-space-between">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap"></UIcon>
      <h1 class="text-3xl font-bold">Grade Tracker</h1>
    </div>
    <UHorizontalNavigation
      :links="links"
      class="border-b border-gray-200 dark:border-gray-800"
    ></UHorizontalNavigation>
    <UIcon name="i-heroicons-moon"></UIcon>
  </header>
</template>

NuxtUI HorizontalNavigation

NuxtUI HorizontalNavigation

Similar Threads

Similar Threads

Similar Threads