Todoist/HubSpot Clone

Well, not so much a clone as it is influenced.

Right now I have some cool features built that I will continue to share here, such as:

  1. Move record through a “pipeline”
  2. Fetch website description when a website is added to a client record
  3. When “Onboard Client” is clicked, a contact is created in PandaDoc and a client is created in Freshbooks.
  4. Static side-bar Details Component
  5. Dynamic menu badges that will only show when a notification count is greater than 0 (thank you @chem)

and a small video to share of the app so far…


Sidenav instructions here: Sidebar Navigation - FINAL INSTALLMENT

@tim.young Outstanding preview showing what’s possible. It doesn’t even look like it’s Tadabase, so you have me rather curious. Well done!!

Lots of custom CSS?

@tim.young - can you share how you went about the static detail sidebar?

Sure @mdykstra

Couple things to mention first…

  • This doesn’t work well on mobile, the CSS includes a media query for that.
  • This whole thing works best with rows set to FLUID for both layouts and pages.

Step 1) On your details page, add a new row at the very top of the page. Inside the row and column, add an HTML component with the following HTML

<div id="detailsSidebar" class="detailsContainer"></div>

Step 2) Place your details component in it’s own row and column below the row you just created.

Step 3) For best results, your details component should be a single column.

Step 4) Get the element ID of your details component by right clicking and inspecting the details component


Step 5) On the page JS tab, add this code and update it with the ID you just got from the details component.

//Appends the details component to the HTMl component container
$(function() {

Step 6) Add this CSS to your page CSS tab

@media only screen and (min-width: 992px) {
    .detailsContainer {
        background: #FAFAFA;
        height: 100vh;
        /*Sets the width of the side bar*/
        width: 425px;
        position: fixed;
        top: 0;
        /* Change 'left' to 'right' to move the sidebar to the right side of the screen. If moved to right side, change all instances below of 'margin-left' to 'margin-right' */
        left: 0;
        z-index: 5;
        overflow-y: hide;
        border-right: 2px solid #ccc;
        padding: 10px 20px;
    /* Shifts the whole app's page over the width of the sidebar */
    .t-pagecontainer {
        margin-left: 425px !important;
    /* Shifts the breadcrumbs over the width of the sidebar */
    .t-breadcrumb {
        margin-left: 425px !important;
    /* Shifts the menu over the width of the sidebar */
    .navbar-default {
        margin-left: 425px !important;

That should do it! You can see the end result here →!/sidebar-details/sample-data-table-details/5m9N0njzqk

Sweet. Thank you @tim.young

1 Like