Add sidebar display toggle

src/components/icons/IconChevronsRight.vue

+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#000000"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M13 17l5-5-5-5M6 17l5-5-5-5" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      default: 24,
+    },
+    height: {
+      default: 24,
+    },
+  },
+};
+</script>
\ No newline at end of file

src/views/Home.vue

 <template>
-  <div id="home-container">
-    <section id="user-section" class="w-1/3">
-      <div>
-        <ImageUpload></ImageUpload>
-        <TagCreation></TagCreation>
-        <UserAuthentication class="absolute bottom-0"></UserAuthentication>
-      </div>
+  <div class="flex flex-row">
+    <section
+      v-show="!sideBarHidden"
+      class="flex flex-col sticky top-0 h-screen w-1/3"
+    >
+      <button @click="sideBarHidden = true" class="self-end mt-2">
+        <IconXCircle
+          class="stroke-current text-gray-500 hover:text-gray-600"
+        ></IconXCircle>
+      </button>
+      <ImageUpload></ImageUpload>
+      <TagCreation></TagCreation>
+      <UserAuthentication class="absolute bottom-0"></UserAuthentication>
     </section>
-    <ImageList></ImageList>
+    <button
+      v-show="sideBarHidden"
+      @click="sideBarHidden = false"
+      class="self-start sticky top-0"
+    >
+      <IconChevronsRight
+        class="mt-1 stroke-current text-gray-500 hover:text-gray-600"
+        width="27"
+        height="27"
+      ></IconChevronsRight>
+    </button>
+    <ImageList class="mx-2"></ImageList>
   </div>
 </template>
 
@@ -16,6 +33,8 @@ import ImageList from "@/components/ImageList.vue";
 import ImageUpload from "@/components/ImageUpload.vue";
 import TagCreation from "@/components/TagCreation.vue";
 import UserAuthentication from "@/components/UserAuthentication.vue";
+import IconXCircle from "@/components/icons/IconXCircle.vue";
+import IconChevronsRight from "@/components/icons/IconChevronsRight.vue";
 
 export default {
   components: {
@@ -23,21 +42,13 @@ export default {
     ImageUpload,
     TagCreation,
     UserAuthentication,
+    IconXCircle,
+    IconChevronsRight,
+  },
+  data: function () {
+    return {
+      sideBarHidden: false,
+    };
   },
 };
-</script>
-
-<style scoped>
-#user-section {
-  display: flex;
-  flex-flow: column;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  /* width: 25%; */
-}
-#home-container {
-  display: flex;
-  flex-flow: row;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file