✨ 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={
+    <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>
-    }>
+      }
+    >
       <Show when={!searchParams["embedded"]}>
         <Navbar />
       </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" },
+    { icon: "fa-solid fa-pen-nib", label: "Creators", href: "/creators" },
-    { label: "Feed", href: "/" },
+    { icon: "fa-solid fa-newspaper", label: "Feed", href: "/" },
-    { label: "Realms", href: "/realms" }
+    { icon: "fa-solid fa-people-group", label: "Realms", href: "/realms" },
   ];
 
   const wellKnown = useWellKnown();
@@ -26,7 +27,8 @@ export default function Navbar() {
   }
 
   return (
-    <div class="navbar bg-base-100 shadow-md px-5 z-[100] fixed top-0">
+    <>
+      <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">
@@ -37,18 +39,10 @@ export default function Navbar() {
                 viewBox="0 0 24 24"
                 stroke="currentColor"
               >
-              <path
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M4 6h16M4 12h8m-8 6h16"
-              />
               </svg>
             </div>
-          <ul
+            <ul tabIndex={0} class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-            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>
@@ -56,11 +50,11 @@ export default function Navbar() {
                     <Show when={item.children}>
                       <ul class="p-2">
                         <For each={item.children}>
-                        {(item) =>
+                          {(item) => (
                             <li>
                               <a href={item.href}>{item.label}</a>
                             </li>
-                        }
+                          )}
                         </For>
                       </ul>
                     </Show>
@@ -85,11 +79,11 @@ export default function Navbar() {
                       </summary>
                       <ul class="p-2">
                         <For each={item.children}>
-                        {(item) =>
+                          {(item) => (
                             <li>
                               <a href={item.href}>{item.label}</a>
                             </li>
-                        }
+                          )}
                         </For>
                       </ul>
                     </details>
@@ -102,13 +96,28 @@ export default function Navbar() {
         <div class="navbar-end pe-5">
           <Switch>
             <Match when={userinfo?.isLoggedIn}>
-            <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>Logout</button>
+              <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>
+              <a href="/auth" class="btn btn-sm btn-primary">
+                Login
+              </a>
             </Match>
           </Switch>
         </div>
       </div>
+
+      <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>
+    </>
   );
 }

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

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

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>
   );
 }