Entry sidebar and various other journal-related work

src/lib/components/buttons/CreateJournalEntryButton.svelte

@@ -0,0 +1,3 @@
+<button>
+    <img src="/src/assets/create_new_entry_button.svg" alt="Create new entry">
+</button>

src/lib/components/buttons/SidebarToggle.svelte

@@ -0,0 +1,9 @@
+<script>
+    let { onSidebarToggleClick } = $props();
+</script>
+
+<button
+    class="pajamas--hamburger"
+    aria-label="Menu Button"
+    onclick={onSidebarToggleClick}
+></button>

src/lib/components/entry/EntryToolbar.svelte

@@ -0,0 +1,12 @@
+<script>
+    import FontSelector from "./FontSelector.svelte";
+    import TextAlignSelector from "./TextAlignSelector.svelte";
+    import TextTypeSelector from "./TextTypeSelector.svelte";
+
+</script>
+
+<section class="entry-toolbar">
+    <TextTypeSelector/>
+    <TextAlignSelector/>
+    <FontSelector/>
+</section>

src/lib/components/entry/FontSelector.svelte

@@ -0,0 +1,2 @@
+
+

src/lib/components/entry/TextAlignSelector.svelte

@@ -0,0 +1,3 @@
+<button class="text-align-selector">
+    <img src='/src/assets/mdi_text.svg' alt="text-align-icon">
+</button>

src/lib/components/journal/EntrySidebar.svelte

@@ -6,24 +6,43 @@ https://svelte.dev/docs/svelte/bind
 <script lang="ts">
     import type { EntrySidebarProps } from '$lib/types/journal.types';
     import EntrySidebarItem from './EntrySidebarItem.svelte';
+    import { page } from '$app/stores';
+    import CreateJournalEntryButton from '../buttons/CreateJournalEntryButton.svelte';
 
     // let { entries }: EntrySidebarProps = $props();
 </script>
 
 <section class="entry-sidebar">
