Hey everyone,
If you’re looking to give your projects a fresh, sleek, and ultra-modern look without spending days on custom frontend styling, you can easily build a top-tier UI using a clean AdminLTE-based layout structure.
Here is a quick setup featuring a responsive sidebar, a smooth dynamic content area, a built-in dark/light mode toggle, a live clock, and a clean top navbar with quick access icons and user profile support.
Feel free to adapt and use this skeleton for your own dashboards and web applications:
echo <<<HTML
Dashboard :root { --sidebar-bg: #1e1e2d; --sidebar-color: #a2a5b9; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-hover-color: #ffffff; --sidebar-active-bg: #3699ff; --sidebar-active-color: #ffffff; --content-bg: #f4f6f9; --navbar-bg: #ffffff; --navbar-border: #edf2f7; --text-main: #181c32; --clock-bg: #f8fafc; --clock-border: #e2e8f0; --clock-text: #475569; } body.dark-mode {
--sidebar-bg: #151521;
--sidebar-color: #9899ac;
--sidebar-hover-bg: rgba(255, 255, 255, 0.04);
--sidebar-hover-color: #ffffff;
--sidebar-active-bg: #3699ff;
--sidebar-active-color: #ffffff;
--content-bg: #0f1016;
--navbar-bg: #1b1b28;
--navbar-border: #2b2b40;
--text-main: #f3f6f9;
--clock-bg: #151521;
--clock-border: #2b2b40;
--clock-text: #a2a5b9;
}
body, html {
margin: 0; padding: 0; height: 100%; width: 100%;
font-family: 'Source Sans Pro', sans-serif;
background-color: var(--content-bg);
overflow: hidden;
transition: background-color 0.3s ease;
}
.wrapper { display: flex; height: 100vh; width: 100vw; position: relative; }
.main-sidebar {
width: 260px; background-color: var(--sidebar-bg); color: var(--sidebar-color);
display: flex; flex-direction: column; z-index: 1000; flex-shrink: 0;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06); height: 100vh;
}
.brand-link {
padding: 22px 20px; font-size: 1.25rem; font-weight: 600; color: #ffffff;
text-decoration: none; display: flex; align-items: center; gap: 12px;
background-color: rgba(0,0,0,0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.brand-link i { color: #3699ff; }
.sidebar-menu { list-style: none; padding: 14px 12px; margin: 0; overflow-y: auto; flex-grow: 1; }
.sidebar-item a {
display: flex; align-items: center; gap: 14px; padding: 10px 14px;
color: var(--sidebar-color); text-decoration: none; border-radius: 0.5rem;
font-size: 13.5px; font-weight: 500; transition: all 0.2s ease;
}
.sidebar-item a:hover { background-color: var(--sidebar-hover-bg); color: var(--sidebar-hover-color); }
.sidebar-item.active a {
background-color: var(--sidebar-active-bg); color: var(--sidebar-active-color); font-weight: 600;
}
.main-panel { flex-grow: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.main-header {
height: 70px; background-color: var(--navbar-bg); border-bottom: 1px solid var(--navbar-border);
display: flex; align-items: center; justify-content: space-between; padding: 0 30px; flex-shrink: 0;
z-index: 10; transition: background-color 0.3s ease, border-color 0.3s ease;
}
.navbar-left, .navbar-right { display: flex; align-items: center; gap: 12px; }
.navbar-center {
display: flex; align-items: center; gap: 9px; background: var(--clock-bg);
padding: 7px 16px; border-radius: 30px; font-size: 13px; font-weight: 600;
color: var(--clock-text); border: 1px solid var(--clock-border);
}
.navbar-center i { color: #3699ff; }
.nav-icon-btn, .nav-lang-btn {
background: transparent; border: none; color: var(--clock-text); cursor: pointer;
height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
transition: all 0.2s ease; text-decoration: none; position: relative;
}
.nav-icon-btn { width: 40px; font-size: 17px; }
.nav-lang-btn { padding: 0 10px; border-radius: 20px; font-size: 13.5px; font-weight: 600; gap: 6px; }
.nav-icon-btn:hover, .nav-lang-btn:hover { background-color: var(--sidebar-hover-bg); color: #3699ff; }
.notification-badge {
position: absolute; top: 4px; right: 4px; background-color: #f1416c; color: white;
font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 10px; border: 2px solid var(--navbar-bg);
}
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 30px; cursor: pointer; }
.user-chip:hover { background-color: var(--sidebar-hover-bg); }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 600; color: var(--text-main); }
.content-wrapper { flex-grow: 1; height: calc(100vh - 70px); background-color: var(--content-bg); }
.content-iframe { width: 100%; height: 100%; border: none; background-color: var(--content-bg); }
</style>
<div class="main-panel">
<header class="main-header">
<div class="navbar-left">
<button class="nav-icon-btn" onclick="toggleSidebar()"><i class="fa-solid fa-bars"></i></button>
<span style="font-weight: 600; color: var(--text-main); font-size: 15px;">Management Portal</span>
</div>
<div class="navbar-center">
<i class="fa-regular fa-clock"></i>
<span id="liveClock">--.--.----, --:--:--</span>
</div>
<div class="navbar-right">
<button class="nav-icon-btn" id="searchBtn"><i class="fa-solid fa-magnifying-glass"></i></button>
<button class="nav-icon-btn" id="docsBtn"><i class="fa-solid fa-book-open"></i></button>
<button class="nav-icon-btn" onclick="toggleDarkMode()"><i class="fa-solid fa-moon" id="themeIcon"></i></button>
<button class="nav-lang-btn"><span>DE</span></button>
<button class="nav-icon-btn"><i class="fa-regular fa-bell"></i><span class="notification-badge">4</span></button>
<div class="user-chip">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100" alt="Avatar" class="user-avatar">
<span class="user-name">Alex Johnson</span>
<i class="fa-solid fa-chevron-down" style="font-size: 11px; color: var(--clock-text);"></i>
</div>
</div>
</header>
<div class="content-wrapper">
<iframe id="appFrame" name="appFrame" class="content-iframe" src="dashboard.php"></iframe>
</div>
</div>