feat(website): add navbar to layouts

Author: carwack

website-new/components/ChakraLogo.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { chakra, useColorModeValue } from "@chakra-ui/vue-next"
+
+const fill = useColorModeValue("#2D3748", "#fff")
+// todo: AppHeader causes re-rendering of this logo, why?
+// console.log({ fill })
+</script>
+
+<template>
+  <!-- eslint-disable -->
+  <chakra.svg
+    width="auto"
+    height="8"
+    viewBox="0 0 617 181"
+    xmlns="http://www.w3.org/2000/svg"
+    style="
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      stroke-linejoin: round;
+      stroke-miterlimit: 2;
+    "
+  >
+    <path
+      d="M580.425,139.8c-4.32,0 -8.205,-0.777 -11.652,-2.331c-3.448,-1.553 -6.17,-3.854 -8.168,-6.902c-1.997,-3.048 -2.996,-6.806 -2.996,-11.275c0,-3.847 0.71,-7.028 2.131,-9.544c1.42,-2.515 3.358,-4.527 5.815,-6.037c2.456,-1.509 5.23,-2.656 8.323,-3.44c3.092,-0.784 6.296,-1.354 9.61,-1.709c3.995,-0.414 7.235,-0.791 9.721,-1.132c2.486,-0.34 4.299,-0.873 5.438,-1.598c1.139,-0.725 1.709,-1.857 1.709,-3.395l0,-0.267c0,-3.344 -0.992,-5.933 -2.974,-7.768c-1.983,-1.835 -4.839,-2.752 -8.567,-2.752c-3.936,0 -7.051,0.858 -9.344,2.575c-2.294,1.716 -3.84,3.743 -4.639,6.081l-15.004,-2.131c1.184,-4.143 3.137,-7.613 5.86,-10.409c2.722,-2.797 6.052,-4.898 9.987,-6.303c3.936,-1.406 8.286,-2.109 13.051,-2.109c3.285,0 6.555,0.385 9.81,1.154c3.255,0.77 6.229,2.035 8.922,3.796c2.693,1.76 4.861,4.15 6.503,7.168c1.643,3.019 2.464,6.792 2.464,11.32l0,45.632l-15.448,0l0,-9.366l-0.532,0c-0.977,1.894 -2.346,3.662 -4.106,5.304c-1.761,1.643 -3.966,2.959 -6.614,3.951c-2.649,0.991 -5.749,1.487 -9.3,1.487Zm-183.729,0c-4.32,0 -8.204,-0.777 -11.652,-2.331c-3.447,-1.553 -6.17,-3.854 -8.167,-6.902c-1.998,-3.048 -2.997,-6.806 -2.997,-11.275c0,-3.847 0.711,-7.028 2.131,-9.544c1.42,-2.515 3.359,-4.527 5.815,-6.037c2.456,-1.509 5.231,-2.656 8.323,-3.44c3.092,-0.784 6.296,-1.354 9.61,-1.709c3.995,-0.414 7.236,-0.791 9.721,-1.132c2.486,-0.34 4.299,-0.873 5.438,-1.598c1.139,-0.725 1.709,-1.857 1.709,-3.395l0,-0.267c0,-3.344 -0.991,-5.933 -2.974,-7.768c-1.983,-1.835 -4.838,-2.752 -8.567,-2.752c-3.936,0 -7.051,0.858 -9.344,2.575c-2.293,1.716 -3.84,3.743 -4.639,6.081l-15.003,-2.131c1.184,-4.143 3.137,-7.613 5.859,-10.409c2.723,-2.797 6.052,-4.898 9.988,-6.303c3.936,-1.406 8.286,-2.109 13.05,-2.109c3.285,0 6.555,0.385 9.81,1.154c3.255,0.77 6.229,2.035 8.922,3.796c2.693,1.76 4.861,4.15 6.503,7.168c1.643,3.019 2.464,6.792 2.464,11.32l0,45.632l-15.447,0l0,-9.366l-0.533,0c-0.977,1.894 -2.345,3.662 -4.106,5.304c-1.761,1.643 -3.966,2.959 -6.614,3.951c-2.649,0.991 -5.748,1.487 -9.3,1.487Zm-133.671,-0.045c-6.807,0 -12.644,-1.494 -17.512,-4.483c-4.868,-2.989 -8.612,-7.124 -11.231,-12.407c-2.618,-5.282 -3.928,-11.371 -3.928,-18.266c0,-6.925 1.332,-13.043 3.995,-18.355c2.663,-5.312 6.429,-9.455 11.297,-12.429c4.868,-2.974 10.631,-4.461 17.29,-4.461c5.534,0 10.439,1.014 14.715,3.041c4.276,2.027 7.686,4.883 10.231,8.567c2.545,3.684 3.995,7.983 4.351,12.895l-15.359,0c-0.622,-3.285 -2.094,-6.03 -4.417,-8.234c-2.323,-2.205 -5.423,-3.307 -9.299,-3.307c-3.285,0 -6.17,0.88 -8.656,2.641c-2.486,1.761 -4.417,4.284 -5.793,7.568c-1.376,3.285 -2.064,7.221 -2.064,11.808c0,4.646 0.681,8.634 2.042,11.963c1.361,3.329 3.277,5.889 5.748,7.679c2.471,1.79 5.379,2.686 8.723,2.686c2.367,0 4.49,-0.452 6.37,-1.354c1.879,-0.903 3.454,-2.212 4.727,-3.929c1.272,-1.716 2.145,-3.802 2.619,-6.259l15.359,0c-0.385,4.824 -1.806,9.093 -4.262,12.807c-2.456,3.714 -5.8,6.614 -10.032,8.7c-4.231,2.086 -9.203,3.129 -14.914,3.129Zm251.985,-1.331l0,-68.182l15.58,0l0,11.364l0.71,0c1.243,-3.936 3.381,-6.977 6.415,-9.122c3.033,-2.146 6.503,-3.219 10.409,-3.219c0.888,0 1.886,0.037 2.996,0.111c1.11,0.074 2.035,0.185 2.775,0.333l0,14.782c-0.681,-0.237 -1.754,-0.451 -3.219,-0.644c-1.465,-0.192 -2.878,-0.288 -4.239,-0.288c-2.93,0 -5.556,0.629 -7.879,1.886c-2.323,1.258 -4.15,2.997 -5.482,5.216c-1.332,2.219 -1.998,4.779 -1.998,7.679l0,40.084l-16.068,0Zm-195.981,-39.951l0,39.951l-16.068,0l0,-97.882l15.713,0l0,41.286l0.799,0c1.598,-3.848 4.077,-6.888 7.436,-9.122c3.358,-2.235 7.642,-3.352 12.85,-3.352c4.735,0 8.863,0.992 12.385,2.974c3.521,1.983 6.251,4.883 8.19,8.701c1.938,3.817 2.907,8.478 2.907,13.982l0,43.413l-16.069,0l0,-40.927c0,-4.587 -1.176,-8.16 -3.529,-10.72c-2.352,-2.56 -5.645,-3.84 -9.876,-3.84c-2.841,0 -5.379,0.614 -7.613,1.842c-2.234,1.228 -3.98,2.997 -5.238,5.305c-1.258,2.308 -1.887,5.105 -1.887,8.389Zm143.438,-0.843l1.11,0l24.503,-27.388l18.776,0l-26.433,29.431l27.987,38.751l-19.221,0l-20.876,-29.185l-5.846,6.267l0,22.918l-16.069,0l0,-97.878l16.069,-0.004l0,57.088Zm122.131,30.362c3.225,0 6.022,-0.643 8.389,-1.931c2.368,-1.287 4.195,-2.996 5.482,-5.127c1.288,-2.13 1.931,-4.453 1.931,-6.969l0,-8.034c-0.503,0.414 -1.354,0.799 -2.552,1.154c-1.199,0.355 -2.538,0.666 -4.017,0.932c-1.48,0.266 -2.945,0.503 -4.395,0.71c-1.45,0.208 -2.708,0.385 -3.773,0.533c-2.397,0.326 -4.542,0.858 -6.436,1.598c-1.894,0.74 -3.389,1.768 -4.484,3.085c-1.095,1.317 -1.642,3.011 -1.642,5.083c0,2.959 1.08,5.193 3.24,6.702c2.161,1.51 4.913,2.264 8.257,2.264Zm-183.729,0c3.226,0 6.022,-0.643 8.39,-1.931c2.367,-1.287 4.194,-2.996 5.482,-5.127c1.287,-2.13 1.931,-4.453 1.931,-6.969l0,-8.034c-0.504,0.414 -1.354,0.799 -2.553,1.154c-1.198,0.355 -2.537,0.666 -4.017,0.932c-1.48,0.266 -2.945,0.503 -4.395,0.71c-1.45,0.208 -2.707,0.385 -3.773,0.533c-2.397,0.326 -4.542,0.858 -6.436,1.598c-1.894,0.74 -3.389,1.768 -4.483,3.085c-1.095,1.317 -1.643,3.011 -1.643,5.083c0,2.959 1.08,5.193 3.241,6.702c2.16,1.51 4.912,2.264 8.256,2.264Z"
+      :fill="fill"
+    />
+    <path
+      d="M90.354,0.171c-49.372,0 -90,40.628 -90,90c0,49.373 40.628,90 90,90c49.373,0 90,-40.627 90,-90c0,-49.372 -40.627,-90 -90,-90Zm-28.2,144.167l24.417,-45l-28.209,0.541l54.684,-63.825l-23.625,46.617l33.208,-1.542l-60.475,63.209Z"
+      style="fill: url(#_Linear1)"
+    />
+    <defs>
+      <linearGradient
+        id="_Linear1"
+        x1="0"
+        y1="0"
+        x2="1"
+        y2="0"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(180,-0.741309,0.741309,180,0.354053,90.2243)"
+      >
+        <stop offset="0" style="stop-color: #41b883; stop-opacity: 1" />
+        <stop offset="1" style="stop-color: #78ffbe; stop-opacity: 1" />
+      </linearGradient>
+    </defs>
+  </chakra.svg>
+</template>

