From e4c6c5711d55e8acb4366cebbd9c8b7c45741c5e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 30 Dec 2020 10:54:08 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20working=20on=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #5
---
 src/components/Dashboard.svelte |  2 +-
 src/components/Sidebar.svelte   | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard.svelte b/src/components/Dashboard.svelte
index 8dafdf87..f9a7bada 100644
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -16,7 +16,6 @@
 </script>
 
 <div>
-  <!-- <Sidebar /> -->
   <nav class="bg-gray-800">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-16">
@@ -298,6 +297,7 @@
   </div>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <Sidebar />
       <div class="mb-8">
         <FileUpload />
       </div>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 630abf56..dcdca0d4 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -2,7 +2,7 @@
   let open = false;
 </script>
 
-<div class="md:flex flex-col md:flex-row md:min-h-screen w-full">
+<div class="md:flex flex-col md:flex-row h-screen w-full">
   <div
     class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0">
     <div
@@ -27,7 +27,10 @@
         </svg>
       </button>
     </div>
-    <nav class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
+    <nav
+      :class:block={open}
+      :class:hidden={!open}
+      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
       <a
         class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
         href="#">Blog</a>
@@ -42,6 +45,9 @@
         href="#">Contact</a>
       <div class="relative">
         <button
+          on:click={() => {
+            open = !open;
+          }}
           class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
           <span>Dropdown</span>
           <svg
@@ -53,13 +59,8 @@
               clip-rule="evenodd" /></svg>
         </button>
         <div
-          x-show="open"
-          x-transition:enter="transition ease-out duration-100"
-          x-transition:enter-start="transform opacity-0 scale-95"
-          x-transition:enter-end="transform opacity-100 scale-100"
-          x-transition:leave="transition ease-in duration-75"
-          x-transition:leave-start="transform opacity-100 scale-100"
-          x-transition:leave-end="transform opacity-0 scale-95"
+          class:block={open}
+          class:hidden={!open}
           class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg">
           <div
             class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">