WIP

.gitignore

@@ -24,3 +24,4 @@ v2/test/frameless/icon.png
 v2/test/hidden/icon.png
 v2/internal/ffenestri/runtime.c
 v2/internal/runtime/assets/desktop.js
+v2/test/kitchensink/frontend/public/bundle.*

v2/test/kitchensink/frontend/src/App.svelte

@@ -4,14 +4,17 @@
   import runtime from '@wailsapp/runtime2';
   import { selectedPage } from './Store';
   import MainPage from './MainPage.svelte';
-  import Events from './Events.svelte';
-
+ 
   // Handle Dark/Light themes automatically
   var darkMode = runtime.System.DarkModeEnabled();
   runtime.System.OnThemeChange( (isDarkMode) => {
     darkMode = isDarkMode;
   });
 
+  // Hightlight CSS
+  import { atomOneDark, atomOneLight } from "svelte-highlight/styles";
+  $: css = darkMode ? atomOneDark : atomOneLight;
+
   function linkClicked(event) {
     let linkText = event.target.innerText;
     selectedPage.set(linkText); 
@@ -34,6 +37,10 @@
 
 </script>
 
+<svelte:head>
+  {@html css}
+</svelte:head>
+
 <div data-wails-drag class="page-wrapper with-sidebar" class:dark-mode="{darkMode}" data-sidebar-type="full-height" >
   <!-- Sticky alerts (toasts), empty container -->
   <div class="sticky-alerts"></div>
@@ -58,7 +65,7 @@
     </div>
   </div>
   <!-- Content wrapper -->
-  <div class="content-wrapper" class:dark-content-wrapper="{darkMode}">
+  <div class="content-wrapper noselect" class:dark-content-wrapper="{darkMode}">
     <MainPage></MainPage>
   </div>
 </div>
@@ -82,6 +89,14 @@
 
     --sidebar-title-font-size: 1.75rem;
     --sidebar-brand-font-size: 2.3rem;
+
+    /* Switch */
+    --dm-switch-bg-color: rgb(28,173,213);
+    --lm-switch-bg-color: rgb(28,173,213);
+    --dm-switch-bg-color-checked: rgb(239,218,91);
+    --lm-switch-bg-color-checked: rgb(239,218,91);
+    --lm-switch-slider-bg-color: #FFF;
+    --dm-switch-slider-bg-color: #FFF;
   }
 
   .sidebar-link {

v2/test/kitchensink/frontend/src/Events.svelte

@@ -1,50 +0,0 @@
-<script>
-
-  import runtime from '@wailsapp/runtime2';
-  import { Highlight } from "svelte-highlight";
-  import { typescript } from "svelte-highlight/languages";
-  import { atomOneDark, atomOneLight } from "svelte-highlight/styles";
-
-  let css = runtime.System.DarkModeEnabled() ? atomOneDark : atomOneLight;
-  $: code = `const add = (a: number, b: number) => a + b;`;
-
-  runtime.System.OnThemeChange( (isDarkMode) => {
-    css = isDarkMode ? atomOneDark : atomOneLight;
-  });
-</script>
-
-<svelte:head>
-  {@html css}
-</svelte:head>
-
-<div class="page">
-    <h4>Events</h4>
-
-<Highlight language="{typescript}" {code} />
-    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:
-    
-    <ul class="list">
-        <li>Debug</li>
-        <li>Info</li>
-        <li>Warning</li>
-        <li>Error</li>
-        <li>Fatal</li>
-    </ul>
-    All methods will log to the console and <code>Fatal</code> will also exit the program.
-
-    <h5>Try Me</h5>
-    <hr>
-    <div class="logging-form">
-    </div>
-</div>
-
-<style>
-    .page {
-        margin-left: 50px;
-        margin-top: 10px;
-    }
-
-    h5 {
-        margin-top: 3rem;
-    }
-</style>

v2/test/kitchensink/frontend/src/MainPage.svelte

@@ -1,9 +1,9 @@
 <script>
 
     import {selectedPage} from './Store';
-    import TitlePage from './TitlePage.svelte';
-    import Logging from './Logging.svelte';
-    import Events from './Events.svelte';
+    import TitlePage from './pages/TitlePage.svelte';
+    import Logging from './pages/Logging.svelte';
+    import Events from './pages/Events.svelte';
 
 </script>
 
@@ -15,10 +15,8 @@
 
 <style>
     .mainpage {
-        margin-top: 55px;
-        margin-left: 25px;
-    }
-    h3 {
-        margin-left: 20px;
+        margin-top: 60px;
+        margin-left: 45px;
+        margin-right: 45px;
     }
 </style>

v2/test/kitchensink/frontend/src/components/CodeBlock.svelte

@@ -0,0 +1,41 @@
+
+<script>
+    import { Highlight } from "svelte-highlight";
+    import { go, javascript } from "svelte-highlight/languages";
+    let isJs = false;
+    $: lang = isJs ? javascript : go;
+    export let jsCode = "Hi form JS!";
+    export let goCode = "Hi form Go!";
+
+    $: code = isJs ? jsCode : goCode;
+</script>
+
+<div data-wails-no-drag class="code">
+    <div class="header">
+        <span>Title</span>
+        <span class="toggle">
+            <span>Go</span>
+            <span class="custom-switch">
+                <input type="checkbox" id="languageToggle" value="" bind:checked={isJs}>
+                <label for="languageToggle">Javascript</label>
+            </span>
+        </span>
+    </div>
+    <Highlight language="{lang}" {code} />
+</div>
+
+<style>
+
+    .header {
+        margin: 5px;
+    }
+
+    .toggle {
+        float: right;
+    }
+
+    .custom-switch {
+        display: inline-block;
+    }
+
+</style>

v2/test/kitchensink/frontend/src/pages/Events.svelte

@@ -0,0 +1,21 @@
+<script>
+
+    import CodeBlock from '../components/CodeBlock.svelte';
+
+</script>
+
+<div>
+    <h4>Events</h4>
+
+    Events are......
+
+    <h5>Try Me</h5>
+    <hr>
+    <CodeBlock></CodeBlock>
+</div>
+
+<style>
+    h5 {
+        margin-top: 3rem;
+    }
+</style>

v2/test/kitchensink/frontend/src/pages/Logging.svelte

@@ -14,7 +14,7 @@
     }
 
 </script>
-<div class="page">
+<div>
     <h4>Logging</h4>
 
     Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:
@@ -55,10 +55,6 @@
 </div>
 
 <style>
-    .page {
-        margin-left: 50px;
-        margin-top: 10px;
-    }
     .logging-form {
         margin-top: 2rem;
     }

v2/test/kitchensink/main.go

@@ -20,8 +20,7 @@ func main() {
 		Mac: &mac.Options{
 			WebviewIsTransparent:          true,
 			WindowBackgroundIsTranslucent: true,
-			// TitleBar: mac.TitleBarHiddenInset(),
-			TitleBar: mac.TitleBarHiddenInset(),
+			TitleBar:                      mac.TitleBarHiddenInset(),
 		},
 	})