diff --git a/site/src/App.vue b/site/src/App.vue
index aa56c39d..62f8e2fa 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -1,69 +1,108 @@
 <template>
-  <sliding-sidebar @closeSidebar="sidebarHandler" />
-  <div
-    v-if="showLogin"
-    class="fixed top-0 left-0 w-screen h-screen z-50"
-    @click="toggleLogin"
-  >
-    <login
-      @click.stop="() => {}"
-      @toggleLogin="toggleLogin"
-    />
-  </div>
-  <div
-    id="main-container"
-    class="relative flex flex-row-reverse filter h-screen w-screen z-1"
-  >
-    <search-query ref="searchQuery" />
+  <div>
+    <div
+      v-if="showLogin"
+      class="fixed top-0 left-0 w-screen h-screen z-50"
+      @click="toggleLogin"
+    >
+      <login
+        @click.stop="() => {}"
+        @toggleLogin="toggleLogin"
+      />
+    </div>
 
     <div
-      id="content-wrapper"
-      class="w-full bg-2 h-content flex flex-col relative top-tbar overflow-auto app-scrollbar"
+      class="relative flex flex-row filter h-screen w-screen z-1"
+      :class="{'brightness-50': showLogin}"
     >
+      <sidebar
+        ref="sidebar"
+        :closed="closedSidebar && !uncollapsedSidebar"
+        :uncollapsed="uncollapsedSidebar"
+        :collapsing="collapsingSidebar"
+        @closeSidebar="toggleSidebar"
+      />
       <div
-        id="content"
-        class="flex-grow-1 flex-shrink-0 flex-auto"
+        ref="content"
+        :class="{'brightness-50': uncollapsedSidebar && !collapsingSidebar}"
+        class="deep-inner-shadow w-full bg-2 h-content flex flex-col relative top-tbar overflow-auto app-scrollbar filter"
       >
-        <router-view class="my-7 mx-9" />
+        <div
+          class="flex-grow-1 flex-shrink-0 flex-auto"
+        >
+          <router-view class="my-7 mx-9" />
+        </div>
+        <custom-footer class="flex-shrink-0" />
       </div>
-      <Footer class="flex-shrink-0" />
+      <topbar
+        ref="topbar"
+        class="flex fixed top-0 left-0 w-full h-tbar border-bar
+      text-1 items-center justify-between border-b bg-1 filter"
+        :class="{'brightness-50': uncollapsedSidebar && !collapsingSidebar}"
+        @toggleLogin="toggleLogin"
+        @launchSearch="launchSearch"
+        @updateSearch="updateSearch"
+        @openSidebar="toggleSidebar"
+      />
     </div>
-    <topbar
-      ref="topbar"
-      @toggleLogin="toggleLogin"
-      @launchSearch="launchSearch"
-      @updateSearch="updateSearch"
-      @openSidebar="sidebarHandler"
-    />
-    <sidebar @closeSidebar="sidebarHandler" />
   </div>
 </template>
 
 <script lang="js">
+import debounce from 'lodash/debounce'
 import Login from '@/components/Login.vue'
-import Footer from '@/components/Footer.vue'
+import CustomFooter from '@/components/CustomFooter.vue'
 
-import { defineComponent, watch } from 'vue'
+import { defineComponent, watch, ref } from 'vue'
 
 import Topbar from '@/components/Topbar.vue'