website-new/components/SponsorButton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { CBox, CIcon } from "@chakra-ui/vue-next"
+import siteConfig from "@/config/site-config"
+</script>
+
+<template>
+  <CBox
+    :display="{ base: 'none', lg: 'flex' }"
+    alignItems="center"
+    as="a"
+    aria-label="Sponsor Chakra UI on Open Collective"
+    :href="siteConfig.openCollective.url"
+    target="_blank"
+    rel="noopener noreferrer"
+    bg="gray.50"
+    borderWidth="1px"
+    borderColor="gray.200"
+    px="1em"
+    minH="36px"
+    borderRadius="md"
+    fontSize="sm"
+    color="gray.800"
+    outline="0"
+    transition="all 0.3s"
+    :_hover="{
+      bg: 'gray.100',
+      borderColor: 'gray.300',
+    }"
+    :_active="{
+      borderColor: 'gray.200',
+    }"
+    :_focus="{
+      boxShadow: 'outline',
+    }"
+    v-bind="$attrs"
+  >
+    <CIcon name="heart" w="4" h="4" color="red.500" mr="2" />
+    <CBox as="strong" lineHeight="inherit" fontWeight="semibold">
+      Sponsor
+    </CBox>
+  </CBox>
+</template>

website-new/components/TheNavbar.vue

