adding live pages

Author: doldsimo

package-lock.json

@@ -11,8 +11,10 @@
 	},
 	"devDependencies": {
 		"@smui/button": "^7.0.0-beta.0",
+		"@smui/drawer": "^7.0.0-beta.0",
 		"@sveltejs/adapter-auto": "^1.0.0-next.90",
 		"@sveltejs/kit": "^1.0.0-next.587",
+		"carbon-components-svelte": "^0.73.5",
 		"svelte": "^3.57.0",
 		"svelte-awesome-color-picker": "^2.4.1",
 		"svelte-check": "^2.9.2",

package.json

@@ -21,9 +21,9 @@
             icon="mdi:close"
             on:click={showHideMenue}
             on:keydown={showHideMenue}
-            style="cursor: pointer;"
+            style="cursor: pointer; font-size: 1.7em"
         />
-        <p>Navigation</p>
+        <!-- <p>Navigation</p> -->
         <nav>
             {#each nav as item}
                 <ul>
@@ -41,6 +41,13 @@
 </div>
 
 <style>
+    a {
+        color: black;
+    }
+    a:hover {
+        color: black;
+        text-decoration: none;
+    }
     /* For showing/hiding Sidebar */
     .side-drawer {
         z-index: 0;
@@ -51,7 +58,7 @@
         left: 0;
         top: 0;
         z-index: 200;
-        background-color: rgb(197, 197, 197);
+        background-color: rgb(240, 240, 240);
         padding: 16px 16px;
         box-sizing: border-box;
         transition: transform 0.3 ease-out;
@@ -98,11 +105,9 @@
         margin-right: 1em;
         font-weight: bold;
     }
-    li:hover {
-        text-decoration: underline;
-    }
-
     .active {
         text-decoration: underline;
+        color: blue;
+        text-decoration: none;
     }
 </style>

src/components/ContainerSidbebar/ContainerSidbebar.svelte

@@ -0,0 +1,3 @@
+<div>
+    test
+</div>

src/components/LiveExample/LiveExample.svelte

@@ -1,30 +1,33 @@
 <script>
     import ContainerSidbebar from "../components/ContainerSidbebar/ContainerSidbebar.svelte";
     import Footer from "../components/Footer/Footer.svelte";
-    import 'iconify-icon';
+    import "iconify-icon";
 
     let showSidebar = false;
     const nav = [
-        {title: "Home", path:"/"},
-        {title: "UI-Framework comparison", path:"/ui-framework-comparison"},
-        {title: "About", path:"/about"},
-    ]
+        { title: "Home", path: "/" },
+        { title: "Component comparison", path: "/component-comparison" },
+        { title: "Live example", path: "/live-example" },
+        { title: "About", path: "/about" },
+    ];
 
     function showHideMenue() {
         showSidebar = !showSidebar;
         console.log(showSidebar);
     }
-
-
 </script>
 
-<iconify-icon icon="mdi:menu" on:click={showHideMenue} on:keydown={showHideMenue} style="cursor: pointer;"></iconify-icon>
-
-<ContainerSidbebar showSidebar={showSidebar} showHideMenue={showHideMenue} nav={nav}/>
+<iconify-icon
+    icon="mdi:menu"
+    on:click={showHideMenue}
+    on:keydown={showHideMenue}
+    style="cursor: pointer; font-size: 1.7em"
+/>
 
+<main class="main-content">
+    <ContainerSidbebar {showSidebar} {showHideMenue} {nav} />
 
-<!-- slot is standing for rendering the page content -->
-<slot />
-
+    <!-- slot is standing for rendering the page content -->
+    <slot />
+</main>
 <!-- <Footer/> -->
-