Add images and wow styles

src/components/panel-component/panel-component.scss

@@ -1,10 +1,20 @@
+@import "../../app/style";
+
 .panel {
+  z-index: 2;
   display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
   position: absolute;
-  height: 0;
-  width: 0;
+  height: 220px;
+  width: 360px;
+  background-image: $panelBackground;
+  background-repeat: repeat;
 
   button {
+    z-index: 3;
+    cursor: pointer;
     position: absolute;
     width: 10px;
     height: 10px;
@@ -22,10 +32,19 @@
   }
 
   &--bottom {
-    bottom: 0;
-    border: none;
+    bottom: -220px;
     width: 100%;
-    transition: height 0.5s;
+    transition: bottom 0.5s;
+
+    .panel-border {
+      position: absolute;
+      z-index: 3;
+      top: -10px;
+      min-width: 100%;
+      background-image: $borderRight;
+      background-repeat: repeat;
+      height: 16px;
+    }
 
     button {
       left: 50%;
@@ -35,8 +54,7 @@
     }
 
     &--shown {
-      border-top: 2px solid var(--foreground);
-      height: 360px;
+      bottom: 0;
 
       button {
         height: 25px;
@@ -46,10 +64,20 @@
   }
 
   &--left {
-    left: 0;
-    border: none;
+    left: -360px;
+    flex-direction: column;
     height: 100%;
-    transition: width 0.5s;
+    transition: left 0.5s;
+
+    .panel-border {
+      position: absolute;
+      z-index: 3;
+      right: -8px;
+      min-height: 100%;
+      background-image: $borderTop;
+      background-repeat: repeat;
+      width: 16px;
+    }
 
     button {
       top: 50%;
@@ -59,8 +87,7 @@
     }
 
     &--shown {
-      border-right: 2px solid var(--foreground);
-      width: 360px;
+      left: 0;
 
       button {
         width: 25px;

src/components/panel-component/panel-component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import './panel-component.scss'
 
@@ -7,9 +7,15 @@ interface Props {
     orientation: 'bottom' | 'left'
     isShown: boolean
     setShown: () => void
+    children: React.ReactNode
 }
 
-export const PanelComponent = ({orientation, isShown, setShown}: Props) => {
+export const PanelComponent = ({orientation, isShown, setShown, children}: Props) => {
+    const [isRendered, setRendered] = useState(false)
+
+    useEffect(() => {
+        setRendered(isShown)
+    }, [isShown])
 
     const handleClick = useCallback((event) => {
         event.preventDefault()
@@ -20,6 +26,8 @@ export const PanelComponent = ({orientation, isShown, setShown}: Props) => {
             <div
                     className={`panel panel--${orientation} ${isShown ? `panel--${orientation}--shown` : ''}`}
             >
+                <div className='panel-border'/>
+                {isRendered && children}
                 <button onClick={handleClick}/>
             </div>
     )