open-index/open-npm huggingface dataset:
npm package: @immx2/portfolio-nav
Description: A small Vue 3 component: a horizontal strip linking a portfolio site and three related showcase demos. The active site is plain text; the rest are same-tab links.
Latest version: 0.1.4

# @immx2/portfolio-nav

A small Vue 3 component: a horizontal strip linking a portfolio site and three related showcase demos. The active site is plain text; the rest are same-tab links.

Built for [Nuxt](https://nuxt.com/) apps that already ship Vue 3 and transpile `.vue` / TypeScript from `node_modules` (default Vite behavior).

## Install

```bash
npm install @immx2/portfolio-nav
```

Peer dependency: **Vue 3** (`vue` ^3).

## Usage

```vue
<script setup lang="ts">
import { PortfolioNav } from '@immx2/portfolio-nav'
</script>

<template>
  <PortfolioNav current="showcase-02" />
</template>
```

### `current` prop

One of: `'portfolio'` | `'showcase-01'` | `'showcase-02'` | `'showcase-03'`

That entry is shown as the current page (not a link). Others navigate to the configured production URLs.

## Styling

The component ships scoped styles and uses CSS variables when present (`--color-bg`, `--color-text`, `--color-text-muted`, `--color-border`, `--duration-fast`), with fallbacks.

It also sets **`--portfolio-nav-height`** on `:root` (default `28px`). Use this if you need to offset a fixed app bar below the strip, for example:

```css
.app-nav {
  top: var(--portfolio-nav-height, 28px);
}
```

## License

[MIT](LICENSE) — Copyright (c) 2026 Immanuel