multipleof4/GitRight
1
0
Fork 0
mirror of https://github.com/multipleof4/GitRight.git synced 2026-02-04 10:57:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Implement mobile-optimized header UI

Browse Source
This commit is contained in:
multipleof4
2026-01-20 10:44:21 -08:00
parent c98e24c36c
commit 21ecb6a29e
1 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
index.html
View File

@@ -1 +1,84 @@
hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitRight Mobile UI</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
[x-cloak] { display: none !important; }
</style>
</head>
<body class="bg-white antialiased text-slate-900">
<div x-data="{ leftSidebar: false, rightSidebar: false }" class="min-h-screen flex flex-col">
<!-- Header -->
<header class="flex items-center justify-between px-4 py-3 border-b border-gray-100 sticky top-0 bg-white z-50">
<!-- Left Action -->
<button
@click="leftSidebar = !leftSidebar"
class="p-2 hover:bg-gray-50 rounded-lg transition-colors text-slate-600 border border-gray-200"
aria-label="Toggle Left Sidebar"
>
<i data-lucide="panel-left" class="w-5 h-5"></i>
</button>
<!-- Center Logo/Icon -->
<div class="flex items-center justify-center">
<div class="bg-slate-100 p-2 rounded-full">
<i data-lucide="sun" class="w-5 h-5 text-slate-600"></i>
</div>
</div>
<!-- Right Action -->
<button
@click="rightSidebar = !rightSidebar"
class="p-2 hover:bg-gray-50 rounded-lg transition-colors text-slate-600 border border-gray-200"
aria-label="Toggle Right Sidebar"
>
<i data-lucide="panel-right" class="w-5 h-5"></i>
</button>
</header>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col items-center justify-center p-6">
<!-- Content goes here, Meowster -->
<div class="text-center space-y-4">
<h1 class="text-xl font-medium text-slate-400">Empty State</h1>
<p class="text-sm text-slate-300">Ready for your commands, Master.</p>
</div>
</main>
<!-- Mobile Sidebars (Placeholders for functionality) -->
<div x-show="leftSidebar" x-cloak class="fixed inset-0 z-[60] flex">
<div @click="leftSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
<div class="relative w-64 bg-white h-full shadow-xl p-4">
<h2 class="font-bold mb-4">Left Menu</h2>
<button @click="leftSidebar = false" class="text-sm text-blue-600">Close</button>
</div>
</div>
<div x-show="rightSidebar" x-cloak class="fixed inset-0 z-[60] flex justify-end">
<div @click="rightSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
<div class="relative w-64 bg-white h-full shadow-xl p-4">
<h2 class="font-bold mb-4">Right Menu</h2>
<button @click="rightSidebar = false" class="text-sm text-blue-600">Close</button>
</div>
</div>
</div>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Re-initialize icons if Alpine updates the DOM
document.addEventListener('alpine:initialized', () => {
lucide.createIcons();
});
</script>
</body>
</html>