Merge pull request #1 from Kerosene-Labs/feat/add-navbar

Add navigation bar

src/lib/components/buttons/Button.svelte

@@ -25,10 +25,12 @@
 		@apply rounded-3xl bg-orange-500 p-4;
 		@apply text-xl font-medium text-gray-100;
 		@apply hover:bg-amber-500;
+		@apply active:bg-amber-400;
 	}
 	.btn-secondary {
 		@apply rounded-3xl bg-neutral-800 p-4;
 		@apply text-xl font-medium text-gray-100;
 		@apply hover:bg-gray-600;
+		@apply active:bg-gray-700;
 	}
 </style>

src/lib/components/cardGroups/LandingCardGroup.svelte

@@ -15,13 +15,11 @@
 		size={SubtitleSize.SMALL}
 	/>
 	<ButtonRow>
-		<Button
-			text="Our Projects"
-			on:click={() => {
-				scrollTo(PageSectionType.PROJECTS);
-			}}
-		/>
-		<Button text="GitHub" role="secondary" />
+		<Button on:click={() => {
+			window.open("https://github.com/Kerosene-Labs"
+
+			);
+		}} text="GitHub" role="secondary" />
 	</ButtonRow>
 </div>
 
@@ -32,7 +30,4 @@
 	div.container {
 		@apply flex w-full flex-col items-center gap-4;
 	}
-	div.buttonRow {
-		@apply flex w-full flex-row gap-4;
-	}
 </style>

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/CenterContainer.svelte

@@ -0,0 +1,5 @@
+<script lang="ts"></script>
+
+<div class="flex w-full h-full items-center justify-center">
+    <slot/>
+</div>

src/lib/components/PageSection.svelte → src/lib/components/layout/PageSection.svelte

@@ -4,18 +4,11 @@ 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>
 
 <style lang="postcss">
-	div.page {
-		@apply h-screen w-screen;
-		@apply overflow-clip;
-	}
 </style>

src/lib/components/navigation/Navbar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import NavbarButton from './NavbarButton.svelte';
+	import NavbarContent from './NavbarContent.svelte';
+	import NavbarLink from './NavbarLink.svelte';
+
+	let isDrawerOpen: boolean = false;
+</script>
+
+<div class="navbar-container">
+	<div class="navbar">
+		<!-- only show navbar on small screens -->
+		<div class="w-min flex md:hidden">
+			<NavbarButton
+				on:click={() => {
+					isDrawerOpen = !isDrawerOpen;
+				}}
+			/>
+		</div>
+		<!-- responsive drawer/flex row -->
+		<NavbarContent {isDrawerOpen}>
+			<NavbarLink text="Home" url="/" />
+			<NavbarLink text="Projects" url="/projects" />
+			<NavbarLink text="Members" url="/members" />
+		</NavbarContent>
+	</div>
+</div>
+
+<style lang="postcss">
+	.navbar {
+		@apply bg-neutral-100 rounded-[-10px];
+		@apply transition-all;
+	}
+	.navbar-container {
+		@apply w-screen 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 p-4;
+	}
+	.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,43 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	// If the drawer is open. Note, this only works on (sm)all  screens.
+	export let isDrawerOpen: boolean;
+	let isNotMobileDisplay: boolean;
+
+	function handleResize() {
+		// determine if we're a "small" display
+		isNotMobileDisplay = window.matchMedia('(min-width: 768px)').matches;
+
+		// if we are a small display and the drawer is open, close it
+		if (!isNotMobileDisplay && isDrawerOpen) {
+			isDrawerOpen = false;
+			return;
+		}
+
+		// if we're a big display and the drawer isn't open it, open it
+		if (isNotMobileDisplay && !isDrawerOpen) {
+			isDrawerOpen = true;
+			return;
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('resize', handleResize);
+		handleResize();
+	});
+</script>
+
+<div class:hidden={!isDrawerOpen} id="navbarContent">
+	<div class="content">
+		<slot />
+	</div>
+</div>
+
+<style lang="postcss">
+	.content {
+		@apply flex flex-col;
+		@apply transition-all;
+		@apply md:flex-row;
+	}
+</style>

src/lib/components/navigation/NavbarLink.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let text: string;
+	export let url: string;
+</script>
+
+<a href={url} class="navbar-item">
+	{text}
+</a>
+
+<style lang="postcss">
+	.navbar-item {
+		@apply bg-inherit hover:bg-neutral-200;
+		@apply p-4;
+		@apply active:bg-inherit;
+		@apply transition-all;
+		@apply h-full;
+
+		@apply text-4xl font-medium;
+		@apply md:text-xl;
+	}
+</style>

src/lib/util/screenSize.ts

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

src/routes/+page.svelte

@@ -1,35 +1,16 @@
 <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 PageSection from '$lib/components/PageSection.svelte';
-	import { PageSectionType } from '$lib/util/pageSection';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
 
 	if (typeof window !== 'undefined') {
 		document.title = 'Kerosene Labs';
 	}
 </script>
 
-<PageSection type={PageSectionType.LANDING}>
-	<div class="center-container">
+<Navbar></Navbar>
+<div class="w-screen h-screen">
+	<CenterContainer>
 		<LandingCardGroup />
-	</div>
-</PageSection>
-<PageSection type={PageSectionType.PROJECTS}>
-	<div class="center-container">
-		<div class="sm:w-5/6 lg:w-1/2">
-			<ProjectCardGroup />
-		</div>
-	</div>
-</PageSection>
-<PageSection type={PageSectionType.MEMBERS}>
-	<div class="center-container">
-		<MembersCardGroup />
-	</div>
-</PageSection>
-
-<style lang="postcss">
-	div.center-container {
-		@apply flex w-full h-full items-center justify-center;
-	}
-</style>
+	</CenterContainer>
+</div>

src/routes/members/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+	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>
+<div class="w-screen pt-[6rem]">
+	<CenterContainer>
+		<MembersCardGroup></MembersCardGroup>
+	</CenterContainer>
+</div>

src/routes/projects/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+	import ProjectCardGroup from '$lib/components/cardGroups/ProjectCardGroup.svelte';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
+</script>
+
+<Navbar></Navbar>
+<div class="w-screen h-full pt-[6rem]">
+		<ProjectCardGroup></ProjectCardGroup>
+</div>

tailwind.config.js

@@ -3,13 +3,6 @@ export default {
   content: ['./src/**/*.{html,js,svelte,ts,svg}'],
   theme: {
     extend: {},
-    screens: {
-      xl: '1280px',
-      lg: '1024px',
-      md: '768px',
-      sm: '640px',
-
-    },
   },
   plugins: [],
 }