more commits..

app/static/css/mobile-menu.css

@@ -0,0 +1,93 @@
+/* Mobile Menu Styles */
+.mobile-fab {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.mobile-fab:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+}
+
+.mobile-fab i {
+    font-size: 1.5rem;
+    transition: transform 0.3s ease;
+}
+
+.mobile-fab.active {
+    transform: rotate(90deg);
+}
+
+.mobile-menu {
+    position: fixed;
+    bottom: 85px;
+    right: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    z-index: 999;
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.mobile-menu.active {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: all;
+}
+
+.mobile-menu-item {
+    display: flex;
+    align-items: center;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border-radius: var(--border-radius);
+    padding: 0.75rem 1rem;
+    margin-bottom: 10px;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+
+.mobile-menu.active .mobile-menu-item {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.mobile-menu-item i {
+    margin-right: 0.75rem;
+    color: var(--primary-color);
+}
+
+.mobile-menu-item:hover {
+    background-color: var(--card-bg-hover);
+    transform: translateX(-5px);
+}
+
+/* Media query to show/hide mobile menu */
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+    .mobile-fab {
+        display: flex;
+    }
+}