mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-25 01:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(style): cleaner layout

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-14 22:41:51 +02:00
parent 2df3f53b78
commit 1d09a01bb2
No known key found for this signature in database
GPG key ID: DBD997E935996158
10 changed files with 351 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/layouts/base.layout.vue
View file

@ -3,10 +3,14 @@ import { NIcon } from 'naive-ui';
import { h, ref, type Component } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { LightModeFilled, DarkModeFilled } from '@vicons/material'
import { Heart } from '@vicons/tabler'
import { toolsByCategory } from '@/tools';
import SearchBar from '../components/SearchBar.vue';
import { useStyleStore } from '@/stores/style.store';
import HeroGradient from '../assets/hero-gradient.svg?component'
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
const collapsed = ref(false)
const activeKey = ref(null)
const route = useRoute()
@ -33,20 +37,30 @@ const m = toolsByCategory.map(category => ({
<n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="260" :collapsed="collapsed"
@collapse="collapsed = true" @expand="collapsed = false" :show-trigger="false">
<n-scrollbar>
<router-link to="/"
style="text-decoration: none; color: grey; display: block; text-align: center; margin:25px 0; font-size: 25px;">
<strong>IT-Tools</strong>
<router-link to="/" class="hero-wrapper">
<hero-gradient class="gradient" />
<div class="text-wrapper">
<div class="title">IT - TOOLS</div>
<div class="divider" />
<div class="subtitle">Handy tools for developers</div>
</div>
</router-link>
<n-menu :value="route.name" class="menu" :collapsed="collapsed" :collapsed-width="64"
:collapsed-icon-size="22" :options="m" v-model:value="activeKey" />
</n-scrollbar>
</n-layout-sider>
<n-layout class="content">
<div class="bar-wrapper">
<search-bar />
<n-button type="primary" tag="a" href="https://github.com/sponsors/CorentinTh" rel="noopener"
target="_blank">
<n-icon :component="Heart" />&nbsp;
Sponsor
</n-button>
<n-button circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme">
<n-icon size="large" v-if="styleStore.isDarkTheme">
<LightModeFilled />
@ -62,14 +76,62 @@ const m = toolsByCategory.map(category => ({
</template>
<style lang="less" scoped>
.n-menu {
padding-top: 160px;
padding-bottom: 200px;
}
.hero-wrapper {
position: absolute;
display: block;
position: absolute;
left: 0;
width: 100%;
z-index: 10;
.gradient {
margin-top: -80px;
}
.text-wrapper {
position: absolute;
left: 0;
width: 100%;
text-align: center;
top: 16px;
color: #fff;
.title {
font-size: 25px;
font-weight: 600;
}
.divider {
width: 50px;
height: 2px;
border-radius: 4px;
background-color: v-bind('themeVars.primaryColor');
margin: 0 auto 5px;
}
.subtitle {
font-size: 16px;
}
}
}
.bar-wrapper {
display: flex;
align-items: center;
justify-content: center;
&>*:not(:first-child) {
margin-left: 15px;
}
&> :first-child {
.search-bar {
flex-grow: 1;
}
}