better header

thanhdanh27600 · Sep 13, 2023 · 9736fb7 · 9736fb7
1 parent ea4c3c0
commit 9736fb7
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 14 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -20,6 +20,7 @@
   "shortenedURL": "Shortened URL",
   "shortenSuccess": "That was fast! URL has been successfully shortened.",
   "urlShortener": "URL Shortener",
+  "noteEditor": "Create Note",
   "viewMore": "View more",
   "errorInvalidForward": "Invalid forwarded link (ex: {{name}})",
   "unknown": "Unknown",

diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
@@ -20,6 +20,7 @@
   "shortenedURL": "URL rút gọn",
   "shortenSuccess": "Rút gọn link thành công!",
   "urlShortener": "Rút gọn link",
+  "noteEditor": "Tạo ghi chú",
   "viewMore": "Xem thêm",
   "errorInvalidForward": "Link rút gọt không hợp lệ (vd: {{name}})",
   "unknown": "Không xác định",

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
@@ -14,15 +14,7 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
 }
 
 export const Button = (props: ButtonProps) => {
-  const {
-    text = 'Button',
-    variant = 'filled',
-    loading,
-    animation,
-    hoverTransform = true,
-    TextClassname,
-    ...otherProps
-  } = props;
+  const { text, variant = 'filled', loading, animation, hoverTransform = true, TextClassname, ...otherProps } = props;
   return (
     <button
       {...otherProps}
@@ -40,7 +32,7 @@ export const Button = (props: ButtonProps) => {
       )}
       disabled={props.loading || props.disabled}>
       <span className={clsx('flex min-w-max items-center justify-center', TextClassname)}>
-        <span className={clsx(loading && 'max-sm:hidden')}>{text}</span>
+        <span className={clsx(loading && 'max-sm:hidden')}>{text || props.children}</span>
         {props.loading && <Loading className={clsx(loading && 'sm:ml-2', '!h-5 !w-5')} />}
       </span>
     </button>

diff --git a/src/components/atoms/Sidebar.tsx b/src/components/atoms/Sidebar.tsx
@@ -0,0 +1,76 @@
+import { Menu } from '@styled-icons/feather';
+import clsx from 'clsx';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useTrans } from 'utils/i18next';
+
+interface Props {
+  className?: string;
+}
+
+export const Sidebar = ({ className }: Props) => {
+  const router = useRouter();
+  const { t } = useTrans();
+
+  return (
+    <>
+      <button
+        className={clsx(
+          'rounded-lg border border-solid border-gray-200 p-4 transition-colors hover:bg-gray-50 hover:text-cyan-500',
+          className,
+        )}
+        type="button"
+        data-te-offcanvas-toggle=""
+        data-te-target="#offcanvasRight"
+        aria-controls="offcanvasRight"
+        data-te-ripple-init=""
+        data-te-ripple-color="light">
+        <Menu className="w-6" />
+      </button>
+      <div
+        className="invisible fixed bottom-0 right-0 top-0 z-[1045] flex w-72 max-w-full translate-x-full flex-col border-none bg-gray-50 bg-clip-padding text-neutral-700 shadow-sm outline-none transition duration-300 ease-in-out  [&[data-te-offcanvas-show]]:transform-none"
+        tabIndex={-1}
+        id="offcanvasRight"
+        aria-labelledby="offcanvasRightLabel"
+        data-te-offcanvas-init="">
+        <div className="flex items-center justify-between p-4">
+          <h5 className="mb-0 font-semibold leading-normal" id="offcanvasRightLabel"></h5>
+          <button
+            type="button"
+            className="box-content rounded-none border-none opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
+            data-te-offcanvas-dismiss="">
+            <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="h-6 w-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div className="offcanvas-body flex flex-grow flex-col items-center gap-8 overflow-y-auto p-4">
+          {router.pathname !== '/' && (
+            <Link href="/" className="text-grey-900 text-xl font-semibold hover:underline">
+              {t('urlShortener')}
+            </Link>
+          )}
+          {router.pathname !== '/tracking' && (
+            <Link href="/tracking" className="text-grey-900 text-xl font-semibold hover:underline">
+              {t('manageLink')}
+              {/* <ExternalLink className="mb-4 ml-1 w-4" /> */}
+            </Link>
+          )}
+          {router.pathname !== '/note' && (
+            <Link href="/note" className="text-grey-900 text-xl font-semibold hover:underline">
+              {t('urlShortener')}
+            </Link>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
@@ -1,4 +1,5 @@
 import { BrandText } from 'components/atoms/BrandIcon';
+import { Sidebar } from 'components/atoms/Sidebar';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTrans } from 'utils/i18next';
@@ -14,17 +15,27 @@ export const Header = () => {
           <BrandText width={148} />
         </div>
       </Link>
-      <div className="flex gap-4">
+      <div className="sm:hidden">
+        <Sidebar />
+      </div>
+      <div className="hidden gap-4 sm:flex">
         {router.pathname !== '/' && (
-          <Link href="/" className="h-fit text-cyan-500 underline decoration-1 hover:decoration-wavy">
+          <Link href="/" className="text-grey-900 h-fit text-lg decoration-1 hover:text-cyan-500 hover:underline">
             {t('urlShortener')}
           </Link>
         )}
         {router.pathname !== '/tracking' && (
-          <Link href="/tracking" className="h-fit text-cyan-500 underline decoration-1 hover:decoration-wavy">
+          <Link
+            href="/tracking"
+            className="text-grey-900 h-fit text-lg decoration-1 hover:text-cyan-500 hover:underline">
             {t('manageLink')}
           </Link>
         )}
+        {router.pathname !== '/note' && (
+          <Link href="/note" className="text-grey-900 h-fit text-lg decoration-1 hover:text-cyan-500 hover:underline">
+            {t('noteEditor')}
+          </Link>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/screens/Playground.tsx b/src/components/screens/Playground.tsx
@@ -1,3 +1,4 @@
+import { Sidebar } from 'components/atoms/Sidebar';
 import { isProduction } from 'types/constants';
 
 export const Playground = () => {
@@ -8,6 +9,7 @@ export const Playground = () => {
   return (
     <>
       <h1 className="my-8 text-xl font-bold">Playground</h1>
+      <Sidebar />
       {/* <FileUpload /> */}
       {/* <TextEditor /> */}
       {/* <button onClick={log}>Log editor content</button> */}

diff --git a/src/components/sections/NoteSection.tsx b/src/components/sections/NoteSection.tsx
@@ -12,7 +12,7 @@ export const NoteSection = () => {
     <div>
       <Head>{isProduction && <title>{t('brandTitleNote')}</title>}</Head>
       <h1 className="mb-4 flex gap-1 text-4xl">
-        {t('urlShortener')}
+        {t('noteEditor')}
         <HelpTooltip text={t('helpNoteHead')} />
       </h1>
       <NoteInput />