Skip to content

Commit 9b2c9bd

Browse files
phphephphe
committed
docs: add react tree link in menu
1 parent 491e5df commit 9b2c9bd

File tree

1 file changed

+88
-87
lines changed

1 file changed

+88
-87
lines changed

‎packages/docs-site/src/layouts/default_layout.vue

Lines changed: 88 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
template(#popper)
3434
.shadow.rounded.text-sm
3535
Anchor.block.py-2.px-3(v-for="item in versions" class="hover:bg-gray-100" :to="item.homePath") {{$t(item.version)}}
36+
Anchor.main-menu-item(to="https://he-tree-react.phphe.com/") React Tree 👑👑👑
3637
Anchor.main-menu-item(:to="githubURL" v-if="githubURL") Github
3738
Anchor.main-menu-item.buy-me-coffee(v-if="DONATE_URL" :to="DONATE_URL")
3839
img(alt="Buy me a coffee" :src="coffeeImg")
@@ -59,105 +60,105 @@
5960
</template>
6061

6162
<script lang="ts">
62-
import { defineComponent, computed } from 'vue'
63-
import { routeViewKey, reloadRouteView } from '../router'
64-
import { state } from '../store'
65-
import { versions, version, menu, homeUrl } from '../current'
66-
import { switchLocale } from '../i18n'
67-
import * as hp from 'helper-js'
68-
import useWindowSize from '../plugins/useWindowSize'
69-
import config from '../config'
70-
import DocsMenuItem from '../parts/DocsMenuItem.vue'
71-
import SearchModal from '../parts/SearchModal.vue'
72-
import { mdiMenu, mdiSearch } from 'mdi-js/filled'
73-
import { useRouter } from 'vue-router'
74-
import GithubButton from 'vue-github-button'
75-
import coffeeImg from "../assets/img/coffee.jpg";
63+
import { defineComponent, computed } from 'vue'
64+
import { routeViewKey, reloadRouteView } from '../router'
65+
import { state } from '../store'
66+
import { versions, version, menu, homeUrl } from '../current'
67+
import { switchLocale } from '../i18n'
68+
import * as hp from 'helper-js'
69+
import useWindowSize from '../plugins/useWindowSize'
70+
import config from '../config'
71+
import DocsMenuItem from '../parts/DocsMenuItem.vue'
72+
import SearchModal from '../parts/SearchModal.vue'
73+
import { mdiMenu, mdiSearch } from 'mdi-js/filled'
74+
import { useRouter } from 'vue-router'
75+
import GithubButton from 'vue-github-button'
76+
import coffeeImg from '../assets/img/coffee.jpg'
7677
77-
export default defineComponent({
78-
components: { DocsMenuItem, SearchModal, GithubButton },
79-
setup(props) {
80-
const router = useRouter()
81-
const windowSize = useWindowSize()
82-
const sm = computed(() => windowSize.value.innerWidth < 760)
83-
const githubURL = computed(() =>
84-
config.GIT_NAME ? 'https://github.com/' + config.GIT_NAME : ''
85-
)
86-
return {
87-
routeViewKey,
88-
reloadRouteView,
89-
sm,
90-
mdiMenu,
91-
mdiSearch,
92-
menu,
93-
versions,
94-
version,
95-
homeUrl,
96-
githubURL,
97-
DONATE_URL: config.DONATE_URL,
98-
coffeeImg,
99-
}
100-
},
101-
data() {
102-
return {
103-
state,
104-
sidebarVisible: false,
105-
year: new Date().getFullYear(),
106-
config,
107-
searchModalOpen: false,
108-
}
109-
},
110-
watch: {},
111-
async created() { },
112-
mounted() { },
113-
methods: {
114-
switchLocale(to: string) {
115-
switchLocale(to, this.$router, this.$route)
78+
export default defineComponent({
79+
components: { DocsMenuItem, SearchModal, GithubButton },
80+
setup(props) {
81+
const router = useRouter()
82+
const windowSize = useWindowSize()
83+
const sm = computed(() => windowSize.value.innerWidth < 760)
84+
const githubURL = computed(() =>
85+
config.GIT_NAME ? 'https://github.com/' + config.GIT_NAME : ''
86+
)
87+
return {
88+
routeViewKey,
89+
reloadRouteView,
90+
sm,
91+
mdiMenu,
92+
mdiSearch,
93+
menu,
94+
versions,
95+
version,
96+
homeUrl,
97+
githubURL,
98+
DONATE_URL: config.DONATE_URL,
99+
coffeeImg,
100+
}
101+
},
102+
data() {
103+
return {
104+
state,
105+
sidebarVisible: false,
106+
year: new Date().getFullYear(),
107+
config,
108+
searchModalOpen: false,
109+
}
116110
},
117-
},
118-
})
111+
watch: {},
112+
async created() {},
113+
mounted() {},
114+
methods: {
115+
switchLocale(to: string) {
116+
switchLocale(to, this.$router, this.$route)
117+
},
118+
},
119+
})
119120
</script>
120121

121122
<style lang="scss">
122-
.main-menu-item {
123-
@apply block mb-2 font-semibold;
123+
.main-menu-item {
124+
@apply block mb-2 font-semibold;
124125
125-
&.router-link-active {
126-
@apply text-primary-500 text-lg;
126+
&.router-link-active {
127+
@apply text-primary-500 text-lg;
128+
}
127129
}
128-
}
129130
130-
.main-body {
131-
min-height: 750px;
132-
min-height: calc(100vh - 100px);
133-
}
131+
.main-body {
132+
min-height: 750px;
133+
min-height: calc(100vh - 100px);
134+
}
134135
135-
.mobile-menu-nav {
136-
$h: 48px;
137-
height: $h;
138-
line-height: $h;
139-
position: sticky;
140-
top: 0;
141-
background: #fff;
142-
z-index: 1;
143-
}
136+
.mobile-menu-nav {
137+
$h: 48px;
138+
height: $h;
139+
line-height: $h;
140+
position: sticky;
141+
top: 0;
142+
background: #fff;
143+
z-index: 1;
144+
}
144145
145-
.mobile-main-title {
146-
font-size: 1.3em;
147-
}
146+
.mobile-main-title {
147+
font-size: 1.3em;
148+
}
148149
149-
.main-search-icon {
150-
align-self: flex-end;
151-
}
150+
.main-search-icon {
151+
align-self: flex-end;
152+
}
152153
153-
.buy-me-coffee {
154-
color: #2a2a2a;
155-
background-color: #e4d7c5;
156-
@apply flex items-center;
154+
.buy-me-coffee {
155+
color: #2a2a2a;
156+
background-color: #e4d7c5;
157+
@apply flex items-center;
157158
158-
img {
159-
width: 50px;
160-
margin-right: 10px;
159+
img {
160+
width: 50px;
161+
margin-right: 10px;
162+
}
161163
}
162-
}
163164
</style>

0 commit comments

Comments
 (0)