From 912d4aa41f7766fa156b4e91e330faa428ade25d Mon Sep 17 00:00:00 2001
From: jpark <jung.hyun.park516@gmail.com>
Date: Thu, 10 Nov 2022 16:23:57 -0500
Subject: [PATCH 1/4] feat: fix doc page stylings and create mobile side nav
 bar

---
 docs/components/CopyButton.tsx                |   2 +-
 .../components/homepage-components/Layout.tsx |   2 +-
 docs/components/homepage-components/Nav.tsx   |   4 +-
 docs/global.css                               | 104 +++++++++++++
 docs/theme/arrow-right.tsx                    |  20 ++-
 docs/theme/close-icon.tsx                     |  14 ++
 docs/theme/hamburger.tsx                      |  13 ++
 docs/theme/index.js                           | 139 ++++++++++++------
 docs/theme/minerva-logo-side.tsx              |  20 +++
 docs/theme/styles.css                         |   1 +
 src/tailwind-theme-ui.json                    |   1 +
 11 files changed, 267 insertions(+), 53 deletions(-)
 create mode 100644 docs/theme/close-icon.tsx
 create mode 100644 docs/theme/hamburger.tsx
 create mode 100644 docs/theme/minerva-logo-side.tsx

diff --git a/docs/components/CopyButton.tsx b/docs/components/CopyButton.tsx
index 5d203548..d6a3e51a 100644
--- a/docs/components/CopyButton.tsx
+++ b/docs/components/CopyButton.tsx
@@ -76,7 +76,7 @@ const Copy = ({
       name={label}
       disabled={copied}
       className="code-copy-button"
-      zIndex={500}
+      zIndex={10}
       onClick={async () => {
         await copyToClipboard(trim ? content.trim() : content);
         setCopied(true);
diff --git a/docs/components/homepage-components/Layout.tsx b/docs/components/homepage-components/Layout.tsx
index 4a92f925..a5b9a31a 100644
--- a/docs/components/homepage-components/Layout.tsx
+++ b/docs/components/homepage-components/Layout.tsx
@@ -6,7 +6,7 @@ import '@docsearch/css';
 
 export default function Layout({ children }) {
   return (
-    <Box bg="#fafafa" minHeight="100vh">
+    <Box bg="#fafafa" minHeight="100vh" className="main-layout">
       <Nav />
       {children}
       <Footer />
diff --git a/docs/components/homepage-components/Nav.tsx b/docs/components/homepage-components/Nav.tsx
index fa966644..f98dc5a2 100644
--- a/docs/components/homepage-components/Nav.tsx
+++ b/docs/components/homepage-components/Nav.tsx
@@ -23,7 +23,7 @@ export default function Nav() {
   const { pathname } = useRouter();
 
   return (
-    <nav className="py-6 pt-8 px-4 sm:px-16 sm:pt-6 mx-auto flex space-between w-full">
+    <nav className="pb-4 pt-16 sm:py-8 lg:py-10 pt-8 px-6 sm:px-4 sm:px-10 lg:px-20 mx-auto flex space-between w-full">
       <DocSearch />
       <Flex className="items-center" minWidth="max-content">
         <div className="sm:hidden flex">
@@ -59,7 +59,7 @@ export default function Nav() {
           <Flex
             borderRight="1px solid #DEDEE0"
             height="max-content"
-            mr="4"
+            mr="8"
             py="2"
             minWidth="max-content"
           >
diff --git a/docs/global.css b/docs/global.css
index 665ea6db..9d196c24 100644
--- a/docs/global.css
+++ b/docs/global.css
@@ -10,11 +10,111 @@ h3 code {
   font-size: inherit;
 }
 
+code {
+  background-color: transparent;
+  color: #130F1C;
+}
+
+
 content pre {
   position: relative;
   background-color: rgba(101, 31, 255, 0.05);
 }
 
+.token {
+  color: #000000 !important;
+  /* font-family: 'Roboto Mono'; */
+  font-weight: normal !important;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: -0.02em;
+}
+
+.comment {
+  color: #8E82A9 !important;
+}
+
+
+pre code .token-line .function {
+  color: #651FFF !important;
+}
+
+pre code .token-line .function-variable {
+  color: #000000 !important;
+}
+
+
+main p {
+ font-family: 'Roboto Condensed';
+ color: #56447F;
+ font-weight: 400;
+}
+
+main li {
+  list-style: none;
+}
+
+main ul {
+  margin-left: 0px;
+}
+
+main a {
+  color: #651FFF;
+}
+
+main li {
+  font-family: 'Roboto Condensed';
+}
+
+main h1 {
+  font-family: 'Roboto';
+  color: #130F1C;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+main h2 {
+  font-family: 'Roboto';
+  font-size: 24px;
+  color: #130F1C;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+main h3 {
+    font-family: 'Roboto';
+    font-size: 20px;
+    color: #130F1C;
+    font-weight: 500;
+    line-height: 28px;
+    letter-spacing: -0.02em;
+    margin: 32px 0 32px 0;
+}
+
+main ol li {
+  color: #56447F;
+}
+
+
+/* .noblur *{
+  z-index: 200;
+  filter: blur(5px);
+} */
+
+.sidebar-blur {
+  backdrop-filter: blur(5px);
+  background-color: rgba(30, 6, 84, 0.33);
+  width: 25%;
+  height: 100vh;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 10;
+  opacity: 1;
+}
+
+
 input[type='color'] {
   width: 40px;
   height: 40px;
@@ -44,6 +144,10 @@ input[type='color']::-webkit-color-swatch {
   height: auto;
 }
 
+.DocSearch-Button-Keys {
+  visibility: hidden;
+}
+
 .DocSearch-Search-Icon {
   color: #bab9bd !important;
 }
diff --git a/docs/theme/arrow-right.tsx b/docs/theme/arrow-right.tsx
index 9118ec80..65cd9ab4 100644
--- a/docs/theme/arrow-right.tsx
+++ b/docs/theme/arrow-right.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 
-const ArrowRight = ({ height = 24, ...props }) => {
+const ArrowRight = ({ height = 12, ...props }) => {
   return (
-    <svg height={height} viewBox="0 0 24 24" fill="none" {...props}>
+    <svg
+      width="24"
+      height={height}
+      viewBox="0 0 7 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
-        d="M3 12h18m0 0l-6.146-6M21 12l-6.146 6"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.16026 11.5195L0.240234 10.0796L3.30025 5.99941L0.240257 1.91956L2.16023 0.479531L6.30025 5.99936L2.16026 11.5195Z"
+        fill="#8E82A9"
       />
     </svg>
   );
diff --git a/docs/theme/close-icon.tsx b/docs/theme/close-icon.tsx
new file mode 100644
index 00000000..02fb7594
--- /dev/null
+++ b/docs/theme/close-icon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const CloseIcon = ({ height = 12, ...props }) => {
+  return (
+    <svg height={height} viewBox="0 0 12 12" fill="none" {...props}>
+      <path
+        d="M6.00009 7.6991L9.95156 11.6506L11.6486 9.95352L7.69715 6.00204L11.6486 2.05057L9.95156 0.353516L6.00009 4.30499L2.04862 0.353516L0.351562 2.05057L4.30303 6.00204L0.351562 9.95352L2.04862 11.6506L6.00009 7.6991Z"
+        fill="#130F1C"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/docs/theme/hamburger.tsx b/docs/theme/hamburger.tsx
new file mode 100644
index 00000000..d1c5c193
--- /dev/null
+++ b/docs/theme/hamburger.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Hamburger = ({ height = 24, ...props }) => {
+  return (
+    <svg height={height} viewBox="0 0 24 24" fill="none" {...props}>
+      <rect x="4" y="5" width="16" height="2" fill="#8E82A9" />
+      <rect x="4" y="11" width="16" height="2" fill="#8E82A9" />
+      <rect x="4" y="17" width="16" height="2" fill="#8E82A9" />
+    </svg>
+  );
+};
+
+export default Hamburger;
diff --git a/docs/theme/index.js b/docs/theme/index.js
index aecae369..8287bea7 100644
--- a/docs/theme/index.js
+++ b/docs/theme/index.js
@@ -15,6 +15,9 @@ import flatten from './utils/flatten';
 import reorderBasedOnMeta from './utils/reorder';
 
 import ArrowRight from './arrow-right';
+import CloseIcon from './close-icon';
+import Hamburger from './hamburger';
+import MinervaLogo from './minerva-logo-side';
 import HomePageLayout from '../components/homepage-components/Layout';
 
 import Theme from './misc/theme';
@@ -42,8 +45,9 @@ function Folder({ item, anchors }) {
         onClick={() => {
           if (active) return;
           TreeState[item.route] = !open;
-          render(x => !x);
+          render((x) => !x);
         }}
+        style={{ color: '#000000', fontWeight: '700' }}
         className="text-black"
       >
         {item.title}
@@ -67,15 +71,27 @@ function File({ item, anchors }) {
   const title = item.title;
   // if (item.title.startsWith('> ')) {
   // title = title.substr(2)
-  if (anchors && anchors.length) {
+  if (anchors && (anchors.length > -1)) {
     if (active) {
       return (
-        <li className={active ? 'active' : ''}>
+        <li className={active ? 'active' : ''} style={{ fontFamily: 'Roboto' }}>
           <Link href={item.route}>
-            <a className={active ? 'active-link' : 'hover:bg-red-200'} style={active ? { background: 'rgba(101, 31, 255, 0.1)', color: '#651FFF' } : {}}>{title}</a>
+            <a
+              className={active ? 'active-link' : 'hover:bg-red-200'}
+              style={
+                active
+                  ? {
+                      background: 'rgba(101, 31, 255, 0.1)',
+                      color: '#651FFF',
+                    }
+                  : {}
+              }
+            >
+              {title}
+            </a>
           </Link>
-          <ul>
-            {anchors.map(anchor => {
+          <ul style={{ fontFamily: 'Roboto' }}>
+            {anchors.map((anchor) => {
               const title =
                 typeof anchor === 'string' ? anchor : anchor?.props?.children;
               const slug = slugify(title || '');
@@ -86,7 +102,7 @@ function File({ item, anchors }) {
                   onClick={() => setMenu(false)}
                 >
                   <span className="flex">
-                    <span className="mr-2 opacity-25 text-grayDark">#</span>
+                    <span className="mr-2 text-grayDark">#</span>
                     <span className="inline-block text-grayDark">{anchor}</span>
                   </span>
                 </a>
@@ -99,9 +115,16 @@ function File({ item, anchors }) {
   }
 
   return (
-    <li className={active ? 'active' : ''}>
+    <li
+      className={active ? 'active' : ''}
+      style={{
+        fontFamily: 'Roboto',
+      }}
+    >
       <Link href={item.route}>
-        <a onClick={() => setMenu(false)}>{title}</a>
+        <a style={['Getting Started', 'Change Log'].includes(title) ? { color: '#000000', fontWeight: '700' } : {}} onClick={() => setMenu(false)}>
+          {title}
+        </a>
       </Link>
     </li>
   );
@@ -110,7 +133,7 @@ function File({ item, anchors }) {
 function Menu({ dir, anchors }) {
   return (
     <ul>
-      {dir.map(item => {
+      {dir.map((item) => {
         if (item.children) {
           return <Folder key={item.name} item={item} anchors={anchors} />;
         }
@@ -120,20 +143,33 @@ function Menu({ dir, anchors }) {
   );
 }
 
-function Sidebar({ show, directories, anchors }) {
+function Sidebar({ show, directories, anchors, setMenu }) {
   return (
     <aside
-      className={`h-screen flex-shrink-0 w-full md:w-64 md:border-r md:block fixed md:sticky z-10 ${
+      className={`h-screen flex-shrink-0 w-full lg:ml-24 md:w-64 md:border-r md:block fixed md:sticky z-20 ${
         show ? '' : 'hidden'
       }`}
       style={{
         top: '4rem',
         height: 'calc(100vh - 4rem)',
+        fontFamily: 'Roboto',
       }}
     >
-      <div className="sidebar w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto">
+      <div
+        className="sidebar sm:w-full pt-8 pl-6 sm:pl-10 pr-10 sm:pr-4 lg:pr-8 pb-40 md:pb-16 h-full overflow-y-auto w-3/4 absolute sm:static z-10"
+        style={{
+          backgroundColor: '#FAFAFA',
+          bottom: '0px',
+          height: '100vh',
+        }}
+      >
+        <div className="sm:hidden flex justify-between items-center mb-10 mt-8">
+          <MinervaLogo />
+          <CloseIcon onClick={() => setMenu(false)} />
+        </div>
         <Menu dir={directories} anchors={anchors} />
       </div>
+      <div className={show ? 'sidebar-blur sm:hidden' : 'hidden'}></div>
     </aside>
   );
 }
@@ -147,7 +183,10 @@ const NextLink = ({ config, flatDirectories, currentIndex }) => {
 
   return (
     <Link href={next.route}>
-      <a className="text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center ml-2">
+      <a
+        className="text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center ml-2"
+        style={{ color: '#8E82A9'}}
+      >
         {next.title}
         <ArrowRight className="inline ml-1 flex-shrink-0" />
       </a>
@@ -183,15 +222,15 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
 
   const filepath = route.slice(0, route.lastIndexOf('/') + 1);
   const filepathWithName = filepath + filename;
-  const titles = React.Children.toArray(children).filter(child =>
+  const titles = React.Children.toArray(children).filter((child) =>
     titleType.includes(child.props.mdxType)
   );
-  const titleEl = titles.find(child => child.props.mdxType === 'h1');
+  const titleEl = titles.find((child) => child.props.mdxType === 'h1');
   const title = titleEl ? titleEl.props.children : filename.split('.')[0];
   // const title = titleEl ? titleEl.props.children : 'Untitled'
   const anchors = titles
-    .filter(child => child.props.mdxType === 'h2')
-    .map(child => child.props.children);
+    .filter((child) => child.props.mdxType === 'h2')
+    .map((child) => child.props.children);
 
   useEffect(() => {
     if (menu) {
@@ -202,7 +241,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
   }, [menu]);
 
   const currentIndex = useMemo(
-    () => flatDirectories.findIndex(dir => dir.route === pathname),
+    () => flatDirectories.findIndex((dir) => dir.route === pathname),
     [flatDirectories, pathname]
   );
 
@@ -217,11 +256,28 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
       </Head>
       <HomePageLayout>
         <div className="main-container flex flex-col">
+          {/* <div className="sidebar-blur">
+
+          </div> */}
           <div className="flex flex-1 h-full border-t border-dark-gray mb-16">
-            <MenuContext.Provider value={{ setMenu }}>
-              <Sidebar show={menu} anchors={anchors} directories={directories} />
-            </MenuContext.Provider>
-            <content className="relative pt-20 px-6 md:px-8 w-full max-w-full overflow-x-hidden">
+              <MenuContext.Provider value={{ setMenu }}>
+                <Sidebar
+                  setMenu={setMenu}
+                  show={menu}
+                  anchors={anchors}
+                  directories={directories}
+                />
+              </MenuContext.Provider>
+            <content className="relative pt-3 py-6 px-6 sm:py-4 sm:pt-8 lg:p-8 w-full max-w-full overflow-x-hidden">
+              <div
+                className="sm:hidden pb-3 px-6 border-b border-dark-gray -mx-6 mb-3 flex gap-4 pointer"
+                onClick={() => setMenu(true)}
+              >
+                <Hamburger />
+                <p className="mt-0" style={{ fontFamily: 'Roboto Condensed' }}>
+                  {title}
+                </p>
+              </div>
               <main className="max-w-screen-md">
                 {/* {!titleEl ? } */}
                 <Theme>
@@ -231,23 +287,23 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
                   )}
                   {children}
                 </Theme>
-                  <nav className="flex flex-row items-center justify-between mt-16">
-                    <div>
-                      <PrevLink
-                        config={config}
-                        flatDirectories={flatDirectories}
-                        currentIndex={currentIndex}
-                      />
-                    </div>
+                <nav className="flex flex-row items-center justify-between mt-16">
+                  <div>
+                    <PrevLink
+                      config={config}
+                      flatDirectories={flatDirectories}
+                      currentIndex={currentIndex}
+                    />
+                  </div>
 
-                    <div>
-                      <NextLink
-                        config={config}
-                        flatDirectories={flatDirectories}
-                        currentIndex={currentIndex}
-                      />
-                    </div>
-                  </nav>
+                  <div>
+                    <NextLink
+                      config={config}
+                      flatDirectories={flatDirectories}
+                      currentIndex={currentIndex}
+                    />
+                  </div>
+                </nav>
               </main>
             </content>
           </div>
@@ -257,6 +313,5 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
   );
 };
 
-export default (opts, config) => props => (
-  <Layout config={config} {...opts} {...props} />
-);
+export default (opts, config) => (props) =>
+  <Layout config={config} {...opts} {...props} />;
diff --git a/docs/theme/minerva-logo-side.tsx b/docs/theme/minerva-logo-side.tsx
new file mode 100644
index 00000000..aa09f7a1
--- /dev/null
+++ b/docs/theme/minerva-logo-side.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const MinervaLogoSide = () => {
+  return (
+    <svg
+      width="27"
+      height="33"
+      viewBox="0 0 27 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M25.6111 7.90664C25.2201 6.11606 24.5033 4.54121 23.5692 3.26839C23.9385 3.22524 24.3078 3.20367 24.6771 3.20367V0.830606C23.5258 0.830606 22.4396 0.981619 21.4404 1.26207C20.9842 0.960045 20.528 0.722739 20.0284 0.52858C17.6389 -0.399071 14.8584 -0.075472 12.7295 1.26207C11.7303 0.981619 10.6442 0.830606 9.49285 0.830606V3.20367C9.86214 3.20367 10.2314 3.22524 10.6007 3.26839C10.4269 3.48412 10.2749 3.72142 10.1445 3.9803C9.79697 4.56278 9.51457 5.20998 9.23218 5.9219C9.10184 6.28864 9.01495 6.72011 8.92806 7.04371C8.71083 7.99293 8.51533 8.94216 8.38499 9.7188L0 23.8277L0.651683 24.4749C2.78051 26.5891 5.49586 27.8403 8.36327 28.2287L6.60372 32.004H9.23218L10.4487 29.3936L11.6651 32.004H11.7955H14.2936H14.4239L15.6404 29.3936L16.8569 32.004H19.4853L17.0524 26.7833C18.0516 26.3086 19.0074 25.7046 19.8981 25.0142C23.9819 21.843 26.2411 17.5067 26.2194 12.8038C26.2628 11.4662 25.9587 9.26576 25.6111 7.90664ZM19.0509 2.29759C18.2906 2.81535 17.6172 3.4194 17.0741 4.08817C16.5528 3.44097 15.9011 2.85849 15.1408 2.34073C16.4224 2.01714 17.7909 1.99556 19.0509 2.29759ZM15.6838 6.1592C15.9011 6.65539 15.8359 7.2163 15.5318 7.64776L15.2928 7.99293C15.9228 8.35968 16.531 8.81272 17.0741 9.35205C17.6389 8.79114 18.2471 8.33811 18.8771 7.97136L18.6381 7.64776C18.334 7.2163 18.2689 6.65539 18.4861 6.1592C18.8771 5.25313 19.7894 4.47649 21.0059 3.95873C22.4396 5.38257 23.0696 7.41046 23.3085 8.64013C21.701 8.9853 19.2029 9.7188 17.1175 11.3799C15.0756 9.74037 12.6209 9.00688 11.0134 8.66171C11.0786 8.31653 11.1655 7.94979 11.2524 7.58304C11.3176 7.32416 11.3827 6.97899 11.4696 6.74168C11.6869 6.1592 11.9258 5.64145 12.1865 5.18841C12.4471 4.75694 12.7295 4.3902 13.0337 4.0666C13.0771 4.02345 13.1206 4.00188 13.1423 3.95873C14.3805 4.47649 15.2928 5.25313 15.6838 6.1592ZM6.7775 24.8417C5.73481 24.8632 4.47489 24.4318 3.51909 23.763C3.41048 23.6767 3.21497 23.5473 3.04119 23.3963C3.75804 22.2313 5.58275 19.1247 10.4052 11.0132C13.0988 11.4231 14.5108 12.6959 14.7715 12.9764C16.9655 15.1553 15.7273 18.2834 15.0756 19.5131C13.403 22.7275 10.1445 24.8201 6.7775 24.8417ZM13.0771 29.3289L12.5558 28.1855C12.9468 28.1208 13.3378 28.0561 13.7071 27.9698L13.0771 29.3289ZM18.4861 23.1374C16.531 24.6475 14.2719 25.5536 12.0127 25.8556C14.1632 24.7122 16.0097 22.8785 17.2044 20.5702C18.4644 18.1539 18.725 15.7593 18.0299 13.753C19.7026 12.1134 21.8966 11.3799 23.743 10.97C23.8299 11.6604 23.8733 12.3076 23.8733 12.8253C23.895 17.8951 20.9408 21.2389 18.4861 23.1374Z"
+        fill="#651FFF"
+      />
+    </svg>
+  );
+};
+
+export default MinervaLogoSide;
diff --git a/docs/theme/styles.css b/docs/theme/styles.css
index 86ead71e..e31230ff 100644
--- a/docs/theme/styles.css
+++ b/docs/theme/styles.css
@@ -87,6 +87,7 @@ figure figcaption {
 .sidebar {
   @apply select-none;
 }
+
 .sidebar ul ul {
   @apply ml-5;
 }
diff --git a/src/tailwind-theme-ui.json b/src/tailwind-theme-ui.json
index 1b7cbaed..611bd94b 100644
--- a/src/tailwind-theme-ui.json
+++ b/src/tailwind-theme-ui.json
@@ -154,6 +154,7 @@
   "fonts": {
     "sans": "system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
     "serif": "Georgia,Cambria,\"Times New Roman\",Times,serif",
+    "roboto": "Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
     "mono": "Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
     "body": "system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
     "heading": "inherit",

From e9459ef52544aba470190939cd3dc79b3f0d52f2 Mon Sep 17 00:00:00 2001
From: jpark <jung.hyun.park516@gmail.com>
Date: Fri, 11 Nov 2022 09:57:31 -0500
Subject: [PATCH 2/4] feat: add meta tags

---
 docs/pages/about.tsx    | 14 ++++++++++++++
 docs/pages/homepage.tsx | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index 0c6afa81..673e063e 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -11,6 +11,8 @@ import {
 } from 'minerva-ui';
 import Layout from '../components/homepage-components/Layout';
 
+import Head from 'next/head';
+
 const MidSection = styled(Box)`
   margin-top: -8rem;
 `;
@@ -76,6 +78,18 @@ const MainText = styled(Text)`
 export default function About() {
   return (
     <Layout>
+      <Head>
+        <title>About - Minerva UI</title>
+        <meta
+          name="description"
+          content="We’re a team of product people passionate about building apps that work seamlessly and look amazing"
+        />
+        <meta
+          name="og:description"
+          content="We’re a team of product people passionate about building apps that work seamlessly and look amazing"
+        />
+        {/* <meta name="og:image" content="../public/minerva_logo_purple.png" /> */}
+      </Head>
       <Flex
         // className="lg:align-items-center"
         flexDirection="column"
diff --git a/docs/pages/homepage.tsx b/docs/pages/homepage.tsx
index 87d285e8..720cdf1f 100644
--- a/docs/pages/homepage.tsx
+++ b/docs/pages/homepage.tsx
@@ -1,9 +1,23 @@
 import Layout from '../components/homepage-components/Layout';
 import HomeBody from '../components/homepage-components/HomeBody';
+import Head from 'next/head';
+
 
 export default function HomePage() {
   return (
     <Layout>
+      <Head>
+        <title>Home - Minerva UI</title>
+        <meta
+          name="description"
+          content="Your new favorite React component library. Professionally designed and built by a team of React developers and product designers—Minerva gives you the components needed to start building your React app stat."
+        />
+        <meta
+          name="og:description"
+          content="Your new favorite React component library. Professionally designed and built by a team of React developers and product designers—Minerva gives you the components needed to start building your React app stat."
+        />
+        {/* <meta name="og:image" content="../public/minerva_logo_purple.png" /> */}
+      </Head>
       <HomeBody />
     </Layout>
   );

From f26d9a2dca1eaa8c806662ba5c662f3ed605025d Mon Sep 17 00:00:00 2001
From: jpark <jung.hyun.park516@gmail.com>
Date: Fri, 11 Nov 2022 11:30:03 -0500
Subject: [PATCH 3/4] feat: add breadcrumbs

---
 docs/pages/homepage.tsx |  3 +--
 docs/theme/index.js     | 45 +++++++++++++++++++++++++++++++----------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/docs/pages/homepage.tsx b/docs/pages/homepage.tsx
index 720cdf1f..d36d7f75 100644
--- a/docs/pages/homepage.tsx
+++ b/docs/pages/homepage.tsx
@@ -2,7 +2,6 @@ import Layout from '../components/homepage-components/Layout';
 import HomeBody from '../components/homepage-components/HomeBody';
 import Head from 'next/head';
 
-
 export default function HomePage() {
   return (
     <Layout>
@@ -16,7 +15,7 @@ export default function HomePage() {
           name="og:description"
           content="Your new favorite React component library. Professionally designed and built by a team of React developers and product designers—Minerva gives you the components needed to start building your React app stat."
         />
-        {/* <meta name="og:image" content="../public/minerva_logo_purple.png" /> */}
+        <meta name="og:image" content="../public/minerva_logo_purple.png" />
       </Head>
       <HomeBody />
     </Layout>
diff --git a/docs/theme/index.js b/docs/theme/index.js
index 8287bea7..a9631d2c 100644
--- a/docs/theme/index.js
+++ b/docs/theme/index.js
@@ -225,6 +225,8 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
   const titles = React.Children.toArray(children).filter((child) =>
     titleType.includes(child.props.mdxType)
   );
+  console.log(filepath.replaceAll('/',''));
+  const filePathString = filepath.replaceAll('/','');
   const titleEl = titles.find((child) => child.props.mdxType === 'h1');
   const title = titleEl ? titleEl.props.children : filename.split('.')[0];
   // const title = titleEl ? titleEl.props.children : 'Untitled'
@@ -260,23 +262,44 @@ const Layout = ({ filename, config: _config, pageMap, children }) => {
 
           </div> */}
           <div className="flex flex-1 h-full border-t border-dark-gray mb-16">
-              <MenuContext.Provider value={{ setMenu }}>
-                <Sidebar
-                  setMenu={setMenu}
-                  show={menu}
-                  anchors={anchors}
-                  directories={directories}
-                />
-              </MenuContext.Provider>
+            <MenuContext.Provider value={{ setMenu }}>
+              <Sidebar
+                setMenu={setMenu}
+                show={menu}
+                anchors={anchors}
+                directories={directories}
+              />
+            </MenuContext.Provider>
             <content className="relative pt-3 py-6 px-6 sm:py-4 sm:pt-8 lg:p-8 w-full max-w-full overflow-x-hidden">
               <div
                 className="sm:hidden pb-3 px-6 border-b border-dark-gray -mx-6 mb-3 flex gap-4 pointer"
                 onClick={() => setMenu(true)}
               >
                 <Hamburger />
-                <p className="mt-0" style={{ fontFamily: 'Roboto Condensed' }}>
-                  {title}
-                </p>
+                <div className="flex items-center">
+                  {
+                    !!filePathString && 
+                    <div className="flex items-center">
+                      <p
+                        className="mt-0"
+                        style={{
+                          fontFamily: 'Roboto Condensed',
+                          color: '#8E82A9',
+                          fontWeight: '400'
+                        }}
+                      >
+                        {filePathString[0].toUpperCase() + filePathString.slice(1)}
+                      </p>
+                      <ArrowRight />
+                    </div>
+                  }
+                  <p
+                    className="mt-0"
+                    style={{ fontFamily: 'Roboto Condensed' }}
+                  >
+                    {title}
+                  </p>
+                </div>
               </div>
               <main className="max-w-screen-md">
                 {/* {!titleEl ? } */}

From 7f5d69b8819beaed928ec937ccfba5f2795af86e Mon Sep 17 00:00:00 2001
From: jpark <jung.hyun.park516@gmail.com>
Date: Fri, 11 Nov 2022 11:33:25 -0500
Subject: [PATCH 4/4] feat: uncomment image meta tags

---
 docs/pages/about.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index 673e063e..c8a308cb 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -88,7 +88,7 @@ export default function About() {
           name="og:description"
           content="We’re a team of product people passionate about building apps that work seamlessly and look amazing"
         />
-        {/* <meta name="og:image" content="../public/minerva_logo_purple.png" /> */}
+        <meta name="og:image" content="../public/minerva_logo_purple.png" />
       </Head>
       <Flex
         // className="lg:align-items-center"