mobile sidebar

haffi96 · Sep 18, 2023 · 42715c7 · 42715c7
1 parent df526b5
commit 42715c7
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 51 deletions.
diff --git a/ui/src/components/MobileSideBar.tsx b/ui/src/components/MobileSideBar.tsx
@@ -0,0 +1,60 @@
+import { useState } from "preact/hooks";
+import SideBarItems from "./SideBarItems.tsx";
+import type { Subscription } from "../types";
+import ThemeToggle from "./ThemeToggle.tsx";
+
+interface Props {
+    userEmail?: string;
+    apiUrl: string;
+    subs: Subscription[];
+}
+
+const Sidebar = ({ userEmail, apiUrl, subs }: Props) => {
+    const [showSidebar, setShowSidebar] = useState(false);
+
+    return (
+        <>
+            <div class="lg:hidden">
+                {showSidebar ? (
+                    <div>
+                        <div
+                            className="w-full h-full bg-zinc-500 dark:bg-zinc-700 fixed z-20 opacity-50"
+                        />
+                        <button
+                            className="flex text-5xl items-center cursor-pointer fixed right-6 top-2 z-50"
+                            onClick={() => setShowSidebar(!showSidebar)}
+                        >
+                            x
+                        </button>
+                    </div>
+                ) : (
+                    <svg
+                        onClick={() => setShowSidebar(!showSidebar)}
+                        className="fixed z-30 flex items-center cursor-pointer right-5 top-5 fill-black dark:fill-white"
+                        viewBox="0 0 100 80"
+                        width="40"
+                        height="40"
+                    >
+                        <rect width="100" height="10"></rect>
+                        <rect y="30" width="100" height="10"></rect>
+                        <rect y="60" width="100" height="10"></rect>
+                    </svg>
+                )}
+            </div>
+
+            <div
+                className={`top-0 right-0 w-2/3 lg:1/6 bg-zinc-300 dark:bg-zinc-500 p-1 fixed h-full z-40
+                            ease-in-out duration-300 ${showSidebar ? "translate-x-0 " : "translate-x-full"}
+                            overflow-y-scroll`}
+            >
+                <SideBarItems
+                    userEmail={userEmail}
+                    apiUrl={apiUrl}
+                    subs={subs}
+                />
+            </div>
+        </>
+    );
+};
+
+export default Sidebar;
diff --git a/ui/src/components/SideBar.astro b/ui/src/components/SideBar.astro
@@ -0,0 +1,39 @@
+---
+import SideBarItems from "./SideBarItems.tsx";
+import { SignOut } from "auth-astro/components";
+import type { Subscription } from "../types";
+import type { Session } from "@auth/core/types";
+
+interface Props {
+    session: Session | null;
+    userEmail?: string;
+    apiUrl: string;
+    subs: Subscription[];
+}
+
+const { session, userEmail, apiUrl, subs } = Astro.props;
+---
+
+<nav
+    class="bg-zinc-300 dark:bg-zinc-500 w-1/4 lg:w-1/6
+text-center overflow-hidden overflow-y-scroll space-y-5
+p-1 h-full fixed top-0 left-0 hidden lg:block"
+>
+    <div>
+        {
+            session ? (
+                <SignOut class="hover:bg-zinc-600 rounded-lg p-2 shadow-md transition:ease-in duration-100">
+                    Sign out
+                </SignOut>
+            ) : (
+                <a
+                    class="hover:bg-zinc-600 rounded-lg p-2 shadow-md transition:ease-in duration-100"
+                    href="/login"
+                >
+                    Sign in
+                </a>
+            )
+        }
+    </div>
+    <SideBarItems apiUrl={apiUrl} subs={subs} userEmail={userEmail} />
+</nav>
diff --git a/ui/src/components/SideBarItems.tsx b/ui/src/components/SideBarItems.tsx
@@ -0,0 +1,37 @@
+import AllSubscriptionsList from "./allSubscriptions";
+import type { Subscription } from "@/types";
+
+interface Props {
+    userEmail?: string;
+    apiUrl: string;
+    subs: Subscription[];
+}
+
+const SideBarItems = ({ userEmail, apiUrl, subs }: Props) => {
+    return (
+
+        <div class="w-7/8 lg:w-5/6 m-auto space-y-5 mt-20">
+            <a
+                href="/posts/1"
+                class="hover:bg-zinc-600 rounded-lg p-2 shadow-md transition:ease-in duration-100
+                        text-center m-auto flex justify-center items-center "
+            >
+                Home
+            </a>
+            <ul>
+                <details class="cursor-pointer">
+                    <summary class="text-zinc-800 text-xs lg:text-lg"
+                    >Subscriptions</summary
+                    >
+                    <AllSubscriptionsList
+                        userEmail={userEmail}
+                        apiUrl={apiUrl}
+                        subs={subs}
+                    />
+                </details>
+            </ul>
+        </div >
+    )
+}
+
+export default SideBarItems;
diff --git a/ui/src/components/SideNav.astro b/ui/src/components/SideNav.astro
@@ -1,7 +1,7 @@
 ---
