✨ Bottom Navigation
This commit is contained in:
parent
2480dd9b6e
commit
1baffd4200
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user