✨ Bottom Navigation

pkg/view/src/layouts/RootLayout.tsx

@@ -36,20 +36,23 @@ export default function RootLayout(props: any) {
 
   const mainContentStyles = createMemo(() => {
     if (!searchParams["embedded"]) {
-      return "h-[calc(100vh-64px)] mt-[64px]";
+      return "h-[calc(100vh-64px)] max-md:mb-[64px] md:mt-[64px]";
     } else {
       return "h-[100vh]";
     }
   });
 
   return (
-    <Show when={ready()} fallback={
-      <div class="h-screen w-screen flex justify-center items-center">
-        <div>
-          <span class="loading loading-lg loading-infinity"></span>
+    <Show
+      when={ready()}
+      fallback={
+        <div class="h-screen w-screen flex justify-center items-center">
+          <div>
+            <span class="loading loading-lg loading-infinity"></span>
+          </div>
         </div>
-      </div>
-    }>
+      }
+    >
       <Show when={!searchParams["embedded"]}>
         <Navbar />
       </Show>
@@ -57,4 +60,4 @@ export default function RootLayout(props: any) {
       <main class={`${mainContentStyles()} scrollbar-hidden`}>{props.children}</main>
     </Show>
   );
-}
+}

pkg/view/src/layouts/shared/Navbar.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "@solidjs/router";
 import { useWellKnown } from "../../stores/wellKnown.tsx";
 
 interface MenuItem {
+  icon: string;
   label: string;
   href?: string;
   children?: MenuItem[];
@@ -11,9 +12,9 @@ interface MenuItem {
 
 export default function Navbar() {
   const nav: MenuItem[] = [
-    { label: "Creators", href: "/creators" },
-    { label: "Feed", href: "/" },
-    { label: "Realms", href: "/realms" }
+    { icon: "fa-solid fa-pen-nib", label: "Creators", href: "/creators" },
+    { icon: "fa-solid fa-newspaper", label: "Feed", href: "/" },
+    { icon: "fa-solid fa-people-group", label: "Realms", href: "/realms" },
   ];
 
   const wellKnown = useWellKnown();
@@ -26,89 +27,97 @@ export default function Navbar() {
   }
 
   return (
-    <div class="navbar bg-base-100 shadow-md px-5 z-[100] fixed top-0">
-      <div class="navbar-start">
-        <div class="dropdown">
-          <div tabIndex={0} role="button" class="btn btn-ghost lg:hidden">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M4 6h16M4 12h8m-8 6h16"
-              />
-            </svg>
+    <>
+      <div class="max-md:hidden navbar bg-base-100 shadow-md px-5 z-10 h-[64px] fixed top-0">
+        <div class="navbar-start">
+          <div class="dropdown">
+            <div tabIndex={0} role="button" class="btn btn-ghost lg:hidden">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+              </svg>
+            </div>
+            <ul tabIndex={0} class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+              <For each={nav}>
+                {(item) => (
+                  <li>
+                    <a href={item.href}>{item.label}</a>
+                    <Show when={item.children}>
+                      <ul class="p-2">
+                        <For each={item.children}>
+                          {(item) => (
+                            <li>
+                              <a href={item.href}>{item.label}</a>
+                            </li>
+                          )}
+                        </For>
+                      </ul>
+                    </Show>
+                  </li>
+                )}
+              </For>
+            </ul>
           </div>
-          <ul
-            tabIndex={0}
-            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
-          >
+          <a href="/" class="btn btn-ghost text-xl">
+            {wellKnown?.name ?? "Interactive"}
+          </a>
+        </div>
+        <div class="navbar-center hidden lg:flex">
+          <ul class="menu menu-horizontal px-1">
             <For each={nav}>
               {(item) => (
                 <li>
-                  <a href={item.href}>{item.label}</a>
-                  <Show when={item.children}>
-                    <ul class="p-2">
-                      <For each={item.children}>
-                        {(item) =>
-                          <li>
-                            <a href={item.href}>{item.label}</a>
-                          </li>
-                        }
-                      </For>
-                    </ul>
+                  <Show when={item.children} fallback={<a href={item.href}>{item.label}</a>}>
+                    <details>
+                      <summary>
+                        <a href={item.href}>{item.label}</a>
+                      </summary>
+                      <ul class="p-2">
+                        <For each={item.children}>
+                          {(item) => (
+                            <li>
+                              <a href={item.href}>{item.label}</a>
+                            </li>
+                          )}
+                        </For>
+                      </ul>
+                    </details>
                   </Show>
                 </li>
               )}
             </For>
           </ul>
         </div>
-        <a href="/" class="btn btn-ghost text-xl">
-          {wellKnown?.name ?? "Interactive"}
-        </a>
+        <div class="navbar-end pe-5">
+          <Switch>
+            <Match when={userinfo?.isLoggedIn}>
+              <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>
+                Logout
+              </button>
+            </Match>
+            <Match when={!userinfo?.isLoggedIn}>
+              <a href="/auth" class="btn btn-sm btn-primary">
+                Login
+              </a>
+            </Match>
+          </Switch>
+        </div>
       </div>
-      <div class="navbar-center hidden lg:flex">
-        <ul class="menu menu-horizontal px-1">
-          <For each={nav}>
-            {(item) => (
-              <li>
-                <Show when={item.children} fallback={<a href={item.href}>{item.label}</a>}>
-                  <details>
-                    <summary>
-                      <a href={item.href}>{item.label}</a>
-                    </summary>
-                    <ul class="p-2">
-                      <For each={item.children}>
-                        {(item) =>
-                          <li>
-                            <a href={item.href}>{item.label}</a>
-                          </li>
-                        }
-                      </For>
-                    </ul>
-                  </details>
-                </Show>
-              </li>
-            )}
-          </For>
-        </ul>
+
+      <div class="md:hidden btm-nav fixed bottom-0 bg-base-100 border-t border-base-200 z-10 h-[64px]">
+        <For each={nav}>
+          {(item) => (
+            <a href={item.href}>
+              <i class={item.icon}></i>
+            </a>
+          )}
+        </For>
       </div>
-      <div class="navbar-end pe-5">
-        <Switch>
-          <Match when={userinfo?.isLoggedIn}>
-            <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>Logout</button>
-          </Match>
-          <Match when={!userinfo?.isLoggedIn}>
-            <a href="/auth" class="btn btn-sm btn-primary">Login</a>
-          </Match>
-        </Switch>
-      </div>
-    </div>
+    </>
   );
 }

pkg/view/src/pages/creators/view.tsx

@@ -1,16 +1,28 @@
+import { createMemo } from "solid-js";
+import { useSearchParams } from "@solidjs/router";
+
 import styles from "./view.module.css";
 
 export default function CreatorView(props: any) {
+  const [searchParams] = useSearchParams();
+
+  const scrollContentStyles = createMemo(() => {
+    if (!searchParams["embedded"]) {
+      return "max-md:mb-[64px] md:mt-[64px]";
+    } else {
+      return "h-[100vh]";
+    }
+  });
+
   return (
     <div class={`${styles.wrapper} container mx-auto`}>
       <div id="nav" class="card shadow-xl h-fit">
         <h2 class="text-xl font-bold mt-1 py-5 px-7">Creator Hub</h2>
       </div>
 
-      <div id="content" class="card shadow-xl">
+      <div id="content" class={`${scrollContentStyles()} card shadow-xl`}>
         {props.children}
       </div>
-
     </div>
   );
-}
+}

pkg/view/src/pages/view.module.css

@@ -1,13 +1,11 @@
 .wrapper {
-    display: grid;
-    grid-template-columns: 1fr;
-    column-gap: 20px;
-
-    max-height: calc(100vh - 64px);
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 20px;
 }
 
 @media (min-width: 1024px) {
-    .wrapper {
-        grid-template-columns: 1fr 2fr 1fr;
-    }
-}
+  .wrapper {
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+}

pkg/view/src/pages/view.tsx

@@ -1,16 +1,28 @@
+import { createMemo } from "solid-js";
+import { useSearchParams } from "@solidjs/router";
+
 import styles from "./view.module.css";
 
 export default function FeedView(props: any) {
+  const [searchParams] = useSearchParams();
+
+  const scrollContentStyles = createMemo(() => {
+    if (!searchParams["embedded"]) {
+      return "max-md:mb-[64px] md:mt-[64px]";
+    } else {
+      return "h-[100vh]";
+    }
+  });
+
   return (
     <div class={`${styles.wrapper} container mx-auto`}>
       <div id="trending" class="card shadow-xl h-fit"></div>
 
-      <div id="content" class="card shadow-xl">
+      <div id="content" class={`${scrollContentStyles()} card shadow-xl`}>
         {props.children}
       </div>
 
       <div id="well-known" class="card shadow-xl h-fit"></div>
-
     </div>
   );
-}
+}