@@ -1,112 +1,151 @@
-<template>
-  <chakra.nav
-    h="60px"
-    w="100%"
-    :px="[4, 10, 12]"
-    d="flex"
-    position="fixed"
-    align-items="center"
-    shadow="sm"
-    bg="white"
-    z-index="10"
-    border-top="6px solid"
-    border-color="emerald.500"
-  >
-    <CFlex align-items="center" justify-content="flex-start" flex="1">
-      <chakra.a
-        aria-current="page"
-        aria-label="Chakra UI Vue, Back to homepage"
-        href="/"
-        h="auto"
-        d="flex"
-        flex-direction="row"
-        align-items="center"
-      >
-        <CBox w="30px" mr="2"><ChakraUILogoIcon /></CBox>
-        <chakra.h1
-          font-size="xl"
-          font-family="heading"
-          line-height="1.2"
-          letter-spacing="tighter"
-          :d="{ base: 'none', md: 'block' }"
-        >
-          chakra-ui/vue-next
-          <CBadge
-            font-family="mono"
-            font-size="0.5em"
-            text-transform="lowercase"
-            >{{ pkg.version }}</CBadge
-          >
-        </chakra.h1>
-      </chakra.a>
-    </CFlex>
-    <CFlex flex="1" justify-content="center">
-      <CIcon name="search" mt="8px" />
-    </CFlex>
-    <CBox
-      as="ul"
-      d="flex"
-      flex="1"
-      align-items="center"
-      list-style-type="none"
-      pt="8px"
-      justify-content="flex-end"
-    >
-      <CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
-        <CIconButton
-          as="a"
-          variant-color="gray"
-          aria-label="View GitHub"
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://github.com/chakra-ui/chakra-ui-vue-next"
-          icon="github"
-        />
-      </CBox>
-      <CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
-        <CIconButton
-          as="router-link"
-          variant-color="gray"
-          aria-label="View the documentation"
-          to="#"
-          icon="book"
-        />
-      </CBox>
-      <CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
-        <CIconButton
-          as="a"
-          variant-color="gray"
-          aria-label="Join Discord channel"
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://discord.gg/sq2Kp6x"
-          icon="discord"
-        />
-      </CBox>
-      <CBox as="li">
-        <CIconButton
-          as="a"
-          variant-color="gray"
-          aria-label="Open menu"
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://discord.gg/sq2Kp6x"
-          icon="menu"
-        />
-      </CBox>
-    </CBox>
-  </chakra.nav>
-</template>
-
 <script setup lang="ts">
