base navbar done

src/lib/components/cardGroups/LandingCardGroup.svelte

@@ -15,12 +15,6 @@
 		size={SubtitleSize.SMALL}
 	/>
 	<ButtonRow>
-		<Button
-			text="Our Projects"
-			on:click={() => {
-				scrollTo(PageSectionType.PROJECTS);
-			}}
-		/>
 		<Button text="GitHub" role="secondary" />
 	</ButtonRow>
 </div>

src/lib/components/cardGroups/ProjectCardGroup.svelte

@@ -19,36 +19,21 @@
 		<Title text="Our Projects" size={TitleSize.SMALL} />
 		<p class="subtitle">We like building things that help.</p>
 	</div>
-	<div class="carousel">
-		<div class="carouselItems">
-			<div class="carouselItem">
-				<ProjectCard
-					name="Kindling"
-					description="The fuel that'll ignite your application. A programmable TLS HTTP/1.1 server with no dependencies."
-					repoUrl="https://github.com/Kerosene-Labs/kindling"
-				/>
-			</div>
-			<ProjectCard
-				name="ATC"
-				description="An API gateway with scoped access management for organizations that don't enjoy vendor lock-in."
-				repoUrl="https://github.com/Kerosene-Labs/atc"
-			/>
-			<ProjectCard
-				name="Espresso"
-				description="Build Java applications without fighting your build tool. Drink some espresso. "
-				repoUrl="https://github.com/Kerosene-Labs/espresso"
-			/>
-		</div>
-	</div>
-	<div class="w-1/4 self-center">
-		<Button
-			text="Our Team"
-			role="secondary"
-			on:click={() => {
-				scrollTo(PageSectionType.MEMBERS);
-			}}
-		/>
-	</div>
+	<ProjectCard
+		name="Kindling"
+		description="The fuel that'll ignite your application. A programmable TLS HTTP/1.1 server with no dependencies."
+		repoUrl="https://github.com/Kerosene-Labs/kindling"
+	/>
+	<ProjectCard
+		name="ATC"
+		description="An API gateway with scoped access management for organizations that don't enjoy vendor lock-in."
+		repoUrl="https://github.com/Kerosene-Labs/atc"
+	/>
+	<ProjectCard
+		name="Espresso"
+		description="Build Java applications without fighting your build tool. Drink some espresso. "
+		repoUrl="https://github.com/Kerosene-Labs/espresso"
+	/>
 </div>
 
 <style lang="postcss">

src/lib/components/layout/PageSection.svelte

@@ -4,12 +4,9 @@ Description: A slottable component that forces its width and height to be that o
 also exports functions for having the browser smooth scroll to it.
 -->
 <script lang="ts">
-	import type { PageSectionType } from "$lib/util/pageSection";
-
-	export let type: PageSectionType;
 </script>
 
-<div class="page" id={type}>
+<div class="page">
 	<slot />
 </div>
 

src/lib/components/navigation/Navbar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import NavbarButton from './NavbarButton.svelte';
+	import NavbarContent from './NavbarContent.svelte';
+
+	let isDrawerOpen: boolean = false;
+</script>
+
+<div class="navbar-container">
+	<div class="navbar">
+		<!-- only show navbar on small screens -->
+		<div class="w-min h-min flex md:hidden">
+			<NavbarButton
+				on:click={() => {
+					isDrawerOpen = !isDrawerOpen;
+				}}
+			/>
+		</div>
+		<!-- responsive drawer/flex row -->
+		<NavbarContent {isDrawerOpen}>
+			<a href="/">Home</a>
+			<a href="/projects">Projects</a>
+			<a href="/members">Members</a>
+		</NavbarContent>
+	</div>
+</div>
+
+<style lang="postcss">
+	.navbar {
+		@apply bg-neutral-100 p-4 rounded-[-10px];
+		@apply transition-all;
+	}
+	.navbar-container {
+		@apply w-screen p-0 z-50;
+		@apply fixed;
+		@apply transition-all;
+	}
+</style>

