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

52
components/layouts/navbar.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { Grid, ItemType } from "ant-design-vue";
import { Grid } from "ant-design-vue";
const bp = Grid.useBreakpoint();
const { data, status } = useAuth();
const itemMap = ref({
@ -46,35 +47,31 @@
:active-key="cur"
:key="data?.user?._id"
>
<a-menu-item key="home"> Home </a-menu-item>
<a-menu-item key="bands"> Bands </a-menu-item>
<a-menu-item key="authors"> Authors </a-menu-item>
<a-menu-item key="home"> Home</a-menu-item>
<a-menu-item key="bands"> Bands</a-menu-item>
<a-menu-item key="authors"> Authors</a-menu-item>
<a-menu-item key="forum"> Message Board</a-menu-item>
<a-sub-menu :disabled="!data?.user" v-if="!!data?.user" title="My Stuff" key="group/my-stuff">
<a-menu-item key="account"> Account </a-menu-item>
<a-menu-item key="edit-profile"> Edit Profile </a-menu-item>
<a-menu-item key="profile"> View Profile </a-menu-item>
<a-menu-item key="stories"> Stories </a-menu-item>
<a-menu-item key="drafts"> Drafts </a-menu-item>
<a-menu-item key="reviews"> Manage Reviews </a-menu-item>
<a-menu-item key="messages"> Private Messages </a-menu-item>
<a-menu-item key="account"> Account</a-menu-item>
<a-menu-item key="edit-profile"> Edit Profile</a-menu-item>
<a-menu-item key="profile"> View Profile</a-menu-item>
<a-menu-item key="stories"> Stories</a-menu-item>
<a-menu-item key="drafts"> Drafts</a-menu-item>
<a-menu-item key="reviews"> Manage Reviews</a-menu-item>
<a-menu-item key="messages"> Private Messages</a-menu-item>
</a-sub-menu>
<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="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>
<div v-if="data?.user">
<nuxt-link to="/new-story">
<a-button type="primary" tooltip="Post a New Story">
<!-- <template #icon>
<a-button class="new-btn" type="primary" tooltip="Post a New Story" @click="() => navigateTo(`/new-story`)" v-if="data?.user">
<!-- <template #icon>
</template> -->
<icon istyle="regular" name="file-plus" />
<span style="margin-left: 0.5em"> Post a New Story </span>
</a-button>
</nuxt-link>
</div>
<icon istyle="regular" name="file-plus" />
<span style="margin-left: 0.5em"> Post a New Story </span>
</a-button>
<div class="acbut" v-if="!data?.user">
<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" @click="() => navigateTo('/auth/login')"> Login</a-button>
<a-button size="large" type="primary" @click="() => navigateTo('/auth/register')"> Register</a-button>
</div>
</div>
</template>
@ -101,4 +98,11 @@
flex-grow: 1.2;
justify-content: stretch;
}
@media (min-width: 768px) {
.new-btn {
align-self: self-end;
margin-top: 1em;
}
}
</style>