-    <!-- {#each entries as entry}
+    <CreateJournalEntryButton/>
+    <!-- {#each entries as entry (entry._id)}
         <EntrySidebarItem
-            entryDate={entry.entryDate}
-            createdAt={entry.createdAt}
-            updatedAt={entry.updatedAt}
+            title={entry.title}
+            journalID={entry.journal}
+            entryID={entry._id}
         />
     {/each} -->
 
-    <EntrySidebarItem title="my first entry! ^o^" />
+    <EntrySidebarItem
+        title="my first entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="1"
+    />
 
-    <EntrySidebarItem title="my second entry! ^o^" />
+    <EntrySidebarItem
+        title="my second entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="2"
+    />
 
-    <EntrySidebarItem title="my third entry! ^o^" />
+    <EntrySidebarItem
+        title="my third entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="3"
+    />
 
-    <EntrySidebarItem title="my fourth entry! ^o^" />
+    <EntrySidebarItem
+        title="my fourth entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="4"
+    />
 </section>

src/lib/components/journal/EntrySidebarItem.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { EntrySidebarItemProps } from '$lib/types/journal.types';
+    import { goto } from '$app/navigation';
 
-    let { title }: EntrySidebarItemProps = $props();
+    let { title, entryID, journalID }: EntrySidebarItemProps = $props();
 </script>
 
-<button class="entry-sidebar-item">
+<button
+    class="entry-sidebar-item"
+    onclick={async () => {
+        await goto(`/journals/${journalID}/${entryID}`);
+    }}
+>
     <h3>{title}</h3>
-    <!-- <h2>{entryDate}</h2>
-    <p>Created {createdAt}</p>
-    <p>Last updated {updatedAt}</p> -->
 </button>

src/lib/components/nav/InitialUserNav.svelte

@@ -2,9 +2,6 @@
     import PrimaryButton from '../buttons/PrimaryButton.svelte';
 </script>
 
-<!-- <button>
-    <div class="pajamas--hamburger"></div>
-</button> -->
 <button onclick={() => (window.location.href = '/')}>
     <h1 class="navbar__logo">Jurnl</h1>
 </button>

src/lib/components/nav/JournalsNav.svelte

@@ -0,0 +1,10 @@
+<script>
+    import SidebarToggle from '../buttons/SidebarToggle.svelte';
+
+    let { onSidebarToggleClick } = $props();
+</script>
+
+<SidebarToggle {onSidebarToggleClick} />
+<button onclick={() => (window.location.href = '/')}>
+    <h1 class="navbar__logo">Jurnl</h1>
+</button>

src/lib/types/journal.types.ts

@@ -1,12 +1,14 @@
-import type { IEntry } from '$lib/server/database/schemas';
+import type { IEntrySerializable } from '$lib/server/database/schemas';
 
 export interface EntrySidebarProps {
-    entries: IEntry[];
+    entries: IEntrySerializable[];
 }
 
 export interface EntrySidebarItemProps {
     entryDate?: Date;
     title: string;
+    entryID: string;
+    journalID: string;
     createdAt?: Date;
     updatedAt?: Date;
 }

src/routes/+layout.server.ts → src/routes/(home)/+layout.server.ts

@@ -1,4 +1,4 @@
-import type { LayoutServerLoad } from './$types';
+import type { LayoutServerLoad } from '../$types';
 
 export const load: LayoutServerLoad = async ({ locals }) => {
     return {

src/routes/+layout.svelte → src/routes/(home)/+layout.svelte

@@ -1,6 +1,6 @@
-<script lang="ts" >
-    import '../app.css';
-    import type {LayoutProps} from './$types';
+<script lang="ts">
+    import '../../app.css';
+    import type { LayoutProps } from './$types';
     import NormalNav from '$lib/components/nav/NormalNav.svelte';
     import InitialUserNav from '$lib/components/nav/InitialUserNav.svelte';
 
@@ -26,9 +26,7 @@
     </main>
 
     <footer class="layout__footer">
-        <h1 class="title">
-            Jurnl
-        </h1>
+        <h1 class="title">Jurnl</h1>
         <div class="column">
             <h4 class="header">Jurnl</h4>
             <p class="item">FAQs</p>
@@ -39,6 +37,5 @@
             <p class="item">Terms and Condition</p>
             <p class="item">Privacy Policies</p>
         </div>
-
     </footer>
 </div>

src/routes/+page.svelte → src/routes/(home)/+page.svelte

@@ -27,4 +27,4 @@ import type { LayoutProps } from './$types';
     <div class="cta-title">
         <PrimaryButton text="Sign Up for an Account" onClick={() => (window.location.href = '/auth/register')}/>
     </div>
-</main>
+</main>

src/routes/(journals)/journals/+layout.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import EntrySidebar from '$lib/components/journal/EntrySidebar.svelte';
+    import JournalsNav from '$lib/components/nav/JournalsNav.svelte';
+    import type { LayoutProps } from './$types';
+
+    let { data, children }: LayoutProps = $props();
+    let showSidebar = $state(false);
+
+    function toggleSidebar() {
+        showSidebar = !showSidebar;
+    }
+</script>
+
+<!--
+Sidebar code written referencing team member Dillon's HW3 code:
+https://github.com/4Clover/hw3-app/blob/b75d728cd6b5dddf95c3e6fbde131630041abea5/frontend/src/routes/%2Bpage.svelte#L552C5-L562C6
+https://github.com/4Clover/hw3-app/blob/b75d728cd6b5dddf95c3e6fbde131630041abea5/frontend/src/routes/%2Bpage.svelte#L86
+-->
+<div class="journals-layout">
+    <header>
+        <nav class="navbar">
+            <div class="navbar__container">
+                <JournalsNav onSidebarToggleClick={toggleSidebar} />
+            </div>
+        </nav>
+    </header>
+
+    <main class="journals-layout__content">
+        {@render children()}
+    </main>
+    {#if showSidebar}
+        <div
+            class="journals-layout__modal__overlay"
+            aria-modal="true"
+            role="dialog"
+            onclick={toggleSidebar}
+        >
+            <section class="journals-layout__modal">
+                <EntrySidebar />
+            </section>
+        </div>
+    {/if}
+</div>

src/routes/journals/[journal]/+page.svelte → src/routes/(journals)/journals/[journal]/+page.svelte

@@ -6,7 +6,6 @@ https://svelte.dev/docs/svelte/bind
 
 <script lang="ts">
     import { page } from '$app/stores';
-    import EntrySidebar from '$lib/components/journal/EntrySidebar.svelte';
     import JournalCover from '$lib/components/journal/JournalCover.svelte';
 </script>
 
@@ -15,6 +14,5 @@ https://svelte.dev/docs/svelte/bind
     {JSON.stringify($page, null, 2)}
 </pre> -->
 <section class="journal-page-content">
-    <EntrySidebar />
     <JournalCover />
 </section>

src/routes/(journals)/journals/[journal]/[entry]/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import EntryToolbar from '$lib/components/entry/EntryToolbar.svelte';
+    import '../../../../../styles/main.scss';
+</script>
+
+
+<pre>
+    {JSON.stringify($page, null, 2)}
+</pre> 
+
+
+<!-- <EntryToolbar/> -->

src/routes/landing/+page.server.ts → src/routes/(social)/landing/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from '../landing/$types';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals, url }) => {
     if (!locals.user) {
@@ -15,6 +15,6 @@ export const load: PageServerLoad = async ({ locals, url }) => {
     //logged in, allow access and pass user data to the page
     // use user data to get bio and stuff
     return {
-        user: locals.user
+        user: locals.user,
     };
-};
+};

src/styles/_buttons.scss

@@ -88,3 +88,7 @@ button {
     margin-right: 0;
     padding: 0.5rem 0 0.5rem 0rem;
 }
+
+.text-align-selector:hover {
+background-color: variables.$beige
+}

src/styles/_components.scss

@@ -72,14 +72,16 @@
 .journal-page-content {
     display: flex;
     flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
 }
 
 .journal-book-cover {
     width: 29rem;
     height: 38.313rem;
     background-image: url(../assets/journal_book.png);
-    margin-left: 25rem;
+    margin: auto;
+    margin-top: 5rem;
 }
 
 .journal-menu {
@@ -91,10 +93,8 @@
     width: 18.8rem;
     height: 7.31rem;
     padding: 0.188rem;
-    position: absolute;
-    top: 25rem;
-    left: 52rem;
     margin: auto;
+    margin-top: 15rem;
     z-index: 20;
 }
 
@@ -151,7 +151,17 @@
 .entry-sidebar-item {
     width: 18.75rem;
     height: 3.563rem;
-    background-color: variables.$baby-blue
+    background-color: variables.$baby-blue;
+}
+
+.entry-toolbar {
+    width: 100%;
+    height: 3.06rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: variables.$light-brown;
 }
 
 .feed-item {
@@ -178,8 +188,7 @@
     }
     &__button {
         width: 40%;
-        margin:0;
-
+        margin: 0;
     }
 }
 
@@ -216,7 +225,7 @@
 
 .manage-friend {
     display: flex;
-    flex-direction: row; 
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
@@ -275,4 +284,4 @@
         padding-inline: 2.5rem;
         align-items: center;
     }
-}
+}