+import ChakraLogo from "./ChakraLogo.vue"
+import ChakraLogoIcon from "./ChakraLogo.vue"
+import SponsorButton from "./SponsorButton.vue"
+// import { SearchButton } from "./AlgoliaSearch.vue"
+// import { MobileNavButton } from "./MobileNav.vue"
+import { VersionSwitcher } from "./VersionSwitcher.vue"
 import {
   chakra,
-  CBadge,
+  useColorMode,
+  useColorModeValue,
   CBox,
+  CHStack,
   CFlex,
   CIcon,
   CIconButton,
+  CLink,
 } from "@chakra-ui/vue-next"
-import ChakraUILogoIcon from "./ChakraLogoIcon.vue"
-import pkg from "../../packages/core/package.json"
+import { useWindowScroll } from "@vueuse/core"
+import { computed, onMounted, ref } from "vue"
+import siteConfig from "@/config/site-config"
+
+const { toggleColorMode } = useColorMode()
+const text = useColorModeValue("dark", "light")
+const switchIcon = useColorModeValue("moon", "sun")
+const bg = useColorModeValue("white", "gray.800")
+
+const isOpen = ref(false)
+
+const headerRef = ref<{ $el: HTMLDivElement } | undefined>(undefined)
+
+const { y } = useWindowScroll()
+
+const height = ref(0)
+
+onMounted(() => {
+  height.value = headerRef.value?.$el.getBoundingClientRect().height ?? 0
+})
+
+const headerShadow = computed(() => {
+  return y.value > height.value ? "sm" : undefined
+})
 </script>
