sidebar position

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>
 

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;