public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(menu): improve support button

Browse Source
This commit is contained in:
Corentin Thomasset 2022-12-17 01:30:27 +01:00
parent 4cd809bd0c
commit 679dd1c1f6
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/layouts/base.layout.vue
View File

@ -7,7 +7,7 @@ import { toolsByCategory } from '@/tools';
import { useStyleStore } from '@/stores/style.store'; import { useStyleStore } from '@/stores/style.store';
import { config } from '@/config'; import { config } from '@/config';
import MenuIconItem from '@/components/MenuIconItem.vue'; import MenuIconItem from '@/components/MenuIconItem.vue';
import type { ITool } from '@/tools/tool'; import type { Tool } from '@/tools/tools.types';
import SearchBar from '../components/SearchBar.vue'; import SearchBar from '../components/SearchBar.vue';
import HeroGradient from '../assets/hero-gradient.svg?component'; import HeroGradient from '../assets/hero-gradient.svg?component';
import MenuLayout from '../components/MenuLayout.vue'; import MenuLayout from '../components/MenuLayout.vue';
@ -19,8 +19,8 @@ const styleStore = useStyleStore();
const version = config.app.version; const version = config.app.version;
const commitSha = config.app.lastCommitSha.slice(0, 7); const commitSha = config.app.lastCommitSha.slice(0, 7);
const makeLabel = (tool: ITool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name }); const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
const makeIcon = (tool: ITool) => () => h(MenuIconItem, { tool }); const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
label: category.name, label: category.name,
@ -145,9 +145,12 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
href="https://github.com/sponsors/CorentinTh" href="https://github.com/sponsors/CorentinTh"
rel="noopener" rel="noopener"
target="_blank" target="_blank"
class="support-button"
:bordered="false"
> >
Buy me a coffee Buy me a coffee
<n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
<n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 8px" size="20px" />
</n-button> </n-button>
</template> </template>
❤ Support IT Tools development ! ❤ Support IT Tools development !
@ -170,6 +173,19 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
// background-size: @size @size; // background-size: @size @size;
// } // }
.support-button {
background: rgb(37, 99, 108);
background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
color: #fff;
transition: all ease 0.2s;
&:hover {
color: #fff;
padding-left: 30px;
padding-right: 30px;
}
}
.footer { .footer {
text-align: center; text-align: center;
color: #838587; color: #838587;