+import Sidebar from "./SideBar.astro";
+import MobileSideBar from "./MobileSideBar.tsx";
 import type { Subscription } from "../types";
-import AllSubscriptionsList from "./allSubscriptions";
-import { SignOut } from "auth-astro/components";
 import { getSession } from "auth-astro/server";
 
 const session = await getSession(Astro.request);
@@ -40,46 +40,17 @@ const comingSoonEntry = {
 subs.push(comingSoonEntry);
 ---
 
-<nav
-    class="bg-zinc-300 dark:bg-zinc-500 w-1/4 lg:w-1/6
-text-center overflow-hidden overflow-y-scroll space-y-5 dark:text-black
-p-1 h-full fixed top-0 left-0 hidden md:block"
->
-    <div class="w-7/8 lg:w-5/6 m-auto pt-5 space-y-5">
-        <a
-            href="/posts/1"
-            class="hover:bg-zinc-600 rounded-lg p-2 shadow-md transition:ease-in duration-100
-      text-center m-auto flex justify-center items-center"
-            >Home</a
-        >
-        <div>
-            {
-                session ? (
-                    <SignOut class="hover:bg-zinc-600 rounded-lg p-2 shadow-md transition:ease-in duration-100">
-                        Sign out
-                    </SignOut>
-                ) : (
-                    <a
-                        class="hover:bg-zinc-600 rounded-lg p-2 shadow-md transition:ease-in duration-100"
-                        href="/login"
-                    >
-                        Sign in
-                    </a>
-                )
-            }
-        </div>
-        <ul>
-            <details class="cursor-pointer">
-                <summary class="text-zinc-800 text-xs lg:text-lg"
-                    >Subscriptions</summary
-                >
-                <AllSubscriptionsList
-                    userEmail={userEmail}
-                    client:load
-                    apiUrl={API_URL}
-                    subs={subs}
-                />
-            </details>
-        </ul>
-    </div>
-</nav>
+<div class="dark:text-black">
+    <Sidebar
+        session={session}
+        userEmail={userEmail}
+        apiUrl={API_URL}
+        subs={subs}
+    />
+    <MobileSideBar
+        client:load
+        userEmail={userEmail}
+        apiUrl={API_URL}
+        subs={subs}
+    />
+</div>
diff --git a/ui/src/components/allSubscriptions.tsx b/ui/src/components/allSubscriptions.tsx
@@ -18,7 +18,7 @@ export default function AllSubscriptionsList({ userEmail, apiUrl, subs }: Subscr
 
 
     return (
-        <div class="flex flex-col space-y-2 lg:p-2 text-sm md:text-lg">
+        <div class="flex flex-col space-y-2 lg:p-2 text-sm">
             {
                 subscribedBlogs.map((sub) => {
                     return (
@@ -27,7 +27,7 @@ export default function AllSubscriptionsList({ userEmail, apiUrl, subs }: Subscr
                             <a class="w-full" href={`${sub.blogLink}`}>
                                 {sub.companyName}
                             </a>
-                            <div class="hidden md:block">
+                            <div>
                                 <SubscribeActionButton
                                     apiUrl={apiUrl}
                                     userEmail={userEmail}

diff --git a/ui/src/layouts/Layout.astro b/ui/src/layouts/Layout.astro
@@ -2,7 +2,6 @@
 import SideNav from "@components/SideNav.astro";
 import "../styles/globals.css";
 import { ViewTransitions } from "astro:transitions";
-
 interface Props {
     title: string;
 }

diff --git a/ui/src/pages/login.astro b/ui/src/pages/login.astro
@@ -4,7 +4,7 @@ import ThemeButton from "@components/ThemeToggle";
 import { ViewTransitions } from "astro:transitions";
 ---
 
-<>
+<html>
     <head>
         <ViewTransitions />
         <title>Log in</title>
@@ -25,4 +25,4 @@ import { ViewTransitions } from "astro:transitions";
             </SignIn>
         </div>
     </body>
-</>
+</html>
diff --git a/ui/src/pages/posts/[page].astro b/ui/src/pages/posts/[page].astro
@@ -64,7 +64,7 @@ const nextPage = posts.length > 1 ? pageNumber + 1 : pageNumber;
 
 <Layout title="Engineering blogs">
     <main>
-        <div class="text-end">
+        <div class="text-center">
             <ThemeButton client:only />
         </div>
         <div class="items-center text-center p-5">