Add navbar with logo, add dark-mode toggle button

ssciwr · Aug 19, 2024 · a83c334 · a83c334
1 parent b7126b6
commit a83c334
Show file tree

Hide file tree

Showing 12 changed files with 476 additions and 21 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
@@ -19,9 +18,9 @@ A clear and concise description of what you expected to happen.
 **Screenshots or files**
 If applicable, add screenshots/files to help explain your problem.
 
-**machine/OS:
- - OS: [e.g. iOS]
+\*\*machine/OS:
 
+- OS: [e.g. iOS]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**
@@ -17,4 +16,4 @@ A clear and concise description of what you want to happen.
 A clear and concise description of any alternative solutions or features you've considered.
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+Add any other context or screenshots about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/meta_issue.md b/.github/ISSUE_TEMPLATE/meta_issue.md
@@ -4,12 +4,10 @@ about: A meat-feature is a feature that decays naturally into multiple individua
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **What's the overarching idea and why is this additional feature necessary?**
 
 **Describe into what individual steps/features your suggestion decays, and outline their basic ideas in one sentence each**
 
-
 **Additional context**
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -4,7 +4,6 @@ about: Ask something about the functionality of the software
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **What is your question?**

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -14,4 +14,4 @@ updates:
       all:
         applies-to: version-updates
         patterns:
-          - "*"
+          - '*'
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ To start a dev server:
 
 ## Notes
 
-Commands used to generate most of the initial empty app: 
+Commands used to generate most of the initial empty app:
 
 ```bash
 pnpm create svelte@latest

diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-900">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/assets/mondey_dark.svg b/src/lib/assets/mondey_dark.svg
diff --git a/src/lib/assets/mondey_light.svg b/src/lib/assets/mondey_light.svg
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1 +1 @@
-export const prerender = true;
+export const prerender = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,9 +1,31 @@
 <script>
-    import { Banner } from 'flowbite-svelte';
+	import {
+		P,
+		Banner,
+		Navbar,
+		NavBrand,
+		NavLi,
+		NavUl,
+		NavHamburger,
+		DarkMode
+	} from 'flowbite-svelte';
+	import logo_light from '$lib/assets/mondey_light.svg';
+	import logo_dark from '$lib/assets/mondey_dark.svg';
 </script>
 
-<div class="p-8">
-    <Banner>
-        This is a work-in-progress prototype frontend for the MONDEY website
-    </Banner>
-</div>
+<Banner><P>This is a work-in-progress prototype frontend for the MONDEY website</P></Banner>
+<Navbar>
+	<NavBrand href="/">
+		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
+		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
+	</NavBrand>
+	<NavHamburger />
+	<NavUl>
+		<NavLi href="/" active={true}>Home</NavLi>
+		<NavLi href="/">Downloads</NavLi>
+		<NavLi href="/">Aktuelles</NavLi>
+		<NavLi href="/">Kontakt</NavLi>
+	</NavUl>
+	<DarkMode />
+</Navbar>
+<div class="flex flex-col items-center justify-center"></div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,9 +1,13 @@
-import flowbitePlugin from 'flowbite/plugin'
+import flowbitePlugin from 'flowbite/plugin';
+import typographyPlugin from '@tailwindcss/typography';
 
 import type { Config } from 'tailwindcss';
 
 export default {
-	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
+	],
 	darkMode: 'selector',
 	theme: {
 		extend: {
@@ -25,5 +29,5 @@ export default {
 		}
 	},
 
-	plugins: [flowbitePlugin, require('@tailwindcss/typography')]
+	plugins: [flowbitePlugin, typographyPlugin]
 } as Config;