Add tags page.

frontend/src/components/navigator.tsx

@@ -23,36 +23,77 @@ export default function Navigator() {
     },
   });
 
+  const { t } = useTranslation();
+
   return <>
     <div className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10" key={key}>
-      <div className={"flex-1 max-w-7xl mx-auto flex"}>
-        <div className="flex-1">
+      <div className={"flex-1 max-w-7xl mx-auto flex items-center"}>
+        <div className="dropdown">
+          <div tabIndex={0} role="button" className="btn btn-ghost btn-circle lg:hidden">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
+          </div>
+          <ul  id={"navi_menu"}
+            tabIndex={0}
+            className="menu menu-md dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+            <li onClick={() => {
+              const menu = document.getElementById("navi_menu") as HTMLElement;
+              menu.blur();
+              navigate("/");
+            }}><a>{t("Home")}</a></li>
+            <li onClick={() => {
+              const menu = document.getElementById("navi_menu") as HTMLElement;
+              menu.blur();
+              navigate("/tags")
+            }}><a>{t("Tags")}</a></li>
+            <li onClick={() => {
+              const menu = document.getElementById("navi_menu") as HTMLElement;
+              menu.blur();
+              navigate("/about")
+            }}><a>{t("About")}</a></li>
+          </ul>
+        </div>
+        <div>
           <button className="btn btn-ghost text-xl" onClick={() => {
             appContext.clear()
-            navigate(`/`);
+            navigate(`/`, { replace: true});
           }}>{app.appName}</button>
         </div>
+        <div className="hidden lg:flex">
+          <ul className="menu menu-horizontal px-1">
+            <li onClick={() => {
+              navigate("/");
+            }}><a>{t("Home")}</a></li>
+            <li onClick={() => {
+              navigate("/tags")
+            }}><a>{t("Tags")}</a></li>
+            <li onClick={() => {
+              navigate("/about")
+            }}><a>{t("About")}</a></li>
+          </ul>
+        </div>
+        <div className={"flex-1"}></div>
         <div className="flex gap-2">
-          <SearchBar />
-          <UploadingSideBar />
+          <SearchBar/>
+          <UploadingSideBar/>
           {
             app.isLoggedIn() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
               navigate("/manage");
             }}>
-              <MdSettings size={24} />
+              <MdSettings size={24}/>
             </button>
           }
           <button className={"btn btn-circle btn-ghost"} onClick={() => {
             window.open("https://github.com/wgh136/nysoure", "_blank");
           }}>
-            <IoLogoGithub size={24} />
+            <IoLogoGithub size={24}/>
           </button>
           {
-            app.isLoggedIn() ? <UserButton /> : <button className={"btn btn-primary btn-square btn-soft"} onClick={() => {
-              navigate("/login");
-            }}>
-              <MdOutlinePerson size={24}></MdOutlinePerson>
-            </button>
+            app.isLoggedIn() ? <UserButton/> :
+              <button className={"btn btn-primary btn-square btn-soft"} onClick={() => {
+                navigate("/login");
+              }}>
+                <MdOutlinePerson size={24}></MdOutlinePerson>
+              </button>
           }
         </div>
       </div>