rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): update navbar

Browse Source 
- unwrap add story button from div and nuxt-link
- use `onclick` handler to navigate to the "new story" page
- better align the new story button with the rest of the navbar on tablet+ viewports
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2024-12-09 15:43:44 -05:00
parent 718fcc6ff8
commit 4b6771c0dd
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/layouts/navbar.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Grid, ItemType } from "ant-design-vue"; import { Grid } from "ant-design-vue";
const bp = Grid.useBreakpoint(); const bp = Grid.useBreakpoint();
const { data, status } = useAuth(); const { data, status } = useAuth();
const itemMap = ref({ const itemMap = ref({
@ -62,16 +63,12 @@
<a-menu-item key="admin" v-if="data?.user?.profile.isAdmin || false"> Admin</a-menu-item> <a-menu-item key="admin" v-if="data?.user?.profile.isAdmin || false"> Admin</a-menu-item>
<a-menu-item key="logout" v-if="!!data?.user"> Logout</a-menu-item> <a-menu-item key="logout" v-if="!!data?.user"> Logout</a-menu-item>
</a-menu> </a-menu>
<div v-if="data?.user"> <a-button class="new-btn" type="primary" tooltip="Post a New Story" @click="() => navigateTo(`/new-story`)" v-if="data?.user">
<nuxt-link to="/new-story">
<a-button type="primary" tooltip="Post a New Story">
<!-- <template #icon> <!-- <template #icon>
</template> --> </template> -->
<icon istyle="regular" name="file-plus" /> <icon istyle="regular" name="file-plus" />
<span style="margin-left: 0.5em"> Post a New Story </span> <span style="margin-left: 0.5em"> Post a New Story </span>
</a-button> </a-button>
</nuxt-link>
</div>
<div class="acbut" v-if="!data?.user"> <div class="acbut" v-if="!data?.user">
<a-button size="large" @click="() => navigateTo('/auth/login')"> Login</a-button> <a-button size="large" @click="() => navigateTo('/auth/login')"> Login</a-button>
<a-button size="large" type="primary" @click="() => navigateTo('/auth/register')"> Register</a-button> <a-button size="large" type="primary" @click="() => navigateTo('/auth/register')"> Register</a-button>
@ -101,4 +98,11 @@
flex-grow: 1.2; flex-grow: 1.2;
justify-content: stretch; justify-content: stretch;
} }
@media (min-width: 768px) {
.new-btn {
align-self: self-end;
margin-top: 1em;
}
}
</style> </style>