filip/svelte_flask_template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add sidebar menu

Browse Source
This commit is contained in:
Filip Krumpe 2022-01-10 19:47:03 +01:00
parent 1430091143
commit b4d0655f62
4 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
webapp/src/App.svelte
View File

@ -2,17 +2,18 @@
import Navbar from "./menu/Navbar.svelte"; import Navbar from "./menu/Navbar.svelte";
import Sidebar from "./menu/Sidebar.svelte"; import Sidebar from "./menu/Sidebar.svelte";
export let name; import Main from "./pages/Main.svelte";
export let name = "Test 2";
let open = false; let open = false;
</script> </script>
<main> <main class="w-full h-full">
<Sidebar bind:open/> <Sidebar bind:open/>
<Navbar bind:sidebar={open}/> <Navbar bind:sidebar={open}/>
<h1>Hello {name}!</h1> <Main name={name} />
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main> </main>
<svelte:head> <svelte:head>
@ -20,20 +21,6 @@
</svelte:head> </svelte:head>
<style> <style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) { @media (min-width: 640px) {
main { main {
max-width: none; max-width: none;

8
webapp/src/menu/Navbar.svelte
View File

@ -1,9 +1,9 @@
<script> <script>
import Logo from './Logo.svelte' import Logo from './Logo.svelte';
import Hamburger from './Hamburger.svelte' import Hamburger from './Hamburger.svelte';
import Menu from './Menu.svelte' import Menu from './Menu.svelte';
export let sidebar = false export let sidebar = false;
</script> </script>
<header class="flex justify-between bg-gray-200 p-2 items-center text-gray-600 border-b-2"> <header class="flex justify-between bg-gray-200 p-2 items-center text-gray-600 border-b-2">

6
webapp/src/menu/Sidebar.svelte
View File

@ -4,8 +4,8 @@
<aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg" class:open> <aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg" class:open>
<nav class="p-12 text-xl"> <nav class="p-12 text-xl">
<a class="block" href="#about">About</a> <a class="block" href="/">Home</a>
<a class="block" href="#contact">Contact</a> <a class="block" href="/about">About</a>
</nav> </nav>
</aside> </aside>
@ -14,7 +14,7 @@
left: -100%; left: -100%;
transition: left 0.3s ease-in-out transition: left 0.3s ease-in-out
} }
.open { .open {
left: 0 left: 0
} }

36
webapp/src/pages/Main.svelte Normal file
View File

@ -0,0 +1,36 @@
<script>
export let open=true
export let name;
</script>
<aside class="abolute w-full h-full p-4" class:open class:hidden={!open}>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</aside>
<style>
aside {
left: -100%;
transition: right 0.3s ease-in-out;
text-align: center;
padding: 1em;
max-width: 480px;
margin: 0 auto;
}
.open {
left: 0;
}
.hidden {
visibility: hidden;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
</style>