[update] responsive navbar [update] footer to the bottom

website/components/common/footer.tsx

@@ -5,7 +5,7 @@ import { useLanguage } from "contexts/language";
 
 export const Footer = () => {
     const { strings, setLanguage } = useLanguage();
-    return <footer className="fixed bottom-0 flex justify-between w-full m-auto py-5 px-10">
+    return <footer className="absolute bottom-0 flex justify-between w-full m-auto py-5 px-10">
         <div className="space-x-8 flex flex-row">
             <a className="opacity-40 text-black hover:opacity-70 transition" target="_blank" rel="noreferrer" href="https://github.com/Animenosekai/translate">GitHub</a>
             <div className="flex flex-row opacity-40 hover:opacity-70 transition cursor-pointer">
@@ -16,7 +16,9 @@ export const Footer = () => {
                         })
                     }
                 </select>
-                <IconChevronUp className={`-ml-${10 - strings.name.length}`} />
+                <IconChevronUp style={{
+                    marginLeft: `${(-1 * (10 - strings.name.length)) / 3}rem`
+                }} />
             </div>
         </div>
     </footer>

website/components/common/header.tsx

@@ -1,14 +1,25 @@
+import { HamburgerIcon } from "components/icons/hamburger"
+import { HamburgerModal } from "components/ui/modals/hamburger"
 import Link from "next/link"
 import { Navbar } from "./navbar"
 import { TranslateIcon } from "components/icons/translatepy"
+import { useState } from "react"
 
 export const Header = () => {
+    const [showMenu, setShowMenu] = useState(false);
+
     return <nav className="flex flex-row w-screen h-max mt-5 mb-16">
         <div className="left-10 absolute my-auto cursor-pointer">
             <Link href="/">
                 <TranslateIcon />
             </Link>
         </div>
-        <Navbar />
+        <HamburgerIcon onClick={() => {
+            setShowMenu(true);
+        }} className="sm:hidden block absolute right-10 cursor-pointer opacity-50 hover:opacity-100 transition" />
+        {
+            showMenu && <HamburgerModal onClose={() => { setShowMenu(false) }} />
+        }
+        <Navbar className="sm:flex hidden" />
     </nav>
 }

website/components/common/layout.tsx

@@ -3,9 +3,9 @@ import { Header } from "./header"
 // import { Navbar } from "./navbar"
 
 export const Layout = ({ children }: { children }) => {
-    return <div className="flex flex-col h-screen">
+    return <div className="flex flex-col min-h-screen relative">
         <Header />
-        <div className="main h-full">
+        <div className="main h-full pb-10">
             {children}
         </div>
         <Footer />

website/components/common/navbar.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-// import cn from "classnames"
+import cn from "classnames"
 import { useLanguage } from "contexts/language";
 
 export interface NavbarProps {
@@ -14,9 +14,9 @@ const NavbarLink = ({ href, name }: { href: string, name: string }) => {
     </li>
 }
 
-export const Navbar = (props: any) => {
+export const Navbar = ({className, props}: any) => {
     const { strings } = useLanguage();
-    return <ul className="flex flex-row absolute right-10" {...props}>
+    return <ul className={cn("flex flex-row absolute right-10", className)} {...props}>
         <NavbarLink href="/translate" name={strings.pages.translate} />
         <NavbarLink href="/documentation" name={strings.pages.documentation} />
         <NavbarLink href="/stats" name={strings.pages.stats} />

website/components/icons/close.tsx

@@ -0,0 +1,5 @@
+import { IconX } from "@tabler/icons"
+
+export const CloseIcon = (props) => {
+    return <IconX {...props} />
+}

website/components/icons/hamburger.tsx

@@ -0,0 +1,5 @@
+import { IconMenu2 } from "@tabler/icons";
+
+export const HamburgerIcon = (props: any) => (
+    <IconMenu2 {...props} />
+);

website/components/ui/modals/hamburger.tsx

@@ -0,0 +1,31 @@
+import { CloseIcon } from "components/icons/close";
+import Link from "next/link";
+import { useLanguage } from "contexts/language";
+
+export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
+    return <div className="w-full h-16 p-5 text-xl items-center flex cursor-pointer hover:bg-slate-100 transition" {...props}>
+        <Link href={href}>
+            {name}
+        </Link>
+    </div>
+}
+
+export const HamburgerModal = ({ onClose, ...props }) => {
+    const { strings } = useLanguage();
+    return <div className="h-screen animate-enter-menu w-4/5 z-10 right-0 absolute bg-white shadow-xl flex flex-col space-y-5 items-center sm:hidden">
+        <CloseIcon className="absolute top-0 right-0 mx-10 cursor-pointer opacity-60 hover:opacity-100 transition" onClick={() => { onClose(); }} />
+        {/* <span className="text-xl justify-center">Menu</span> */}
+        <div className="h-5"></div>
+        <div className="w-full">
+            <hr />
+            <HamburgerMenuElement onClick={onClose} href="/translate" name={strings.pages.translate} />
+            <hr />
+            <HamburgerMenuElement onClick={onClose} href="/documentation" name={strings.pages.documentation} />
+            <hr />
+            <HamburgerMenuElement onClick={onClose} href="/stats" name={strings.pages.stats} />
+            <hr />
+        </div>
+        <div></div>
+        <span>🧃 Anime no Sekai, 2022</span>
+    </div>
+}

website/pages/index.tsx

@@ -24,7 +24,7 @@ const Home: NextPage = () => {
             <link rel="icon" href="/favicon.ico" />
         </Head>
 
-        <div className="flex items-center flex-col md:w-1/2 w-3/4 h-full justify-center mx-auto -mt-20">
+        <div className="flex items-center flex-col md:w-1/2 w-3/4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -mt-10">
             <LanguageIcon size={100} />
             <div className='w-full flex items-end flex-col'>
                 <TranslationTextArea onKeyDown={(ev) => {

website/styles/globals.css

@@ -10,11 +10,19 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+}
+
 a {
   color: inherit;
   text-decoration: none;
 }
 
 * {
   box-sizing: border-box;
-}
+}

website/tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
     extend: {
       animation: {
         'enter-modal': 'enter-modal 300ms ease 1',
+        'enter-menu': 'enter-menu 300ms ease 1',
       },
       keyframes: {
         'enter-modal': {
@@ -18,6 +19,16 @@ module.exports = {
             opacity: 1,
             backgroundColor: 'rgba(255, 255, 255, 0.8)',
           }
+        },
+        'enter-menu': {
+          '0%': {
+            opacity: 0,
+            right: '-100%',
+          },
+          '100%': {
+            opacity: 1,
+            right: '0',
+          }
         }
       },
     },