Add sidebar and navbar

luanbt21 · Oct 1, 2022 · 36cba95 · 36cba95
1 parent b2ed317
commit 36cba95
Show file tree

Hide file tree

Showing 45 changed files with 366 additions and 317 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
 		"@sveltejs/adapter-auto": "1.0.0-next.80",
 		"@sveltejs/adapter-node": "1.0.0-next.96",
 		"@sveltejs/kit": "1.0.0-next.505",
+		"@tailwindcss/typography": "^0.5.7",
 		"@types/cookie": "^0.5.1",
 		"@typescript-eslint/eslint-plugin": "^5.38.1",
 		"@typescript-eslint/parser": "^5.38.1",

diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -1,11 +1,33 @@
 <script lang="ts">
-	import { loginWithGoogle, logout } from '$utils/auth';
-	import { user } from '$stores/auth';
+	import { loginWithGoogle, logout } from '$utils/auth'
+	import { user } from '$stores/auth'
+
+	type MenuItem = { icon: string; title: string }
+
+	const titles = ['note', 'timer', 'message', 'noti']
+	// const titles = ['note', 'timer']
+
+	const menu: MenuItem[] = titles.map((title) => ({
+		title,
+		icon: `/${title}-icon.svg`,
+	}))
 </script>
 
+{#each menu as item}
+	<button class="btn btn-md btn-ghost btn-square" title={item.title}>
+		<img class="w-8" src={item.icon} alt={item.title} />
+	</button>
+{/each}
+
 {#if !$user}
-	<li><button class="btn" on:click={loginWithGoogle}>login</button></li>
+	<button class="btn btn-ghost p-2" on:click={loginWithGoogle}>login</button>
 {:else}
-	<li><button class="btn" on:click={logout}>logout</button></li>
+	<div class="dropdown dropdown-end">
+		<label tabindex="0" class="btn btn-ghost btn-square rounded-btn">
+			<img class="w-8" src={$user.photoURL} alt="user avatar" />
+		</label>
+		<ul tabindex="0" class="menu dropdown-content p-2 shadow bg-base-100 rounded-box">
+			<li><button on:click={logout}>logout</button></li>
+		</ul>
+	</div>
 {/if}
-<li><a>Navbar Item 2</a></li>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { locale } from '$i18n/i18n-svelte'
+	import { onMount } from 'svelte'
+
+	type MenuItem = { icon: string; title: string; href: string }
+
+	const titles = ['feed', 'explore', 'plan', 'course', 'collection', 'following', 'profile']
+
+	const menu: MenuItem[] = titles.map((title) => ({
+		title,
+		icon: `/${title}-icon.svg`,
+		href: `/${$locale}/${title}`,
+	}))
+
+	let activeTitle: string
+
+	onMount(() => {
+		activeTitle = location.pathname.split('/')[2]
+	})
+</script>
+
+<ul class="menu w-64 p-2 rounded-box">
+	{#each menu as item}
+		<li on:click={() => (activeTitle = item.title)} class="my-2">
+			<a class:active={item.title === activeTitle} href={item.href}>
+				<img src={item.icon} alt="" />
+				<span class="capitalize">
+					{item.title}
+				</span>
+			</a>
+		</li>
+	{/each}
+</ul>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,61 +1,76 @@
 <script lang="ts">
-	import '../app.css';
-	import Header from '$lib/ui/Header.svelte';
-	import { setLocale } from '$i18n/i18n-svelte';
-	import Firebase from '$lib/firebase.svelte';
-	import Navbar from '$lib/components/Navbar.svelte';
-	import type { LayoutData } from './$types';
+	import '../app.css'
+	import Header from '$lib/ui/Header.svelte'
+	import { setLocale } from '$i18n/i18n-svelte'
+	import Firebase from '$lib/firebase.svelte'
+	import Navbar from '$lib/components/Navbar.svelte'
+	import type { LayoutData } from './$types'
+	import Sidebar from '$components/Sidebar.svelte'
 
-	export let data: LayoutData;
+	export let data: LayoutData
 
-	setLocale(data.locale);
+	setLocale(data.locale)
 </script>
 
 <Firebase />
 <div class="drawer">
-	<input id="drawer" type="checkbox" class="drawer-toggle" />
+	<input id="drawer-left" type="checkbox" class="drawer-toggle" />
 	<div class="drawer-content flex flex-col">
 		<!-- Navbar -->
-		<div class="w-full navbar bg-base-300">
-			<div class="flex-none lg:hidden">
-				<label for="drawer" class="btn btn-square btn-ghost">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						class="inline-block w-6 h-6 stroke-current"
-						><path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 12h16M4 18h16"
-						/></svg
-					>
-				</label>
+		<div class="w-full navbar">
+			<div class="navbar-start">
+				<div class="flex-none lg:hidden">
+					<label for="drawer-left" class="btn btn-square btn-sm btn-ghost">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="inline-block w-6 h-6 stroke-current"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4 6h16M4 12h16M4 18h16"
+							/>
+						</svg>
+					</label>
+				</div>
+				<a href="/">
+					<div class="flex flex-1 mx-1">
+						<img class="mr-2" src="/logo.svg" alt="" />
+						<div class="hidden lg:block">
+							<h3 class="font-medium leading-tight text-xl">BeeLearnSocial</h3>
+							<p class="text-xs text-gray-300">enjoy learning - keep learning</p>
+						</div>
+					</div>
+				</a>
 			</div>
-			<div class="flex-1 px-2 mx-2">Navbar Title</div>
-			<div class="flex-none hidden lg:block">
-				<ul class="menu menu-horizontal">
-					<Navbar />
-				</ul>
+
+			<div class="navbar-center">
+				<div class="form-control hidden lg:block">
+					<input type="text" placeholder="Search" class="input input-bordered" />
+				</div>
 			</div>
-		</div>
-		<!-- Page content here -->
-		<Header />
 
-		<main>
-			<slot />
-		</main>
+			<div class="navbar-end">
+				<Navbar />
+			</div>
+		</div>
 
-		<footer>
-			<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
-		</footer>
+		<div class="flex">
+			<aside class="w-64 hidden lg:block">
+				<Sidebar />
+			</aside>
+			<main class="container mx-auto">
+				<slot />
+			</main>
+		</div>
 	</div>
 	<div class="drawer-side">
-		<label for="drawer" class="drawer-overlay" />
+		<label for="drawer-left" class="drawer-overlay" />
 		<ul class="menu p-4 overflow-y-auto w-80 bg-base-100">
-			<!-- Sidebar content here -->
-			<Navbar />
+			<Sidebar />
 		</ul>
 	</div>
 </div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -10,7 +10,7 @@ export const load: LayoutLoad<{ locale: Locales }> = async ({ url, params }) =>
 
 	// redirect to base locale if language is not present
 	if (!locales.includes(lang)) {
-		throw redirect(302, replaceLocaleInUrl('/' + url.pathname, baseLocale))
+		throw redirect(302, replaceLocaleInUrl(url.pathname, baseLocale))
 	}
 
 	await loadLocaleAsync(lang)

diff --git a/src/routes/[lang]/collection/+page.server.ts b/src/routes/[lang]/collection/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/collection/+page.svelte b/src/routes/[lang]/collection/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Collection</h1>
diff --git a/src/routes/[lang]/collection/+page.ts b/src/routes/[lang]/collection/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/course/+page.server.ts b/src/routes/[lang]/course/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/course/+page.svelte b/src/routes/[lang]/course/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Course</h1>
diff --git a/src/routes/[lang]/course/+page.ts b/src/routes/[lang]/course/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/explore/+page.server.ts b/src/routes/[lang]/explore/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/explore/+page.svelte b/src/routes/[lang]/explore/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Explore</h1>
diff --git a/src/routes/[lang]/explore/+page.ts b/src/routes/[lang]/explore/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/feed/+page.server.ts b/src/routes/[lang]/feed/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/feed/+page.svelte b/src/routes/[lang]/feed/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Feed</h1>
diff --git a/src/routes/[lang]/feed/+page.ts b/src/routes/[lang]/feed/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/following/+page.server.ts b/src/routes/[lang]/following/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/following/+page.svelte b/src/routes/[lang]/following/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Following</h1>
diff --git a/src/routes/[lang]/following/+page.ts b/src/routes/[lang]/following/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/plan/+page.server.ts b/src/routes/[lang]/plan/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/plan/+page.svelte b/src/routes/[lang]/plan/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Plan</h1>
diff --git a/src/routes/[lang]/plan/+page.ts b/src/routes/[lang]/plan/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/profile/+page.server.ts b/src/routes/[lang]/profile/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+    return {};
+};
diff --git a/src/routes/[lang]/profile/+page.svelte b/src/routes/[lang]/profile/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    export let data: PageData;
+</script>
+
+<h1>Profile</h1>
diff --git a/src/routes/[lang]/profile/+page.ts b/src/routes/[lang]/profile/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    return {};
+};