Spaces:

mertmehmet
/

saas-admin

Running

App Files Files Community

Ctrl+K

Ctrl+K

1 contributor

History: 3 commits

mertmehmet's picture

menüye mega menü ekle - Follow Up Deployment

de00577 verified 2 months ago

.gitattributes

1.52 kB

initial commit 2 months ago
README.md

211 Bytes

Create a **modern, highly responsive, and fully functional admin dashboard template** for my project "**Deepsite v2**" using only **Tailwind CSS** for styling. --- ### ✅ 1. Header (Top Horizontal Menu): - Logo on the left (Placeholder: "Deepsite v2 Logo") - Center: Search bar (with search icon and clear button) - Right side: - Login button - Register button - User account dropdown (avatar, profile, settings, logout) - **Dark mode toggle button** (always visible at the top-right corner) - **Settings panel toggle button** (opens settings off-canvas sidebar from the right) --- ### ✅ 2. Dual Menu Layout Feature (Switchable Horizontal / Vertical Menus): - Include a **menu layout toggle switch** inside the settings panel. - This toggle lets the user dynamically switch between: - **Horizontal Menu Mode**: - Horizontal main menu inside a centered `.container` div (not fully stretched to edges, aligned in the page content area). - **Vertical Menu Mode**: - Vertical sidebar menu aligned on the left, with all same menu items from the horizontal menu. - Switching between these two menu modes must: - Work instantly on the same page without page reload. - Keep all menu items functional and fully visible in both modes (no missing items). - Be responsive and styled with Tailwind CSS only. --- ### ✅ 3. Secondary Horizontal Menu (Under Main Header, if in Horizontal Mode): Menu contains: - Mega menu - Mega sub menu - Mega tab menu - Multi-step menu - Standard dropdowns (All menus must be fully responsive and built using Tailwind CSS.) --- ### ✅ 4. Mobile Responsiveness: - Mobile menu must include all sidebar menu items. - Mobile menu functions as an **off-canvas sidebar** sliding from the **left**. - It should be collapsible, fully responsive, and touch-friendly. --- ### ✅ 5. Settings Panel (Right Side Off-Canvas): A full-featured **off-canvas settings panel** accessible via a button in the header, sliding in from the right. Inside the settings panel, include controls for: - **Menu Layout Switcher:** Toggle between horizontal and vertical menu layouts. - **Sidebar Width Adjuster:** Options for small, medium, and large sidebar widths (for vertical mode). - **Site Color Theme Selector:** Choices like light, blue, green, red, etc. - **Search Bar Visibility Toggle** (show/hide search bar in header). - **Dark Mode Toggle Switch** (alternative dark mode control here too). - Other useful site settings (optional but recommended): - Font size adjustment (small/medium/large) - Page layout option (boxed / full width) - Notification sound toggle - Language selector (basic dropdown) Settings panel must: - Be responsive - Use only Tailwind CSS classes - Control all settings dynamically within the same page without reloads. --- ### ✅ 6. Admin Panel Components (Below Menus): Include a full set of admin UI components and widgets with Tailwind CSS styling: **Tables:** - Sortable tables - Paginated tables - Fully responsive tables **Forms & Inputs:** - Text fields, textareas, selects, switches, checkboxes, radio buttons, sliders (horizontal/vertical), dual-range sliders, date pickers, file uploads, tags/multi-select inputs, simple rich text editor area (with toolbar). **Buttons:** - Primary, secondary, success, danger, warning buttons - Icon buttons **Notifications & Feedback:** - Toast alerts, modals, tooltips, popovers **Widgets:** - Cards with headers & content - Statistic widgets (KPIs / metrics) - Timelines - Accordions / collapsible sections - Tabs - Progress bars - Stepper components - Pricing tables - Badges and labels - Breadcrumbs - Pagination controls - Countdown timers - Dark/light theme switcher **Other Components:** - Calendar view (month grid) - FAQ/help section - Chat/message previews - Avatar groups --- ### ✅ 7. Additional Notes: - Use **Tailwind CSS classes only**, no external CSS/JS libraries. - Design must be clean, modern, minimal, functional, and scalable. - Focus on accessibility and mobile-first responsive design. - Provide clean and scalable HTML, ready for integration into React or Next.js projects. - All features and toggles must function dynamically without page reloads. --- ### 🎯 GOAL: Generate the **full production-ready HTML structure using Tailwind CSS** for this admin theme, including: - Header with dark mode & settings panel toggles - Dynamic menu system (horizontal/vertical switchable) with full menus - Right-side off-canvas settings panel with all customization options - Complete admin UI components and widgets - Mobile off-canvas menu - Fully functional dark mode → Ensure all components are responsive, accessible, and visually clear. → Use placeholder content where needed. → The final output must be fully working, clean, scalable, and ready to integrate. - Initial Deployment 2 months ago
index.html

75.3 kB

menüye mega menü ekle - Follow Up Deployment 2 months ago
style.css

388 Bytes

initial commit 2 months ago