From 1c8f9fe20210743bc548423ebd7d74fb60729847 Mon Sep 17 00:00:00 2001
From: Vyacheslav Nagel <v9gel@mail.ru>
Date: Sun, 2 Jul 2023 21:54:01 +0700
Subject: [PATCH] sidebar position

---
 src/App.vue                | 12 ++++++++----
 src/components/Sidebar.vue | 24 +++++++++++++++++++++---
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4e0650a..3242731 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -86,6 +86,14 @@ const rotatePage = () => {
         <Input v-model="hMargin">Отступ, мм</Input>
         <Input v-model="hMargin2">Дополнительный отступ, мм</Input>
       </SidebarBlock>
+    </Sidebar>
+    <Page>
+      <Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
+        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
+    </Page>
+    <Sidebar
+      horizontalPosition="right"
+    >
       <SidebarBlock title="Изображение">
         <Input v-model="imageHeight">Высота, мм</Input>
         <Input v-model="imageWidth">Ширина, мм</Input>
@@ -111,10 +119,6 @@ const rotatePage = () => {
         <Button :click="savePng">Сохранить как png</Button>
       </SidebarBlock>
     </Sidebar>
-    <Page>
-      <Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
-        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
-    </Page>
   </div>
 </template>
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index ba56bcf..b2c1ec3 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  horizontalPosition: 'left' | 'right';
+  verticalPosition: 'top' | 'bottom';
+}
+
+withDefaults(defineProps<Props>(), {
+    horizontalPosition: 'left',
+    verticalPosition: 'top'
+})
+</script>
+
 <template>
-<div class="sidebar">
+<div
+    class="sidebar"
+    :style="{
+        top: verticalPosition === 'top' ? 0 : undefined,
+        bottom: verticalPosition === 'bottom' ? 0 : undefined,
+        left: horizontalPosition === 'left' ? 0 : undefined,
+        right: horizontalPosition === 'right' ? 0 : undefined,
+    }"
+>
     <slot></slot>
 </div>
 </template>
@@ -7,8 +27,6 @@
 <style scoped>
 .sidebar {
     position: fixed;
-    top: 0;
-    left: 0;
 
     padding: 10px;