remove sub-foders

Author: daros10

time-tracker/src/app/app.module.ts

@@ -4,23 +4,17 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
-import { TimeclockComponent } from './components/shared/clock/timeclock/timeclock.component';
-import { UserOptionsComponent } from './components/shared/user/user-options/user-options.component';
-import { SidebarOptionsComponent } from './components/shared/sidebar/sidebar-options/sidebar-options.component';
-import { ClockComponent } from './components/shared/clock/clock.component';
-import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
 import { UserComponent } from './components/shared/user/user.component';
+import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
+import { ClockComponent } from './components/shared/clock/clock.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
-    TimeclockComponent,
-    UserOptionsComponent,
-    SidebarOptionsComponent,
-    ClockComponent,
-    SidebarComponent,
     UserComponent,
+    SidebarComponent,
+    ClockComponent,
   ],
   imports: [
     BrowserModule,

time-tracker/src/app/components/shared/sidebar/sidebar.component.css

@@ -0,0 +1,42 @@
+body {
+    overflow-x: hidden;
+}
+
+#sidebar-wrapper {
+    min-height: 100vh;
+    margin-left: -15rem;
+    -webkit-transition: margin .25s ease-out;
+    -moz-transition: margin .25s ease-out;
+    -o-transition: margin .25s ease-out;
+    transition: margin .25s ease-out;
+}
+
+#sidebar-wrapper .sidebar-heading {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.2rem;
+}
+
+#sidebar-wrapper .list-group {
+    width: 15rem;
+}
+
+#page-content-wrapper {
+    min-width: 100vw;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    margin-left: 0;
+}
+
+@media (min-width: 768px) {
+    #sidebar-wrapper {
+        margin-left: 0;
+    }
+    #page-content-wrapper {
+        min-width: 0;
+        width: 100%;
+    }
+    #wrapper.toggled #sidebar-wrapper {
+        margin-left: -15rem;
+    }
+}

time-tracker/src/app/components/shared/sidebar/sidebar.component.html

@@ -1,20 +1,27 @@
 <div class="d-flex" id="wrapper">
 
+    <!-- Sidebar -->
     <div class="bg-light border-right" id="sidebar-wrapper">
         <div class="list-group list-group-flush">
             <a href="#" class="list-group-item list-group-item-action bg-light"><i class="fas fa-flag"></i>   Getting Started</a>
             <a href="#" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
             <a href="#" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
             <a href="#" class="list-group-item list-group-item-action bg-light"><i class="far fa-paper-plane"></i>  Time Off</a>
             <a href="#" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
+
         </div>
     </div>
+    <!-- /#sidebar-wrapper -->
 
+    <!-- Page Content -->
     <div id="page-content-wrapper">
-
         <div class="container-fluid">
-            <h1 class="mt-4">Content</h1>
-            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus sequi voluptates quasi laudantium vel hic quam rem consectetur cupiditate officia delectus totam sapiente, excepturi error? Eos, laudantium voluptatem. Amet, eum?.</p>
+            <h1 class="mt-4">Simple Sidebar</h1>
+            <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
+            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
         </div>
+    </div>
+    <!-- /#page-content-wrapper -->
 
-    </div>
+</div>
+<!-- /#wrapper -->