Add info bar

* add search box
* fix mobile menu item disapper issue

components/InfoBar.tsx

@@ -1,7 +1,16 @@
 import { FC } from 'react';
+import dynamic from 'next/dynamic';
+
+const SearchBox = dynamic(() => import('components/info-bar/SearchBox'));
 
 const InfoBar: FC = () => {
-  return <></>;
+  return (
+    <>
+      <div>
+        <SearchBox />
+      </div>
+    </>
+  );
 };
 
 export default InfoBar;

components/NavBar.tsx

@@ -49,6 +49,7 @@ const NavBar: FC = () => {
   const onToggle = useCallback(() => {
     setMenuIsOpen((menuIsOpen) => !menuIsOpen);
   }, []);
+
   // Mobile menu icon must manually clicked to colse when click the menu item.
   const handleMenuClick = useCallback(() => {
     (iconRef.current?.children[0] as HTMLDivElement).click();
@@ -76,9 +77,10 @@ const NavBar: FC = () => {
         className={cn(
           { 'max-h-[500px]': menuIsOpen },
           { 'py-4': menuIsOpen },
+          { 'max-h-0': !menuIsOpen },
           'bg-white mx-[-1.5rem] px-6  mt-4 overflow-hidden',
           'md:block md:bg-transparent md:mx-0 md:p-0',
-          'transition-all duration-500 h-auto max-h-0',
+          'transition-all duration-500 h-auto ',
           'md:max-h-max'
         )}
       >

components/PostCard.tsx

@@ -3,9 +3,10 @@ import { FC } from 'react';
 import cn from 'classnames';
 import { AllPostsWithDescription } from 'lib/readPosts';
 import dynamic from 'next/dynamic';
-import { FiCalendar, FiTag } from 'react-icons/fi';
+import { FiCalendar } from 'react-icons/fi';
 
 const DateFormater = dynamic(() => import('components/DateFormater'));
+const PostCardTags = dynamic(() => import('components/post-card/PostCardTags'));
 const PostCardImage = dynamic(
   () => import('components/post-card/PostCardImage')
 );
@@ -48,19 +49,7 @@ const PostCard: FC<AllPostsWithDescription> = ({
             </div>
 
             <div className="flex items-center">
-              {Array.isArray(tags) ? (
-                tags.map((tag) => (
-                  <div key={tag} className="flex items-center">
-                    <FiTag className="mr-2" />
-                    {tag}
-                  </div>
-                ))
-              ) : (
-                <div className="flex items-center">
-                  <FiTag className="mr-2" />
-                  {tags}
-                </div>
-              )}
+              <PostCardTags tags={tags} />
             </div>
           </div>
         </div>

components/info-bar/SearchBox.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import cn from 'classnames';
+import { FiSearch } from 'react-icons/fi';
+
+const SearchBox: FC = () => {
+  return (
+    <>
+      <div className="relative">
+        <FiSearch
+          className={cn(
+            'absolute z-10 w-[22px] h-[22px] text-gray-700',
+            'left-4 top-[50%] transform-gpu translate-y-[-50%]'
+          )}
+        />
+        <input
+          type="text"
+          placeholder="Search"
+          className={cn(
+            'w-full rounded-lg outline-none relative',
+            'py-5 px-12 placeholder:font-semibold',
+            'focus:px-5 focus:shadow-md focus:placeholder:font-normal',
+            'duration-300 transition-all focus:z-20'
+          )}
+        />
+        <div
+          className={cn(
+            'absolute z-10 border flex px-1 rounded',
+            'text-gray-700 font-semibold',
+            'right-4 top-[50%] transform-gpu translate-y-[-50%]'
+          )}
+        >
+          <code>/</code>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SearchBox;

components/post-card/PostCardTags.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { FiTag } from 'react-icons/fi';
+
+interface Props {
+  tags: string | string[];
+}
+
+const PostCardTags: FC<Props> = ({ tags }) => {
+  return (
+    <>
+      {Array.isArray(tags) ? (
+        tags.map((tag) => (
+          <div key={tag} className="flex items-center">
+            <FiTag className="mr-2" />
+            {tag}
+          </div>
+        ))
+      ) : (
+        <div className="flex items-center">
+          <FiTag className="mr-2" />
+          {tags}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PostCardTags;

layouts/MainLayout.tsx

@@ -5,6 +5,7 @@ import Sticky from 'react-stickynode';
 import useMediaQuery from 'lib/hooks/useMediaQuery';
 
 const NavBar = dynamic(() => import('components/NavBar'));
+const InfoBar = dynamic(() => import('components/InfoBar'));
 
 const MainLayout: FC = ({ children }) => {
   const matched = useMediaQuery('(max-width: 640px)');
@@ -39,7 +40,11 @@ const MainLayout: FC = ({ children }) => {
           {children}
         </main>
 
-        <aside className={cn('hidden', 'xl:block xl:col-span-2')}></aside>
+        <aside className={cn('hidden', 'xl:block xl:col-span-2')}>
+          <Sticky enabled={!matched} top={32}>
+            <InfoBar />
+          </Sticky>
+        </aside>
       </div>
     </>
   );