-import Sidebar from '@/components/Sidebar/Sidebar.vue'
-import SlidingSidebar from '@/components/Sidebar/SlidingSidebar.vue'
-import SearchQuery from '@/components/SearchQuery.vue'
-
+import Sidebar from '@/components/Sidebar.vue'
+const breakWidth = 1024
 export default defineComponent({
   components: {
     Login,
     Topbar,
     Sidebar,
-    SlidingSidebar,
-    SearchQuery,
-    Footer
+    CustomFooter
+  },
+  setup () {
+    const sidebar = ref(null)
+    const topbar = ref(null)
+    const content = ref(null)
+    return { sidebar, topbar, content }
   },
   data () {
+    const isScreenSmall = () => Math.max(
+      document.documentElement.clientWidth ||
+        0, window.innerWidth || 0) <= breakWidth
+
+    const checkResize = debounce(() => {
+      if (!this.isScreenSmall() && this.smallScreen) {
+        this.smallScreen = false
+
+        if (this.uncollapsedSidebar) {
+          this.uncollapsedSidebar = false
+          this.topbar.$el.removeEventListener('mousedown', this.toggleSidebar)
+          this.content.removeEventListener('mousedown', this.toggleSidebar)
+        }
+        if (this.closedSidebar) {
+          this.closedSidebar = false
+        }
+      } else if (this.isScreenSmall() && !this.smallScreen) {
+        this.smallScreen = true
+        if (!this.closedSidebar) {
+          this.closedSidebar = true
+        }
+      }
+    }, 50)
+
     return {
-      showSidebar: false,
-      reachedBreak: false,
-      breakWidth: 1024,
+      checkResize,
+      isScreenSmall,
+      closedSidebar: isScreenSmall(),
+      uncollapsedSidebar: false,
+      collapsingSidebar: false,
+      smallScreen: isScreenSmall(),
       showLogin: false
     }
   },
@@ -89,107 +128,61 @@ export default defineComponent({
       }
     })
     window.addEventListener('resize', this.checkResize)
-    window.addEventListener('keydown', this.checkKeydown)
-    this.checkResize()
   },
   unmounted () {
     window.removeEventListener('resize', this.checkResize)
-    window.removeEventListener('keydown', this.checkKeydown)
   },
   methods: {
-    checkKeydown (e) {
-      if (e.key === 'Escape') {
-        if (this.$data.showSidebar) {
-          this.sidebarHandler()
-        } else if (this.$refs.searchQuery.$data.searchVisible) {
-          this.$refs.searchQuery.collapseSearch()
-        }
-      }
-    },
-    checkResize () {
-      const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-      this.$refs.searchQuery.checkResize()
-      if (vw > this.$data.breakWidth && !this.$data.reachedBreak) {
-        const slideSidebar = document.getElementById('slide-sidebar')
-        if (!slideSidebar.classList.contains('-l-sbar')) {
-          slideSidebar.classList.add('-l-sbar')
-        }
-
-        if (!this.showLogin) {
-          const mainContainer = document.getElementById('main-container')
-          mainContainer.classList.remove('brightness-50')
+    toggleSidebar () {
+      if (this.smallScreen) {
+        if (this.uncollapsedSidebar) {
+          this.topbar.$el.removeEventListener('mousedown', this.toggleSidebar)
+          this.content.removeEventListener('mousedown', this.toggleSidebar)
+          this.collapsingSidebar = true
+          console.log(this.sidebar)
+          this.sidebar.$el.addEventListener('transitionend', () => {
+            this.uncollapsedSidebar = false
+            this.collapsingSidebar = false
+          }, { once: true })
+        } else {
+          this.uncollapsedSidebar = true
+          this.topbar.$el.addEventListener('mousedown', this.toggleSidebar)
+          this.content.addEventListener('mousedown', this.toggleSidebar)
         }
-
-        this.$data.reachedBreak = true
-      } else if (vw <= this.$data.breakWidth && this.$data.reachedBreak) {
-        this.$data.reachedBreak = false
-      }
-    },
-    sidebarHandler () {
-      const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-      const slideSidebar = document.getElementById('slide-sidebar')
-      const mainContainer = document.getElementById('main-container')
-      if (vw > this.$data.breakWidth && !this.$refs.searchQuery.$data.searchVisible) {
-      //   this.$data.showSidebar = false
-      } else if (!this.$data.showSidebar) {
-        slideSidebar.classList.remove('-l-sbar')
-        mainContainer.classList.add('brightness-50')
-        this.$data.showSidebar = true
-        mainContainer.addEventListener('mousedown', this.sidebarHandler, { once: true })
-      } else if (this.$data.showSidebar) {
-        slideSidebar.classList.add('-l-sbar')
-        mainContainer.classList.remove('brightness-50')
-        this.$data.showSidebar = false
-        mainContainer.removeEventListener('mousedown', this.sidebarHandler, { once: true })
+      } else {
+        this.closedSidebar = !this.closedSidebar
       }
     },
     toggleLogin () {
-      const mainContainer = document.getElementById('main-container')
       this.showLogin = !this.showLogin
       if (this.showLogin) {
-        if (this.$data.showSidebar) {
-          this.sidebarHandler()
+        if (this.uncollapsedSidebar) {
+          this.toggleSidebar()
         }
-        mainContainer.classList.add('brightness-50')
-      } else {
-        mainContainer.classList.remove('brightness-50')
       }
-    },
-    updateSearch (e) {
-      this.$refs.searchQuery.updateQuery(e)
-    },
-    launchSearch (e) {
-      const input = document.getElementById('search-input')
-      this.$refs.searchQuery.launchSearch(input.value)
     }
   }
 })
 </script>
 
 <style lang="scss">
+
 @import "~@/assets/scss/themes.scss";
 @import "~@/assets/css/utils/spacing.css";
 
-.icon {
-  @apply h-6 float-right pl-6;
-}
-
-#content-wrapper::after {
+.deep-inner-shadow::after {
   content: '';
-  @apply shadow-inner-deep dark:shadow-dark-inner-deep h-full w-full absolute top-0 left-0 pointer-events-none
+  @apply shadow-inner-deep dark:shadow-dark-inner-deep h-full w-full absolute top-0 left-0 pointer-events-none;
 }
 
 * {
-  transition: color 300ms, box-shadow 300ms, background-color 300ms linear, border 300ms, outline 300ms, fill 300ms, stroke 300ms, filter 500ms;
-}
-
-html {
-  font-size: 13px;
+  font-size: 14px;
+  transition: color 300ms, box-shadow 300ms, background-color 300ms linear, border 300ms, outline 300ms, fill 300ms, stroke 300ms, filter 200ms;
 }
 
 @media (min-width: 720px) {
   html {
-    font-size: 15px;
+    font-size: 16px;
   }
 }
 </style>
diff --git a/site/src/assets/css/utils/spacing.css b/site/src/assets/css/utils/spacing.css
index 8dc97da7..26d79a8e 100644
--- a/site/src/assets/css/utils/spacing.css
+++ b/site/src/assets/css/utils/spacing.css
@@ -1,6 +1,6 @@
 :root {
     --topbar-height: 4.5rem;
-    --sidebar-width: 14rem;
+    --sidebar-width: 8rem;
     --collapse-width: 900px;
     --expander-transition-time: 3s;
 }
diff --git a/site/src/components/Sidebar.vue b/site/src/components/Sidebar.vue
new file mode 100644
index 00000000..6eff7b25
--- /dev/null
+++ b/site/src/components/Sidebar.vue
@@ -0,0 +1,150 @@
+<template>
+  <aside
+    id="sidebar"
+    :class="{'-l-sbar': closed || collapsing, 'fixed': uncollapsed, 'h-screen': uncollapsed,
+             'sticky': !uncollapsed, 'top-tbar': !uncollapsed, 'h-content': !uncollapsed}"
+    class="overflow-hidden flex flex-col
+    flex-shrink-0 w-sbar bg-1
+    border-r border-bar whitespace-nowrap tr-spacing z-50"
+  >
+    <div
+      v-if="uncollapsed"
+      id="slide-sidebar-top"
+      class="bg-2 h-tbar flex flex-shrink-0 items-center justify-center"
+    >
+      <button
+        aria-label="Open Menu"
+        @click="$emit('closeSidebar')"
+      >
+        <i class="ri-close-line text-4xl text-1" />
+      </button>
+      <!-- <div class="brand w-32 h-6 flex-shrink-0" /> -->
+    </div>
+
+    <div class="text-1 overflow-y-auto overflow-x-hidden app-scrollbar">
+      <div class="divide-y divide-color-1">
+        <ul
+          v-for="linkSection of links"
+          :key="linkSection"
+          class="py-2"
+        >
+          <template
+            v-for="link of linkSection"
+            :key="link"
+          >
+            <li>
+              <router-link
+                v-if="link.condition == undefined || condition(link.condition)"
+                :to="link.to"
+                class="py-1 flex w-full items-center transition-colors bg-mouse-brand duration-300 cursor-pointer"
+                :class="{ active: link.to === $route.path }"
+              >
+                <div class="flex flex-col items-center w-full mt-1 mb-2">
+                  <i
+                    :class="link.icon"
+                    class="flex-shrink-0 text-2xl"
+                  />
+                  <span class="text-sm">{{ link.text }}</span>
+                </div>
+              </router-link>
+            </li>
+          </template>
+        </ul>
+
+        <div class="flex flex-col py-4 items-center">
+          <label
+            class="switch orange"
+            @click="$store.dispatch('userConfig/switchTheme')"
+          >
+            <input
+              v-model="theme"
+              type="checkbox"
+            >
+            <span class="slider round" />
+          </label>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script lang="js">
+import { defineComponent, watch } from 'vue'
+
+export default defineComponent({
+  name: 'SidebarBase',
+  props: {
+    closed: {
+      type: Boolean,
+      default: true
+    },
+    uncollapsed: {
+      type: Boolean,
+      default: true
+    },
+    collapsing: {
+      type: Boolean,
+      default: true
+    },
+    links: {
+      type: Array,
+      default: () => [
+        [
+          { to: '/', text: 'Accueil', icon: 'ri-home-3-line' },
+          { to: '/todo-announce', text: 'Annonces', icon: 'ri-alarm-warning-line' },
+          { to: '/dashboard', text: 'Admin', icon: 'ri-pie-chart-box-line' }
+        ],
+        [
+          { to: '/file-upload', text: 'Docs Sharing', icon: 'ri-folder-upload-line' }
+        ],
+        [
+          { to: '/new-post', text: 'Créer un Post', icon: 'ri-chat-new-line' },
+          { to: '/posts', text: 'Tous les Posts', icon: 'ri-chat-check-line' }
+        ],
+        [
+          { to: '/my-account', text: 'Mon compte', icon: 'ri-account-box-line', condition: 'loggedIn' },
+          { to: '/todo-rgpd', text: 'RGPD', icon: 'ri-database-2-line' },
+          { to: '/todo-horizon', text: 'Horizon', icon: 'ri-information-line' }
+        ]
+      ]
+    }
+  },
+  emits: [
+    'closeSidebar'
+  ],
+  data () {
+    return {
+      theme: this.$store.state.userConfig.theme === 'dark'
+    }
+  },
+  computed: {
+    loggedIn () {
+      return this.$store.state.auth.status.loggedIn
+    }
+  },
+  mounted () {
+    watch(() => this.$store.getters['userConfig/getTheme'], (newTheme) => {
+      if ((newTheme === 'dark') !== this.theme) {
+        this.theme = newTheme === 'dark'
+      }
+    })
+  },
+  methods: {
+    condition (type) {
+      if (type === 'loggedIn') {
+        return this.loggedIn
+      } else {
+        return false
+      }
+    }
+  }
+})
+</script>
+
+<style>
+@import "~@/assets/css/utils/button.css";
+
+.tr-spacing {
+  transition: color 300ms, background-color 300ms linear, border-color 300ms, fill 300ms, stroke 300ms, margin-left 500ms, width 500ms;
+}
+</style>
diff --git a/site/src/components/Sidebar/Sidebar.vue b/site/src/components/Sidebar/Sidebar.vue
deleted file mode 100644
index b5836c9c..00000000
--- a/site/src/components/Sidebar/Sidebar.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <aside
-    id="sidebar"
-    class="sticky overflow-hidden lg-max:w-0 flex flex-col
-    flex-shrink-0 h-content w-sbar top-tbar bg-1
-    border-r border-bar whitespace-nowrap tr-width duration-300"
-  >
-    <SidebarBase />
-  </aside>
-</template>
-
-<script lang="js">
-import { defineComponent } from 'vue'
-import SidebarBase from '@/components/Sidebar/SidebarBase.vue'
-
-export default defineComponent({
-  name: 'Sidebar',
-  components: {
-    SidebarBase
-  }
-})
-</script>
-
-<style scoped>
-#sidebar[opened] {
-  @apply lg-max:absolute lg-max:h-screen lg-max:top-0
-}
-
-#sidebar-top:not([opened]) {
-  @apply hidden
-}
-
-#sidebar-top[opened] {
-  @apply lg:hidden
-}
-
-.tr-width {
-  transition: color 300ms, background-color 300ms linear, border-color 300ms, fill 300ms, stroke 300ms, width 500ms;
-}
-</style>
diff --git a/site/src/components/Sidebar/SidebarBase.vue b/site/src/components/Sidebar/SidebarBase.vue
deleted file mode 100644
index b9bea87a..00000000
--- a/site/src/components/Sidebar/SidebarBase.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="text-1 overflow-y-auto overflow-x-hidden app-scrollbar">
-    <div class="divide-y divide-color-1">
-      <ul
-        v-for="linkSection of links"
-        :key="linkSection"
-        class="py-2"
-      >
-        <template
-          v-for="link of linkSection"
-          :key="link"
-        >
-          <li>
-            <router-link
-              v-if="link.condition == undefined || condition(link.condition)"
-              :to="link.to"
-              class="h-12 py-2 px-4 flex w-full items-center transition-colors bg-mouse-brand duration-300 cursor-pointer"
-              :class="{ active: link.to === $route.path }"
-            >
-              <i
-                :class="link.icon"
-                class="w-6 h-6 mr-4 flex-shrink-0"
-              />
-              <span>{{ link.text }}</span>
-            </router-link>
-          </li>
-        </template>
-      </ul>
-
-      <div class="flex py-4 items-center justify-center">
-        <div class="topbar-icon">
-          <i class="ri-notification-2-line" />
-        </div>
-        <div class="topbar-icon">
-          <i class="ri-folder-line" />
-        </div>
-        <div class="topbar-icon">
-          <i class="ri-mail-unread-line" />
-        </div>
-
-        <label
-          class="switch mr-3 orange"
-          @click="$store.dispatch('userConfig/switchTheme')"
-        >
-          <input
-            v-model="theme"
-            type="checkbox"
-          >
-          <span class="slider round" />
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="js">
-import { defineComponent, watch } from 'vue'
-
-export default defineComponent({
-  name: 'SidebarBase',
-  props: {
-    links: {
-      type: Array,
-      default: () => [
-        [
-          { to: '/', text: 'Accueil', icon: 'ri-home-3-line' },
-          { to: '/todo-announce', text: 'Annonces', icon: 'ri-alarm-warning-line' },
-          { to: '/dashboard', text: 'Dashboard admin', icon: 'ri-pie-chart-box-line' }
-        ],
-        [
-          { to: '/file-upload', text: 'Ajouter un doc', icon: 'ri-folder-upload-line' }
-        ],
-        [
-          { to: '/new-post', text: 'Créer un post', icon: 'ri-chat-new-line' },
-          { to: '/posts', text: 'Tous les posts', icon: 'ri-chat-check-line' }
-        ],
-        [
-          { to: '/my-account', text: 'Mon compte', icon: 'ri-account-box-line', condition: 'loggedIn' },
-          { to: '/todo-rgpd', text: 'RGPD', icon: 'ri-database-2-line' },
-          { to: '/todo-horizon', text: 'Horizon', icon: 'ri-information-line' }
-        ]
-      ]
-    }
-  },
-  data () {
-    return {
-      theme: this.$store.state.userConfig.theme === 'dark'
-    }
-  },
-  computed: {
-    loggedIn () {
-      return this.$store.state.auth.status.loggedIn
-    }
-  },
-  mounted () {
-    watch(() => this.$store.getters['userConfig/getTheme'], (newTheme) => {
-      if ((newTheme === 'dark') !== this.theme) {
-        this.theme = newTheme === 'dark'
-      }
-    })
-  },
-  methods: {
-    condition (type) {
-      if (type === 'loggedIn') {
-        return this.loggedIn
-      } else {
-        return false
-      }
-    }
-  }
-})
-</script>
-
-<style>
-@import "~@/assets/css/utils/button.css";
-
-#sidebar[opened] {
-  @apply lg-max:absolute lg-max:h-screen lg-max:top-0;
-}
-
-#sidebar-top:not([opened]) {
-  @apply hidden;
-}
-
-#sidebar-top[opened] {
-  @apply lg:hidden;
-}
-</style>
diff --git a/site/src/components/Sidebar/SlidingSidebar.vue b/site/src/components/Sidebar/SlidingSidebar.vue
deleted file mode 100644
index 505c653e..00000000
--- a/site/src/components/Sidebar/SlidingSidebar.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <aside
-    id="slide-sidebar"
-    class="-l-sbar fixed overflow-hidden z-50 flex flex-col h-full w-sbar bg-1 text-2 whitespace-nowrap tr-spacing"
-  >
-    <div
-      id="slide-sidebar-top"
-      class="bg-2 h-tbar flex flex-shrink-0 items-center pl-3"
-    >
-      <button
-        class="mr-4"
-        aria-label="Open Menu"
-        @click="$emit('closeSidebar')"
-      >
-        <i class="ri-close-line" />
-      </button>
-      <div class="brand w-32 h-6 flex-shrink-0" />
-    </div>
-    <SidebarBase />
-    <img>
-  </aside>
-</template>
-
-<script lang="js">
-import { defineComponent } from 'vue'
-import SidebarBase from '@/components/Sidebar/SidebarBase.vue'
-
-export default defineComponent({
-  name: 'Sidebar',
-  components: {
-    SidebarBase
-  },
-  emits: [
-    'closeSidebar'
-  ]
-})
-</script>
-
-<style>
-.tr-spacing {
-  transition: color 300ms, background-color 300ms linear, border-color 300ms, fill 300ms, stroke 300ms, margin-left 500ms;
-}
-
-/* #sidebar[opened] {
-  @apply lg-max:absolute lg-max:h-screen lg-max:top-0;
-}
-
-#sidebar-top:not([opened]) {
-  @apply hidden;
-}
-
-#sidebar-top[opened] {
-  @apply lg:hidden;
-} */
-</style>