+
+<template>
+  <chakra.header
+    ref="headerRef"
+    :box-shadow="headerShadow"
+    transition="box-shadow 0.2s, background-color 0.2s"
+    pos="sticky"
+    top="0"
+    zIndex="3"
+    left="0"
+    right="0"
+    width="full"
+    :bg="bg"
+    backdrop-filter="saturate(120%) blur(5px)"
+    border-top="6px solid"
+    border-color="emerald.500"
+  >
+    <chakra.nav height="4.5rem" mx="auto" maxW="8xl">
+      <!-- content -->
+
+      <CFlex w="100%" h="100%" px="6" align="center" justify="space-between">
+        <CFlex align="center">
+          <router-link to="/">
+            <chakra.a
+              display="block"
+              aria-label="Chakra UI Vue, Back to homepage"
+            >
+              <ChakraLogo :display="{ base: 'none', md: 'block' }" />
+              <CBox min-w="3rem" :display="{ base: 'block', md: 'none' }">
+                <ChakraLogoIcon />
+              </CBox>
+            </chakra.a>
+          </router-link>
+        </CFlex>
+
+        <!-- nav -->
+        <CFlex
+          justify="flex-end"
+          w="100%"
+          maxW="1100px"
+          align="center"
+          color="gray.400"
+        >
+          <!-- <SearchButton></SearchButton> -->
+          <VersionSwitcher></VersionSwitcher>
+          <CHStack spacing="5" :display="{ base: 'none', md: 'flex' }">
+            <CLink
+              isExternal
+              aria-label="Go to Chakra UI GitHub page"
+              :href="siteConfig.repo.url"
+            >
+              <CIcon
+                display="block"
+                transition="color 0.2s"
+                w="5"
+                h="5"
+                :_hover="{ color: 'gray.600' }"
+                name="github"
+              />
+            </CLink>
+            <CLink
+              isExternal
+              aria-label="Go to Chakra UI Discord page"
+              :href="siteConfig.discord"
+            >
+              <CIcon
+                display="block"
+                transition="color 0.2s"
+                w="5"
+                h="5"
+                :_hover="{ color: 'gray.600' }"
+                name="discord"
+              />
+            </CLink>
+            <CLink
+              isExternal
+              aria-label="Go to Chakra UI YouTube channel"
+              :href="siteConfig.youtube"
+            >
+              <CIcon
+                display="block"
+                transition="color 0.2s"
+                w="5"
+                h="5"
+                :_hover="{ color: 'gray.600' }"
+                name="youtube"
+              />
+            </CLink>
+          </CHStack>
+          <CIconButton
+            size="md"
+            fontSize="lg"
+            :aria-label="`Switch to ${text} mode`"
+            :title="`Switch to ${text} mode`"
+            variant="ghost"
+            color="current"
+            :ml="{ base: '0', md: '3' }"
+            @click="toggleColorMode"
+            :icon="switchIcon"
+          />
+          <SponsorButton ml="5" />
+          <!-- <mobile-nav-button @click="isOpen = true"></mobile-nav-button> -->
+        </CFlex>
+      </CFlex>
+      <!-- <mobile-nav :is-open="isOpen" @close="isOpen = false"></mobile-nav> -->
+    </chakra.nav>
+  </chakra.header>
+</template>

website-new/components/VersionSwitcher.vue

@@ -0,0 +1,44 @@
+<script lang="tsx">
+import { defineComponent } from "vue"
+import { useColorModeValue, CBox } from "@chakra-ui/vue-next"
+import pkgJSON from "../../packages/core/package.json"
+export default {}
+
+const versions = [
+  { label: `v${pkgJSON.version}`, url: "https://next.vue.chakra-ui.com/" },
+  { label: "v0.8.x", url: "https://vue.chakra-ui.com" },
+]
+
+const v1Url = versions[0].url
+
+export const VersionSwitcher = defineComponent({
+  setup() {
+    return () => {
+      return (
+        <CBox
+          as="select"
+          margin-end="1rem"
+          variant="unstyled"
+          fontWeight="semibold"
+          color={useColorModeValue("gray.600", "whiteAlpha.600").value}
+          bg="transparent"
+          value={v1Url}
+          fontSize="sm"
+          flexShrink="0"
+          display={{ base: "none", md: "flex" }}
+          aria-label="Select the Chakra UI Docs version. You're currently viewing the version 1.0 docs"
+          onChange={(e: any) => {
+            document.location = e.target.value
+          }}
+        >
+          {versions.map(({ label, url }) => (
+            <option key={url} value={url}>
+              {label}
+            </option>
+          ))}
+        </CBox>
+      )
+    }
+  },
+})
+</script>