Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 900c494

Browse files
kocakoca
committed
feat(docs): add mobile menu and responsive stuff
1 parent 1c1ff07 commit 900c494

File tree

9 files changed

+176
-7
lines changed

9 files changed

+176
-7
lines changed

‎website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"feather-icons-paths": "^1.0.8",
1818
"prism-theme-vars": "^0.1.4",
1919
"vue": ">=3.0.5",
20+
"vue-composable": "^1.0.0-beta.23",
2021
"vue-prism-editor": "^2.0.0-alpha.2",
2122
"vue-router": "^4.0.6"
2223
},

‎website/src/docs-theme/components/AppHeader.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,16 +92,19 @@
9292
:icon="switchIcon"
9393
/>
9494
<sponsor-button ml="5" />
95+
<mobile-nav-button @click="isOpen = true"></mobile-nav-button>
9596
</CFlex>
9697
</CFlex>
98+
<mobile-nav :is-open="isOpen" @close="isOpen = false"></mobile-nav>
9799
</chakra.div>
98100
</chakra.header>
99101
</template>
100102

101103
<script setup lang="ts">
102104
import { SearchButton } from './AlgoliaSearch.vue'
105+
import { MobileNavButton } from './MobileNav.vue'
103106
import { VersionSwitcher } from './VersionSwitcher.vue'
104-
import { useColorMode, useColorModeValue } from '@chakra-ui/c-color-mode'
107+
import { useColorMode, useColorModeValue } from '@chakra-ui/vue-next'
105108
import { useWindowScroll } from '@vueuse/core'
106109
import { computed, onMounted, ref } from 'vue'
107110
import siteConfig from '@/config/site-config'
@@ -124,6 +127,8 @@ onMounted(() => {
124127
const headerShadow = computed(() => {
125128
return y.value > height.value ? 'sm' : undefined
126129
})
130+
131+
const isOpen = ref(false)
127132
</script>
128133

129134
<style></style>

‎website/src/docs-theme/components/LogoIcon.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
height="8"
55
width="auto"
66
viewBox="0 0 257 257"
7+
xmlns="http://www.w3.org/2000/svg"
78
fill="none"
89
>
910
<!-- eslint-enable -->
@@ -18,10 +19,10 @@
1819
x1="128.5"
1920
x2="128.5"
2021
y2="257"
21-
gradientUnits="userSpaceOnUse"
22+
gradient-units="userSpaceOnUse"
2223
>
23-
<stop stopColor="#7BCBD4" />
24-
<stop offset="1" stopColor="#29C6B7" />
24+
<stop stop-color="#7BCBD4" />
25+
<stop offset="1" stop-color="#29C6B7" />
2526
</linearGradient>
2627
</defs>
2728
</chakra.svg>

‎website/src/docs-theme/components/MobileNav.vue

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<script lang="tsx">
2+
import { defineComponent, ref, renderSlot, SetupContext, watch } from 'vue'
3+
import { useColorModeValue } from '@chakra-ui/vue-next'
4+
import { useRoute } from 'vue-router'
5+
import { useLockScroll } from 'vue-composable'
6+
import { SidebarContent } from '../components/Sidebar/AppSidebar.vue'
7+
import { getRoutes } from '../layout/LayoutMdx.vue'
8+
9+
export const MobileNavButton = (props: any, { slots }: SetupContext) => (
10+
<c-icon-button
11+
display={{ base: 'flex', md: 'none' }}
12+
aria-label="Open menu"
13+
fontSize="20px"
14+
color={useColorModeValue('gray.800', 'inherit').value}
15+
variant="ghost"
16+
icon="menu"
17+
>
18+
{renderSlot(slots, 'default')}
19+
</c-icon-button>
20+
)
21+
22+
const NavLink = ({ href }: { href?: string }, { slots }: SetupContext) => {
23+
const { path } = useRoute()
24+
const [, group] = href!.split('/')
25+
const isActive = path.includes(group)
26+
27+
return (
28+
<router-link to={href} custom>
29+
{({ href, navigate }: any) => (
30+
<c-center
31+
flex="1"
32+
minH="40px"
33+
as="a"
34+
href={href}
35+
onClick={navigate}
36+
rounded="md"
37+
transition="0.2s all"
38+
fontWeight={isActive ? 'semibold' : 'medium'}
39+
bg={isActive ? 'teal.400' : undefined}
40+
borderWidth={isActive ? undefined : '1px'}
41+
color={isActive ? 'white' : undefined}
42+
_hover={{
43+
bg: isActive
44+
? 'teal.500'
45+
: useColorModeValue('gray.100', 'whiteAlpha.100').value,
46+
}}
47+
>
48+
{renderSlot(slots, 'default')}
49+
</c-center>
50+
)}
51+
</router-link>
52+
)
53+
}
54+
55+
const ScrollView = (props: any, { slots }: SetupContext) => {
56+
return (
57+
<c-box flex="1" id="routes" overflow="auto" px="6" pb="6">
58+
{renderSlot(slots, 'default')}
59+
</c-box>
60+
)
61+
}
62+
63+
export default defineComponent({
64+
props: {
65+
isOpen: Boolean,
66+
},
67+
emits: ['close'],
68+
setup(props, { emit }) {
69+
const closeBtnRef = ref()
70+
const { lock, unlock } = useLockScroll('body', { auto: false })
71+
watch(
72+
() => props.isOpen,
73+
() => {
74+
if (props.isOpen) {
75+
lock()
76+
} else {
77+
unlock()
78+
}
79+
},
80+
{
81+
immediate: true,
82+
}
83+
)
84+
const handleClose = () => {
85+
emit('close')
86+
}
87+
88+
const { path } = useRoute()
89+
const routes = getRoutes(path)
90+
91+
return () => {
92+
return (
93+
<>
94+
{props.isOpen && (
95+
<c-flex
96+
direction="column"
97+
w="100%"
98+
bg={useColorModeValue('white', 'gray.800').value}
99+
h="100vh"
100+
overflow="auto"
101+
pos="absolute"
102+
top="0"
103+
left="0"
104+
zIndex="20"
105+
pb="8"
106+
>
107+
<c-box>
108+
<c-flex justify="space-between" px="6" pt="5" pb="4">
109+
<logo sx={{ rect: { fill: 'teal.300' } }} />
110+
<c-h-stack spacing="5">
111+
<sponsor-button display="flex" />
112+
<c-close-button ref={closeBtnRef} onClick={handleClose} />
113+
</c-h-stack>
114+
</c-flex>
115+
<c-box px="6" pb="6" pt="2" shadow="md">
116+
<c-h-stack>
117+
<NavLink href="/docs/getting-started">Docs</NavLink>
118+
<NavLink href="/guides/integrations/with-cra">
119+
Guides
120+
</NavLink>
121+
<NavLink href="/team">Team</NavLink>
122+
</c-h-stack>
123+
</c-box>
124+
</c-box>
125+
126+
<ScrollView>
127+
<SidebarContent
128+
pathname={path}
129+
routes={routes}
130+
></SidebarContent>
131+
</ScrollView>
132+
</c-flex>
133+
)}
134+
</>
135+
)
136+
}
137+
},
138+
})
139+
</script>
140+
<style>
141+
/* needed for useScrollLock */
142+
.no-scroll {
143+
overflow: hidden !important;
144+
}
145+
</style>

‎website/src/docs-theme/components/Sidebar/AppSidebar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export type SidebarContentProps = Routes & {
103103
contentRef?: any
104104
}
105105
106-
const SidebarContent = defineComponent({
106+
export const SidebarContent = defineComponent({
107107
props: {
108108
routes: Object as PropType<SidebarContentProps['routes']>,
109109
pathname: String as PropType<SidebarContentProps['pathname']>,

‎website/src/docs-theme/components/SponsorButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<CBox
3-
:display="{ base: 'none', md: 'flex' }"
3+
:display="{ base: 'none', lg: 'flex' }"
44
alignItems="center"
55
as="a"
66
aria-label="Sponsor Chakra UI on Open Collective"

‎website/src/docs-theme/components/VersionSwitcher.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export const VersionSwitcher = defineComponent({
2424
bg="transparent"
2525
value={v1Url}
2626
fontSize="sm"
27+
flexShrink="0"
28+
display={{ base: 'none', md: 'flex' }}
2729
aria-label="Select the Chakra UI Docs version. You're currently viewing the version 1.0 docs"
2830
onChange={(e: any) => {
2931
document.location = e.target.value

‎website/src/main.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
fePackage,
1010
feSearch,
1111
feStar,
12-
feTwitter,
1312
feCompass,
1413
feExternalLink,
1514
} from 'feather-icons-paths'
@@ -87,6 +86,10 @@ export const createApp = ViteSSG(App, { routes }, ({ app, isClient }) => {
8786
path: `<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83l3.75 3.75l1.83-1.83z" fill="currentColor"></path>`,
8887
viewBox: '0 0 24 24',
8988
},
89+
menu: {
90+
path: `<path fill="currentColor" d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path>`,
91+
viewBox: '0 0 1024 1024',
92+
},
9093
},
9194
},
9295
})

‎yarn.lock

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3577,6 +3577,11 @@
35773577
"@vue/compiler-dom" "3.0.11"
35783578
"@vue/shared" "3.0.11"
35793579

3580+
"@vue/devtools-api@^6.0.0-beta.3":
3581+
version "6.0.0-beta.12"
3582+
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.12.tgz#693ffc77bfb66b080e5c9576abb5786c85470a32"
3583+
integrity sha512-PtHmAxFmCyCElV7uTWMrXj+fefwn4lCfTtPo9fPw0SK8/7e3UaFl8IL7lnugJmNFfeKQyuTkSoGvTq1uDaRF6Q==
3584+
35803585
"@vue/eslint-config-typescript@^5.1.0":
35813586
version "5.1.0"
35823587
resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-5.1.0.tgz#17eb1af64f63e231fcceca5603859bdfb4f5d4e0"
@@ -14069,6 +14074,13 @@ vscode-web-custom-data@^0.3.2:
1406914074
resolved "https://registry.yarnpkg.com/vscode-web-custom-data/-/vscode-web-custom-data-0.3.3.tgz#9e1f2388c718d6f190038a19d144834a436b876f"
1407014075
integrity sha512-orMjjj1r4efP5ocODYZm3orpANakRBsxPZPDoD5UIrFOPKDFtMJQLp6PIH1rb3AYVRD1iYXMhDQoC6tZ+DrigA==
1407114076

14077+
vue-composable@^1.0.0-beta.23:
14078+
version "1.0.0-beta.23"
14079+
resolved "https://registry.yarnpkg.com/vue-composable/-/vue-composable-1.0.0-beta.23.tgz#1085bcd8360d9ed309ec5c33e8242611790cd5c5"
14080+
integrity sha512-jtlEHcaLbN6ENHIiqABeBmGbtUuUEKCRaByerHudlpEcHTN4B47P/uRcrg93iL1iuWHl9OQeRqkyFIzjCF3MTQ==
14081+
dependencies:
14082+
"@vue/devtools-api" "^6.0.0-beta.3"
14083+
1407214084
[email protected], vue-demi@latest:
1407314085
version "0.7.4"
1407414086
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.7.4.tgz#4c6be525788e1f6b3fd5d4f5f9f2148cf6645979"

0 commit comments

Comments
 (0)