feat: implement web GIS layout with sidebar, custom UI controls, and modular map feature integration

assets/css/style.css

@@ -84,10 +84,6 @@ body, html {
 
 /* Custom Layer Control Button */
 .custom-layer-btn {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    z-index: 1000;
     background-color: white;
     border-radius: 8px;
     width: 48px;
@@ -105,6 +101,18 @@ body, html {
     background-color: #f8f9fa;
 }
 
+#layerBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open #layerBtn {
+    right: 340px;
+}
+
 .custom-layer-panel {
     position: absolute;
     top: 80px;
@@ -116,6 +124,11 @@ body, html {
     padding: 15px;
     width: 250px;
     display: none;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .custom-layer-panel {
+    right: 340px;
 }
 
 
@@ -138,13 +151,13 @@ body, html {
 .sidebar-toggle-btn {
     position: absolute;
     left: 20px;
-    top: 90px;
+    top: 190px;
     z-index: 1001;
-    width: 36px;
-    height: 36px;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
     background: white;
     border: none;
-    border-radius: 10px;
     box-shadow: 0 3px 10px rgba(0,0,0,0.15);
     cursor: pointer;
     display: flex;
@@ -170,7 +183,7 @@ body, html {
 .left-sidebar {
     position: absolute;
     left: 20px;
-    top: 136px; /* di bawah toggle button */
+    top: 250px; /* di bawah toggle button */
     z-index: 1000;
     display: flex;
     flex-direction: column;
@@ -795,7 +808,7 @@ body, html {
     display: flex;
     flex-direction: column;
     align-items: center;
-    pointer-events: none;
+    pointer-events: auto; /* changed from none to allow click/drag */
 }
 
 .emoji-marker .bubble {