src/lib/components/navigation/NavbarButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+</script>
+
+<button on:click class="btn btn-navbar">
+	<svg class="logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path d="M4 18H10" stroke-width="2" stroke-linecap="round"/>
+		<path d="M4 12L16 12" stroke-width="2" stroke-linecap="round"/>
+		<path d="M4 6L20 6" stroke-width="2" stroke-linecap="round"/>
+		</svg>
+</button>
+
+<style lang="postcss">
+	.btn {
+		@apply select-none;
+	}
+	.logo {
+		@apply w-11 h-11 stroke-neutral-300 hover:stroke-neutral-400 active:stroke-neutral-400 focus:stroke-neutral-400;
+		@apply transition-all;
+	}
+</style>

src/lib/components/navigation/NavbarContent.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	// If the drawer is open. Note, this only works on (sm)all  screens.
+	export let isDrawerOpen: boolean;
+
+    function handleResize() {
+        if (window.innerWidth >= 300) {
+				isDrawerOpen = true;
+			} else {
+				isDrawerOpen = false;
+			}
+    }
+
+	onMount(() => {
+		window.addEventListener('resize', handleResize);
+        handleResize();
+	});
+</script>
+
+<div
+	class:hidden={!isDrawerOpen}
+	id="container"
+	class="flex md:flex-row sm:flex-col sm:gap-2 md:gap-6"
+>
+	<slot />
+</div>
+
+<style lang="postcss">
+</style>

src/lib/components/navigation/NavbarItem.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let text: string;
+</script>
+
+<div class="navbar-item"><p class="navbar-item">{text}</p></div>
+
+<style lang="postcss">
+	.navbar-item {
+		@apply text-xl font-medium;
+	}
+</style>

src/lib/util/screenSize.ts

@@ -0,0 +1,3 @@
+export enum ScreenSizes {
+    sm = 300,
+}

src/routes/+page.svelte

@@ -1,33 +1,21 @@
 <script lang="ts">
 	import LandingCardGroup from '$lib/components/cardGroups/LandingCardGroup.svelte';
-	import MembersCardGroup from '$lib/components/cardGroups/MembersCardGroup.svelte';
-	import ProjectCardGroup from '$lib/components/cardGroups/ProjectCardGroup.svelte';
 	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
 	import PageSection from '$lib/components/layout/PageSection.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
 	import { PageSectionType } from '$lib/util/pageSection';
 
 	if (typeof window !== 'undefined') {
 		document.title = 'Kerosene Labs';
 	}
 </script>
 
-<PageSection type={PageSectionType.LANDING}>
+<Navbar></Navbar>
+<PageSection>
 	<CenterContainer>
 		<LandingCardGroup />
 	</CenterContainer>
 </PageSection>
-<PageSection type={PageSectionType.PROJECTS}>
-	<CenterContainer>
-		<div class="sm:w-5/6 lg:w-1/2">
-			<ProjectCardGroup />
-		</div>
-	</CenterContainer>
-</PageSection>
-<PageSection type={PageSectionType.MEMBERS}>
-	<CenterContainer>
-		<MembersCardGroup />
-	</CenterContainer>
-</PageSection>
 
 <style lang="postcss">
 </style>

src/routes/members/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import PageSection from '$lib/components/layout/PageSection.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import MembersCardGroup from '$lib/components/cardGroups/MembersCardGroup.svelte';
+</script>
+
+<Navbar></Navbar>
+<PageSection>
+	<CenterContainer>
+		<MembersCardGroup></MembersCardGroup>
+	</CenterContainer>
+</PageSection>

src/routes/projects/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import ProjectCardGroup from '$lib/components/cardGroups/ProjectCardGroup.svelte';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import PageSection from '$lib/components/layout/PageSection.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
+</script>
+
+<Navbar></Navbar>
+<PageSection>
+	<CenterContainer>
+		<ProjectCardGroup></ProjectCardGroup>
+	</CenterContainer>
+</PageSection>

tailwind.config.js

@@ -7,8 +7,7 @@ export default {
       xl: '1280px',
       lg: '1024px',
       md: '768px',
-      sm: '640px',
-
+      sm: '300px',
     },
   },
   plugins: [],