docs: fix styles and add algolia search classes (#12267)

* fix styles and add angolia search classes

* add class

* fix black

docs/src/components/DoczMenu.tsx

@@ -31,6 +31,7 @@ export default () => {
       mode="inline"
       defaultOpenKeys={[openKey]}
       defaultSelectedKeys={[selectedKey]}
+      className="docSearch-sidebar"
     >
       {menus.map((menuItem) => {
         if (menuItem.menu?.length > 0) {

docs/src/components/MainMenu.tsx

@@ -50,6 +50,9 @@ const headerStyle = css`
   .menu-sm {
     display: none;
   }
+  .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item-selected {
+    border-bottom: 2px solid #20A7C9;
+  }
   ${[mq[menuResponsiveIndex]]} {
     .menu-sm {
       display: block;
@@ -67,6 +70,7 @@ const logoStyle = css`
 
 interface menuProps {
   mode: string;
+  toggleDrawer: () => null;
 }
 
 const MenuItems = ({ mode, toggleDrawer }: menuProps) => {

docs/src/components/layout.scss

@@ -82,20 +82,46 @@ th, td {
 
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: lighten($brandColor, 42);
+  a:hover {
+    color: #fff;
+    border-bottom: $brandColor;
+  }
 }
 
 .ant-menu-item-selected a {
   color: black;
 }
-.ant-menu-submenu-selected {
+.ant-menu-submenu-selected,
+.ant-anchor .ant-anchor-link-active > .ant-anchor-link-title {
   color: $brandColor;
 }
 
-.ant-menu-horizontal {
-  & > .ant-menu-item:hover, & > .ant-menu-item-active {
-    color: $brandColor !important;
-    border-bottom: 2px solid $brandColor;
+.ant-anchor .ant-anchor-ink-ball {
+  border: 2px solid $brandColor;
+}
+
+.ant-menu-submenu,
+.ant-menu-submenu-title,
+.ant-anchor-link-title,
+.ant-menu .ant-menu-item a
+{
+  &:hover {
+    color:$brandColor;
   }
+}
+
+.ant-anchor .ant-anchor-ink-ball {
+  border: 2px solid $brandColor;
+}
+
+.ant-menu-horizontal {
+  &:not(.ant-menu-dark) {
+    & > .ant-menu-item:hover, & > .ant-menu-item-active {
+      color: $brandColor;
+      border-bottom: 2px solid $brandColor;
+    }
+  }
+
   & >.ant-menu-item-selected {
     color: $brandColor;
     border-bottom: 2px solid $brandColor;

docs/src/components/layout.tsx

@@ -78,7 +78,7 @@ const doczLayoutStyle = css`
   margin-top: 3px;
   background-color: white;
   img {
-    max-width: 800px;
+    max-width: 100%;
     margin-bottom: 15px;
   }
   blockquote {
@@ -104,18 +104,19 @@ const doczLayoutStyle = css`
   ul {
     font-size: 16px;
   }
+  h2, h3 {
+    padding-top: 64px;
+    margin-top: -64px;
+  }
 `;
 
 const contentLayoutDocsStyle = css`
-  position: fixed;
-  top: 64px;
-  left: ${leftPaneWidth}px;
-  right: 0px;
-  bottom: 0px;
+  margin-top: 64px;
+  padding-left: ${leftPaneWidth}px;
   overflow: visible;
   ${[mq[2]]} {
-    top: 64px;
-    left: 0;
+    padding-left: 0px;
+    margin-top: 64px;
   }
   aside {
     ${[mq[2]]} {

docs/src/gatsby-theme-docz/index.tsx

@@ -34,7 +34,8 @@ interface Props {
 const docLayout = css`
   display: flex;
   flex-direction: row;
-  .doc-content {
+  .docSearch-content {
+    word-wrap: break-all;
     width: 100%;
   }
 
@@ -51,7 +52,7 @@ const Theme = ({ children }: Props) => {
       <Layout>
         <SEO title="Documentation" />
         <div css={docLayout}>
-          <div className="doc-content">
+          <div className="docSearch-content">
             {children}
           </div>
           <AnchorNavigator />