feat: add support links to secondary nav

dash/templates/dash/common/components/primary-nav.html

@@ -23,7 +23,7 @@
       >
     </div>
     <div class="nav__link-container">
-      <a class="nav__link" rel="noreferrer" href="{% url 'accounts.login' %}"
+      <a class="nav__link" rel="noreferrer" href="{% url 'support.home' %}"
         >Support</a
       >
     </div>

dash/templates/dash/common/components/secondary-nav.html

@@ -5,7 +5,17 @@
     </div>
     <div class="secondary-nav__options">
       <a href="/foo" class="secondary-nav__option-link">Instances</a>
-      <a href="/foo" class="secondary-nav__option-link">Support</a>
+      <details class="secondary-nav__options-group" {{ open_support }}>
+        <summary><a href="{% url 'support.home' %}">Support</a></summary>
+        <div class="secondary-nav__options-group-options">
+          <a href="{% url 'support.new' %}" class="secondary-nav__option-link">
+            New Ticket
+          </a>
+          <a href="{% url 'support.view' %}" class="secondary-nav__option-link">
+            Open Tickets
+          </a>
+        </div>
+      </details>
       <a href="/foo" class="secondary-nav__option-link">Billing</a>
     </div>
     <div class="secondary-nav__options">

static/css/main.css

@@ -368,19 +368,6 @@ pre {
   text-align: right;
 }
 
-details,
-summary {
-  display: "inline";
-  margin: 0;
-  padding: 0;
-}
-
-summary::marker {
-  content: "";
-  margin: 0;
-  padding: 0 5px;
-}
-
 .line-link {
   display: block;
 }
@@ -476,7 +463,7 @@ footer {
 /* dashbaord starts */
 
 .panel__container {
-/*  background-color: green; */
+  /*  background-color: green; */
 }
 
 /* secondary nav starts */
@@ -499,7 +486,6 @@ footer {
   box-sizing: border-box;
 }
 
-
 .secondary-nav__options {
   display: flex;
   flex-direction: column;
@@ -514,6 +500,34 @@ footer {
   background-color: lightslategray;
 }
 
+.secondary-nav__options-group {
+  padding: 20px 0 20px 20px;
+}
+
+.secondary-nav__options-group-options {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+}
+
+.secondary-nav__options-group > summary {
+  list-style: none;
+}
+.secondary-nav__options-group > summary::-webkit-details-marker {
+  display: none;
+}
+
+.secondary-nav__options-group > summary::after {
+  margin-left: 30px;
+  content: " ►";
+}
+
+
+.secondary-nav__options-group[open] > summary::after {
+  margin-left: 30px;
+  content: " ▼";
+}
+
 /* secondary nav ends */
 
 .dash__main {