Restructure docs

.github/config/en-custom.txt

@@ -86,8 +86,6 @@ PowerShell
 Pre
 PubSub
 ProjectRadius
-Quickstart
-Quickstarts
 RBAC
 RabbitMQ
 ResourceDeploymentClient
@@ -291,8 +289,6 @@ publickey
 publicEndpointOverride
 pubsub
 px
-quickstart
-quickstarts
 rabbitMQMessageQueues
 rabbitmq
 radapp
@@ -437,6 +433,8 @@ hl
 azureCache
 listKeys
 primaryKey
+quickstart
+quickstarts
 mygroup
 Kubeconfig
 unregister
@@ -451,4 +449,5 @@ mongodb
 MYCONNECTION
 VHOST
 Diátaxis
-yourworkspace
+yourworkspace
+howto

docs/assets/scss/_nav.scss

@@ -0,0 +1,218 @@
+//
+// Main navbar
+//
+
+.td-navbar-cover {
+    background: $primary;
+
+    @include media-breakpoint-up(md) {
+        background: transparent !important;
+
+        .nav-link {
+            text-shadow: 1px 1px 2px $dark;
+        }
+
+    }
+
+    &.navbar-bg-onscroll .nav-link {
+        text-shadow: none;
+    }
+}
+
+.navbar-bg-onscroll {
+    background: $primary !important;
+    opacity: inherit;
+}
+
+.td-navbar {
+    background: $primary;
+    min-height: 4rem;
+    margin: 0;
+    z-index: 32;
+
+    @include media-breakpoint-up(md) {
+        position: fixed;
+        top: 0;
+        width: 100%;
+    }
+
+
+    .navbar-brand {
+        text-transform: none;
+        text-align: middle;
+
+        .nav-link {
+            display: inline-block;
+            margin-right: -30px;
+        }
+
+        svg {
+            display: inline-block;
+            margin: 0 10px;
+            height: 30px;
+        }
+    }
+
+    .nav-link {
+        text-transform: none;
+        font-weight: $font-weight-bold;
+    }
+
+    .td-search-input {
+        border: none;
+        color: $navbar-dark-color;
+        @include placeholder {
+            color: $navbar-dark-color;
+        }
+    }
+
+    .dropdown {
+        min-width: 100px;
+    }
+
+    @include media-breakpoint-down(md) {
+        padding-right: .5rem;
+        padding-left: .75rem;
+
+        .td-navbar-nav-scroll {
+            max-width: 100%;
+            height: 2.5rem;
+            margin-top: .25rem;
+            overflow: hidden;
+            font-size: .875rem;
+
+            .nav-link {
+                padding-right: .25rem;
+                padding-left: 0;
+            }
+
+            .navbar-nav {
+                padding-bottom: 2rem;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+
+            }
+        }
+    }
+}
+
+// Icons
+#main_navbar {
+    li i {
+    padding-right: 0.5em;
+
+        &:before {
+            display: inline-block;
+            text-align: center;
+            min-width: 1em;
+        }
+    }
+  .alert {
+    background-color: inherit;
+    padding:0;
+    color: $secondary;
+    border: 0;
+    font-weight: inherit;
+
+        &:before {
+            display: inline-block;
+            font-style: normal;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            font-family: "Font Awesome 5 Free";
+            font-weight: 900; 
+            content: "\f0d9";
+            padding-left: 0.5em;
+            padding-right: 0.5em;
+        }
+    }  
+}
+
+// Foldable sidebar menu
+nav.foldable-nav {
+
+    &#td-section-nav {
+        position: relative;
+    }
+
+    &#td-section-nav label {
+        margin-bottom: 0;
+        width: 100%;
+    }
+
+    .td-sidebar-nav__section, .with-child ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .ul-1 > li {
+        padding-left: 1.5em;
+    }
+
+    ul.foldable {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
+    }
+
+    input:checked ~ ul.foldable {
+        max-height: 100000vmax;
+        transition: max-height 1s ease-in-out;
+    }
+
+    input[type=checkbox] { display: none; }
+
+    .with-child, .without-child { 
+        position: relative; 
+        padding-left: 1.3em;
+    }
+
+    .ul-1 .with-child > label:before {
+        display: inline-block;
+        font-style: normal;
+        font-variant: normal;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0da";
+        position: absolute;
+        left: 0.1em;
+        padding-left: 0.4em;
+        padding-right: 0.4em;
+        font-size: 1em;
+        color: $gray-900;
+        transition: all 0.5s;
+        &:hover{
+        transform: rotate(90deg);
+        }
+    }
+
+    .ul-1 .with-child > input:checked ~ label:before { 
+        color: $primary;
+        transform: rotate(90deg);
+        transition: transform 0.5s; 
+    }
+
+    .with-child ul { margin-top: 0.1em; }
+
+}    
+
+@media (hover: hover) and (pointer: fine) {
+
+    nav.foldable-nav {
+
+        .ul-1 .with-child > label:hover:before { 
+            color: $primary;
+            transform: rotate(30deg);
+            transition: transform 0.5s; 
+        }
+
+        .ul-1 .with-child > input:checked ~ label:hover:before { 
+            color: $primary;
+            transform: rotate(60deg) !important;
+            transition: transform 0.5s; 
+        }
+    }
+}

docs/assets/scss/_sidebar-tree.scss

@@ -2,9 +2,9 @@
 // Left side navigation
 //
 .td-sidebar-nav {
-    padding-right: 0.5rem;
-    margin-right: -15px;
-    margin-left: -15px;
+    padding-right: 0.1rem;
+    margin-right: -20px;
+    margin-left: -20px;
 
     @include media-breakpoint-up(md) {
         @supports (position: sticky) {
@@ -54,14 +54,15 @@
 
     .td-sidebar-link {
         display: block;
-        padding-bottom: 0.3rem;
+        padding-bottom: 0.15rem;
 
         &__page {
             color: $gray-700;
         }
     }
 
     a {
+        font-size: .9rem;
         &:hover {
             color: $blue;
             text-decoration: none;
@@ -101,6 +102,7 @@
         color: $td-sidebar-tree-root-color;
         border-bottom: 1px $td-sidebar-tree-root-color solid;
         margin-bottom: 1rem;
+        margin-top: 1rem;
     }
 }
 

docs/content/_index.md

@@ -47,7 +47,7 @@ Teams can offload the complexity of wiring-up applications and let Radius employ
       <a href="{{< ref networking >}}"><img src="network-logo.svg" alt="Networking logo" style="width:40%"></a>
     </td>
     <td style="width:25%;text-align:center">
-      <a href="{{< ref dapr-resources >}}"><img src="dapr-logo.svg" alt="Dapr logo" style="width:40%"></a>
+      <a href="{{< ref "guides/author-apps/dapr" >}}"><img src="dapr-logo.svg" alt="Dapr logo" style="width:40%"></a>
     </td>
   </tr>
   </table>

docs/content/community/_index.md

@@ -0,0 +1,7 @@
+---
+type: docs
+title: "Radius Community"
+linkTitle: "Community"
+description: "Information about the Radius community"
+weight: 80
+---