|
1 | 1 | <script>
|
2 |
| - // import './app.css' |
3 |
| - import * as pages from './pages.js' |
| 2 | + // import './app.css' |
| 3 | + import * as pages from './pages.js'; |
4 | 4 |
|
5 |
| - let currentCmp |
| 5 | + let currentCmp; |
6 | 6 |
|
7 |
| - const go = (cmp) => () => { |
8 |
| - currentCmp = cmp |
9 |
| - console.log(currentCmp.name) |
10 |
| - } |
| 7 | + const go = (cmp) => () => { |
| 8 | + currentCmp = cmp; |
| 9 | + console.log(currentCmp.name); |
| 10 | + }; |
11 | 11 | </script>
|
12 | 12 |
|
13 | 13 | <nav>
|
14 |
| - <h2>This is a huge app</h2> |
15 |
| - {#each Object.entries(pages) as [name, cmp] (cmp)} |
16 |
| - <a class="App-link" href on:click|preventDefault={go(cmp)} |
17 |
| - >{name.replace('_', ' ')}</a |
18 |
| - > |
19 |
| - {/each} |
| 14 | + <h2>This is a huge app</h2> |
| 15 | + {#each Object.entries(pages) as [name, cmp] (cmp)} |
| 16 | + <a class="App-link" href on:click|preventDefault={go(cmp)}>{name.replace('_', ' ')}</a> |
| 17 | + {/each} |
20 | 18 | </nav>
|
21 | 19 |
|
22 | 20 | {#if currentCmp}
|
23 |
| - <main> |
24 |
| - <svelte:component this={currentCmp} /> |
25 |
| - </main> |
| 21 | + <main> |
| 22 | + <svelte:component this={currentCmp} /> |
| 23 | + </main> |
26 | 24 | {:else}
|
27 |
| - <div class="App"> |
28 |
| - <header class="App-header"> |
29 |
| - <p> |
30 |
| - Edit |
31 |
| - <code>src/App.svelte</code> |
32 |
| - and save to reload (prepare tissues). |
33 |
| - </p> |
34 |
| - <a |
35 |
| - class="App-link" |
36 |
| - href="https://svelte.dev" |
37 |
| - target="_blank" |
38 |
| - rel="noopener noreferrer">Learn Svelte</a |
39 |
| - > |
40 |
| - </header> |
41 |
| - </div> |
| 25 | + <div class="App"> |
| 26 | + <header class="App-header"> |
| 27 | + <p> |
| 28 | + Edit |
| 29 | + <code>src/App.svelte</code> |
| 30 | + and save to reload (prepare tissues). |
| 31 | + </p> |
| 32 | + <a class="App-link" href="https://svelte.dev" target="_blank" rel="noopener noreferrer" |
| 33 | + >Learn Svelte</a |
| 34 | + > |
| 35 | + </header> |
| 36 | + </div> |
42 | 37 | {/if}
|
43 | 38 |
|
44 | 39 | <style>
|
45 |
| - :global(body) { |
46 |
| - margin: 0; |
47 |
| - font-family: Arial, Helvetica, sans-serif; |
48 |
| - } |
49 |
| - nav { |
50 |
| - float: left; |
51 |
| - text-align: center; |
52 |
| - padding: 1em; |
53 |
| - height: 100vh; |
54 |
| - overflow: auto; |
55 |
| - box-sizing: border-box; |
56 |
| - } |
57 |
| - nav a { |
58 |
| - display: block; |
59 |
| - } |
60 |
| - main { |
61 |
| - overflow: auto; |
62 |
| - text-align: center; |
63 |
| - } |
64 |
| - .App { |
65 |
| - text-align: center; |
66 |
| - } |
67 |
| - .App-header { |
68 |
| - background-color: #f9f6f6; |
69 |
| - color: #333; |
70 |
| - min-height: 100vh; |
71 |
| - display: flex; |
72 |
| - flex-direction: column; |
73 |
| - align-items: center; |
74 |
| - justify-content: center; |
75 |
| - font-size: calc(10px + 2vmin); |
76 |
| - } |
77 |
| - .App-link { |
78 |
| - color: #ff3e00; |
79 |
| - } |
| 40 | + :global(body) { |
| 41 | + margin: 0; |
| 42 | + font-family: Arial, Helvetica, sans-serif; |
| 43 | + } |
| 44 | + nav { |
| 45 | + float: left; |
| 46 | + text-align: center; |
| 47 | + padding: 1em; |
| 48 | + height: 100vh; |
| 49 | + overflow: auto; |
| 50 | + box-sizing: border-box; |
| 51 | + } |
| 52 | + nav a { |
| 53 | + display: block; |
| 54 | + } |
| 55 | + main { |
| 56 | + overflow: auto; |
| 57 | + text-align: center; |
| 58 | + } |
| 59 | + .App { |
| 60 | + text-align: center; |
| 61 | + } |
| 62 | + .App-header { |
| 63 | + background-color: #f9f6f6; |
| 64 | + color: #333; |
| 65 | + min-height: 100vh; |
| 66 | + display: flex; |
| 67 | + flex-direction: column; |
| 68 | + align-items: center; |
| 69 | + justify-content: center; |
| 70 | + font-size: calc(10px + 2vmin); |
| 71 | + } |
| 72 | + .App-link { |
| 73 | + color: #ff3e00; |
| 74 | + } |
80 | 75 | </style>
|
0 commit comments