UI chnage mobile view and desktop view apllyign css

static/css/index.css

@@ -163,3 +163,107 @@ body {
 a {
     text-decoration: none;
 }
+
+
+/* ---------------- RESPONSIVE ---------------- */
+
+/* Tablets */
+@media (max-width: 992px) {
+    .nav-left h3 {
+        font-size: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 200px;
+    }
+
+    .nav-logo {
+        height: 45px;
+    }
+
+    .sidebar {
+        width: 220px;
+    }
+
+    .main {
+        margin-left: 0;
+        width: 100%;
+        padding: 20px;
+    }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+
+    body {
+        display: block;
+    }
+
+    /* Navbar */
+    .navbar {
+        height: 56px;
+        padding: 0 12px;
+    }
+
+    .nav-left h3 {
+        font-size: 14px;
+        max-width: 160px;
+    }
+
+    .nav-logo {
+        height: 38px;
+    }
+
+    .toggle-btn {
+        font-size: 24px;
+    }
+
+    /* Sidebar as drawer */
+    .sidebar {
+        position: fixed;
+        top: 56px;
+        left: -100%;
+        width: 85%;
+        max-width: 280px;
+        height: calc(100vh - 56px);
+        z-index: 2000;
+        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
+    }
+
+    .sidebar.show {
+        left: 0;
+    }
+
+    .sidebar.hide {
+        left: -100%;
+    }
+
+    /* Main content full width */
+    .main {
+        margin-left: 0;
+        width: 100%;
+        margin-top: 70px;
+        padding: 15px;
+    }
+
+    .container {
+        padding: 20px;
+        width: 100%;
+    }
+
+    .header {
+        font-size: 22px;
+    }
+}
+
+/* Very small phones */
+@media (max-width: 480px) {
+    .nav-left h3 {
+        display: none;
+        /* hide long company name */
+    }
+
+    .header {
+        font-size: 20px;
+    }
+}