-
+
+
+
+
+
+
Main Content Area
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
+
+
+
@RenderBody()
-
-
diff --git a/administration.csproj b/administration.csproj
index a6d897c..a0243c9 100644
--- a/administration.csproj
+++ b/administration.csproj
@@ -14,7 +14,12 @@
+
+ all
+ runtime; build; native; contentfiles; analyzers; buildtransitive
+
+
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
index f8d98fc..9da48f9 100644
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -1,22 +1,112 @@
html {
- font-size: 14px;
+ font-size: 14px;
}
@media (min-width: 768px) {
- html {
- font-size: 16px;
- }
+ html {
+ font-size: 16px;
+ }
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
- box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+ box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
- position: relative;
- min-height: 100%;
+ position: relative;
+ min-height: 100%;
}
body {
- margin-bottom: 60px;
-}
\ No newline at end of file
+ margin-bottom: 60px;
+}
+
+/*#region Sidebar*/
+.wrapper {
+ display: flex;
+ min-height: 100vh;
+}
+
+.main-content {
+ flex: 1;
+ padding: 20px;
+ transition: margin-right 0.3s;
+}
+
+.sidebar {
+ width: 300px;
+ background: #ffffff;
+ border-left: 1px solid #e5e7eb;
+ height: 100vh;
+ position: fixed;
+ right: 0;
+ top: 0;
+ transition: transform 0.3s;
+ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
+ overflow-y: auto;
+}
+
+ .sidebar.collapsed {
+ transform: translateX(100%);
+ }
+
+.toggle-btn {
+ position: fixed;
+ right: 310px;
+ top: 20px;
+ z-index: 1000;
+ transition: right 0.3s;
+}
+
+ .toggle-btn.collapsed {
+ right: 20px;
+ }
+
+.nav-link {
+ color: #4b5563;
+ padding: 0.75rem 1.25rem;
+ transition: all 0.2s;
+}
+
+ .nav-link:hover {
+ background: #f3f4f6;
+ color: #1f2937;
+ }
+
+ .nav-link.active {
+ background: #e5e7eb;
+ color: #1f2937;
+ font-weight: 500;
+ }
+
+.sidebar-header {
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.notification-badge {
+ background: #ef4444;
+ color: white;
+ padding: 0.25rem 0.5rem;
+ border-radius: 9999px;
+ font-size: 0.75rem;
+}
+
+.user-status {
+ width: 10px;
+ height: 10px;
+ background: #10b981;
+ border-radius: 50%;
+ display: inline-block;
+ margin-right: 5px;
+}
+
+@media (max-width: 768px) {
+ .sidebar {
+ width: 100%;
+ }
+
+ .toggle-btn {
+ right: 20px;
+ }
+}
+/*#endregion */
diff --git a/wwwroot/js/site.js b/wwwroot/js/site.js
index 0937657..0929e30 100644
--- a/wwwroot/js/site.js
+++ b/wwwroot/js/site.js
@@ -2,3 +2,9 @@
// for details on configuring this project to bundle and minify static web assets.
// Write your JavaScript code.
+function toggleSidebar() {
+ const sidebar = document.getElementById('sidebar');
+ const toggleBtn = document.querySelector('.toggle-btn');
+ sidebar.classList.toggle('collapsed');
+ toggleBtn.classList.toggle('collapsed');
+}
\ No newline at end of file