reorganize all frontend items

frontend/layouts/default.vue

@@ -1,117 +1,71 @@
 <template>
   <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-app-bar
-      :clipped-left="clipped"
-      fixed
-      app
-    >
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn
-        icon
-        @click.stop="miniVariant = !miniVariant"
-      >
-        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
+    <!-- <TheSnackbar /> -->
+
+    <AppSidebar v-model="sidebar" absolute :top-link="topLinks" @input="sidebar = !sidebar" />
+
+    <AppHeader>
+      <v-btn icon @click.stop="sidebar = !sidebar">
+        <v-icon> {{ $globals.icons.menu }}</v-icon>
       </v-btn>
-      <v-btn
-        icon
-        @click.stop="clipped = !clipped"
-      >
-        <v-icon>mdi-application</v-icon>
-      </v-btn>
-      <v-btn
-        icon
-        @click.stop="fixed = !fixed"
-      >
-        <v-icon>mdi-minus</v-icon>
-      </v-btn>
-      <v-toolbar-title v-text="title" />
-      <v-spacer />
-      <v-btn
-        icon
-        @click.stop="rightDrawer = !rightDrawer"
-      >
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-    </v-app-bar>
+    </AppHeader>
     <v-main>
-      <v-container>
+      <v-scroll-x-transition>
         <Nuxt />
-      </v-container>
+      </v-scroll-x-transition>
     </v-main>
-    <v-navigation-drawer
-      v-model="rightDrawer"
-      :right="right"
-      temporary
-      fixed
-    >
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-footer
-      :absolute="!fixed"
-      app
-    >
-      <span>&copy; {{ new Date().getFullYear() }}</span>
-    </v-footer>
+    <AppFloatingButton absolute />
   </v-app>
 </template>
+  
 
-<script>
-export default {
-  data () {
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import AppHeader from "@/components/Layout/AppHeader.vue";
+import AppSidebar from "@/components/Layout/AppSidebar.vue";
+import AppFloatingButton from "@/components/Layout/AppFloatingButton.vue";
+
+export default defineComponent({
+  components: { AppHeader, AppSidebar, AppFloatingButton },
+  // @ts-ignore
+  middleware: process.env.PUBLIC_SITE ? null : "auth",
+  setup() {
+    return {};
+  },
+  data() {
     return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
-      items: [
+      sidebar: null,
+      topLinks: [
         {
-          icon: 'mdi-apps',
-          title: 'Welcome',
-          to: '/'
+          icon: this.$globals.icons.home,
+          to: "/",
+          title: this.$t("sidebar.home-page"),
         },
         {
-          icon: 'mdi-chart-bubble',
-          title: 'Inspire',
-          to: '/inspire'
-        }
+          icon: this.$globals.icons.search,
+          to: "/search",
+          title: this.$t("sidebar.search"),
+        },
+        {
+          icon: this.$globals.icons.viewModule,
+          to: "/recipes/all",
+          title: this.$t("sidebar.all-recipes"),
+        },
+        {
+          icon: this.$globals.icons.tags,
+          to: "/recipes/category",
+          title: this.$t("sidebar.categories"),
+        },
+        {
+          icon: this.$globals.icons.tags,
+          to: "/recipes/tag",
+          title: this.$t("sidebar.tags"),
+        },
       ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: 'Vuetify.js'
-    }
-  }
-}
+    };
+  },
+});
 </script>
+      
+      <style scoped>
+</style>+