burger

public/js/burger.js

@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const header = document.querySelector('.main-header');
+
+    if (!header) return;
+
+    const burgerBtn = document.createElement('button');
+    burgerBtn.className = 'burger-btn';
+    burgerBtn.setAttribute('aria-label', 'Toggle menu');
+    burgerBtn.innerHTML = `
+        <span class="burger-line"></span>
+        <span class="burger-line"></span>
+        <span class="burger-line"></span>
+    `;
+    const spanBrand = document.createElement('span');
+    spanBrand.className = 'navbar-brand-burger';
+    spanBrand.innerHTML = `
+                   <span class="navbar-brand">Cloud Control Panel</span>
+
+    `;
+    const mobileMenu = document.createElement('div');
+    mobileMenu.className = 'mobile-menu';
+
+    const headerContent = header.innerHTML;
+    mobileMenu.innerHTML = `
+        <div class="mobile-menu-header">
+            <span class="navbar-brand">Cloud Control Panel</span>
+            <button class="close-btn" aria-label="Close menu">✕</button>
+        </div>
+        <div class="mobile-menu-body">
+            ${headerContent}
+        </div>
+    `;
+
+    header.appendChild(spanBrand);
+
+    header.appendChild(burgerBtn);
+    document.body.appendChild(mobileMenu);
+
+    function openMenu() {
+        mobileMenu.classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeMenu() {
+        mobileMenu.classList.remove('active');
+        document.body.style.overflow = '';
+    }
+
+    burgerBtn.addEventListener('click', openMenu);
+
+    const closeBtn = mobileMenu.querySelector('.close-btn');
+    closeBtn.addEventListener('click', closeMenu);
+
+    mobileMenu.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', closeMenu);
+    });
+
+    mobileMenu.addEventListener('click', function (e) {
+        if (e.target === mobileMenu) {
+            closeMenu();
+        }
+    });
+
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
+            closeMenu();
+        }
+    });
+});

public/js/folder.js

@@ -140,6 +140,16 @@
             this.fileInput.addEventListener('change', () => this.updatePreview());
         }
 
+        formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+
         updatePreview() {
             const file = this.fileInput.files[0];
 
@@ -151,7 +161,7 @@
             this.previewContainer.style.display = 'block';
             this.info.innerHTML = `
                 <div><strong>Name:</strong> ${file.name}</div>
-                <div><strong>Size:</strong> ${formatBytes(file.size)}</div>
+                <div><strong>Size:</strong> ${this.formatFileSize(file.size)}</div>
                 <div><strong>Type:</strong> ${file.type || 'Unknown'}</div>
             `;