Stub out pages and style menu

source/SIL.AppBuilder.Portal/src/routes/+layout.svelte

@@ -1,11 +1,17 @@
-<script>
+<script lang="ts">
 	import { _ } from 'svelte-i18n';
+	import { page } from '$app/stores';
 	import { base } from '$app/paths';
 	import '../app.css';
 	import { HamburgerIcon } from '$lib/icons';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
 
 	$: organization = 1;
+
+	function isActive(currentRoute: string | null, menuRoute: string) {
+		console.log(`currentRoute:${currentRoute}, menuRoute:${menuRoute}`);
+		return currentRoute?.startsWith(menuRoute);
+	}
 </script>
 
 <div class="navbar bg-[#1C3258]">
@@ -33,50 +39,86 @@
 	<div class="drawer-side">
 		<label for="primary-content-drawer" class="drawer-overlay" />
 		<ul
-			class="menu mt-16 lg:mt-0 rounded-r-xl p-4 w-1/3 lg:w-64 bg-base-100 text-base-content h-full"
+			class="menu menu-lg mt-16 lg:mt-0 rounded-r-xl p-0 w-1/3 lg:border-r-2 lg:w-72 bg-base-100 text-base-content h-full"
 		>
 			<li>
-				<a href="{base}/tasks">
-					{$_('sidebar.myTasks')}
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/tasks')}
+					href="{base}/tasks"
+				>
+					{$_('sidebar.myTasks', { values: { count: 1 } })}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/projects/own">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/projects/own')}
+					href="{base}/projects/own"
+				>
 					{$_('sidebar.myProjects')}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/projects/organization">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/projects/organization')}
+					href="{base}/projects/organization"
+				>
 					{$_('sidebar.organizationProjects')}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/projects/active">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/projects/active')}
+					href="{base}/projects/active"
+				>
 					{$_('sidebar.activeProjects')}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/users">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/users')}
+					href="{base}/users"
+				>
 					{$_('sidebar.users')}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/orgainizations/{organization}/settings">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/organizations/[id]/settings')}
+					href="{base}/organizations/{organization}/settings"
+				>
 					{$_('sidebar.organizationSettings')}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/admin/settings/orgainizations">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/admin/settings/organizations')}
+					href="{base}/admin/settings/organizations"
+				>
 					{$_('sidebar.adminSettings')}
 				</a>
 			</li>
-			<li>
-				<a href="{base}/directory">
+			<li class="menu-item-divider-top menu-item-divider-bottom">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/directory')}
+					href="{base}/directory"
+				>
 					{$_('sidebar.projectDirectory')}
 				</a>
 			</li>
 			<li>
-				<a href="{base}/open-source">
+				<a
+					class="rounded-none"
+					class:active-menu-item={isActive($page.route.id, '/open-source')}
+					href="{base}/open-source"
+				>
 					{$_('opensource')}
 				</a>
 			</li>
@@ -90,4 +132,15 @@
 		height: 3rem;
 		min-height: 3rem;
 	}
+	.menu-item-divider-bottom {
+		border-bottom: 2px solid #e5e5e5;
+	}
+	.menu-item-divider-top {
+		border-top: 2px solid #e5e5e5;
+	}
+
+	.active-menu-item {
+		border-left: 5px solid #1c3258; /* Adjust the border color and width to your preferences */
+		font-weight: bold;
+	}
 </style>

source/SIL.AppBuilder.Portal/src/routes/admin/settings/organizations/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('admin.settings.title')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/directory/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('sidebar.projectDirectory')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/open-source/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('opensource')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/organizations/[id]/settings/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('org.settingsTitle')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/projects/active/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('projects.switcher.dropdown.activeProjects')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/projects/organization/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('projects.switcher.dropdown.orgProjects')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/projects/own/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('projects.switcher.dropdown.myProjects')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/tasks/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('tasks.title')}</h1>
+</div>

source/SIL.AppBuilder.Portal/src/routes/users/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div class="max-w-screen-md mx-auto">
+	<h1>{$_('users.title')}</h1>
+</div>