Hypernet/Interactive
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Bottom Navigation

Browse Source
This commit is contained in:
LittleSheep 2024-02-14 18:09:44 +08:00
parent 2480dd9b6e
commit 1baffd4200
5 changed files with 132 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pkg/view/src/layouts/RootLayout.tsx
View File

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

159
pkg/view/src/layouts/shared/Navbar.tsx
View File

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

16
pkg/view/src/pages/creators/view.tsx
View File

@ -1,16 +1,28 @@
import { createMemo } from "solid-js";
import { useSearchParams } from "@solidjs/router";
import styles from "./view.module.css"; import styles from "./view.module.css";
export default function CreatorView(props: any) { 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 ( return (
<div class={`${styles.wrapper} container mx-auto`}> <div class={`${styles.wrapper} container mx-auto`}>
<div id="nav" class="card shadow-xl h-fit"> <div id="nav" class="card shadow-xl h-fit">
<h2 class="text-xl font-bold mt-1 py-5 px-7">Creator Hub</h2> <h2 class="text-xl font-bold mt-1 py-5 px-7">Creator Hub</h2>
</div> </div>
<div id="content" class="card shadow-xl"> <div id="content" class={`${scrollContentStyles()} card shadow-xl`}>
{props.children} {props.children}
</div> </div>
</div> </div>
); );
} }

14
pkg/view/src/pages/view.module.css
View File

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

16
pkg/view/src/pages/view.tsx
View File

@ -1,16 +1,28 @@
import { createMemo } from "solid-js";
import { useSearchParams } from "@solidjs/router";
import styles from "./view.module.css"; import styles from "./view.module.css";
export default function FeedView(props: any) { 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 ( return (
<div class={`${styles.wrapper} container mx-auto`}> <div class={`${styles.wrapper} container mx-auto`}>
<div id="trending" class="card shadow-xl h-fit"></div> <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} {props.children}
</div> </div>
<div id="well-known" class="card shadow-xl h-fit"></div> <div id="well-known" class="card shadow-xl h-fit"></div>
</div> </div>
); );
} }