Merge pull request #47 from chakra-ui/docs/add-logo-to-navbar

feat: add chakra logo to navbar

Author: codebender828

website/src/components/ChakraLogoIcon.vue

@@ -0,0 +1,41 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 181 181"
+    xmlns="http://www.w3.org/2000/svg"
+    style="
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      stroke-linejoin: round;
+      stroke-miterlimit: 2;
+    "
+  >
+    <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>
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ChakraUILogoIcon',
+})
+</script>

website/src/components/Navbar.vue

@@ -2,7 +2,7 @@
   <chakra.nav
     h="60px"
     w="100%"
-    px="4"
+    :px="[4, 10, 12]"
     d="flex"
     position="fixed"
     align-items="center"
@@ -12,7 +12,28 @@
     border-top="6px solid"
     border-color="vue.500"
   >
-    <CFlex align-items="center" :flex="{ base: 0, sm: 1 }" />
+    <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="45px" mr="2"><ChakraUILogoIcon /></CBox>
+        <chakra.h1
+          font-size="2xl"
+          font-family="heading"
+          letter-spacing="tighter"
+          mt="8px"
+          :d="{ base: 'none', md: 'block' }"
+        >
+          Chakra Chidori
+        </chakra.h1>
+      </chakra.a>
+    </CFlex>
     <CFlex flex="1" justify-content="center">
       <CIcon name="search" mt="8px" />
     </CFlex>
@@ -78,6 +99,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { CBox, CFlex, CIconButton, CIcon } from '@chakra-ui/vue-next'
+import ChakraUILogoIcon from './ChakraLogoIcon.vue'
 
 export default defineComponent({
   name: 'Navbar',
@@ -86,6 +108,7 @@ export default defineComponent({
     CFlex,
     CIconButton,
     CIcon,
+    ChakraUILogoIcon,
   },
 })
 </script>