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

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

@ -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>

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

@ -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,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
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
<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"
>
<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>
@ -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>
</>
);
}

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

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

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

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