btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: broken alignment in small screens

Browse Source
This commit is contained in:
liyasthomas
2022-03-01 16:18:14 +05:30
parent c30b614138
commit a1960c359b
1 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -1,28 +1,24 @@
<template>
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
<ul>
<li>
<NuxtLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
:to="localePath(navigation.target)"
class="nav-link"
tabindex="0"
>
<div v-if="navigation.svg">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
<tippy
v-if="!EXPAND_NAVIGATION"
:placement="mdAndLarger ? 'right' : 'bottom'"
theme="tooltip"
:content="navigation.title"
/>
</NuxtLink>
</li>
</ul>
<NuxtLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
:to="localePath(navigation.target)"
class="nav-link"
tabindex="0"
>
<div v-if="navigation.svg">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
<tippy
v-if="!EXPAND_NAVIGATION"
:placement="mdAndLarger ? 'right' : 'bottom'"
theme="tooltip"
:content="navigation.title"
/>
</NuxtLink>
</nav>
</aside>
</template>