From 9ac340a375ac829888f2a8bbf2d3b42ec8903593 Mon Sep 17 00:00:00 2001
From: yinuj <matthewjwang5@gmail.com>
Date: Sun, 14 Nov 2021 14:46:55 -0800
Subject: [PATCH] Added a navbar similar to aiml in the rnative class page

Used the aiml source code and tweaked the includes and added a new sidebar includes for the rnative class to match the rnative blue. Added the sidebar specific scss features in the rnative scss, again mimicking the aiml original.
---
 _includes/rnative-sidebar.html |  59 ++++++++++++++++++
 _sass/_rnative.scss            |  28 +++++++++
 classes/aiml.html              |  12 ++--
 classes/rnative.html           | 110 ++++++++++++++++++++-------------
 4 files changed, 160 insertions(+), 49 deletions(-)
 create mode 100644 _includes/rnative-sidebar.html

diff --git a/_includes/rnative-sidebar.html b/_includes/rnative-sidebar.html
new file mode 100644
index 00000000..40a9c05b
--- /dev/null
+++ b/_includes/rnative-sidebar.html
@@ -0,0 +1,59 @@
+<div id="desktop-sidebar-rnative" class="top-left-grid-position">
+    {% for lesson in site.rnative %}
+    <div class="sidebar-item">
+        {% assign lessonUrl = lesson.url%}
+        {% if lesson.num == page.num %}
+        {% assign lessonUrl = "javascript:void(0)" %}
+        <span class="current-dot"></span>
+        {% endif %}
+
+        <a class="rnative-link" href="{{lessonUrl}}">#{{lesson.num}} {{lesson.title}}</a>
+    </div>
+    {% endfor %}
+</div>
+
+<div id="mobile-sidebar">
+    <div id="sidebar-btn-container">
+        <button id="open-mobile-icon" class="d-flex">Lessons</button>
+        <button id="close-mobile-icon" class="d-none">Close</button>
+    </div>
+    <div id="hamburger-content" class="d-none">
+        {% for lesson in site.rnative %}
+        {% assign lessonUrl = lesson.url%}
+        {% if lesson.num == page.num %}
+        {% assign lessonUrl = "javascript:void(0)" %}
+        {% endif %}
+
+        <div class="hamburger-item">
+            <a class="rnative-link" href="{{lessonUrl}}">#{{lesson.num}} {{lesson.title}}</a>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+    function toggleHamburgerContent() {
+        let hamburger_content = document.getElementById("hamburger-content");
+        if (hamburger_content.classList.contains("d-none")) {
+            hide("open-mobile-icon");
+            show("hamburger-content");
+            show("close-mobile-icon");
+        } else {
+            hide("hamburger-content");
+            hide("close-mobile-icon");
+            show("open-mobile-icon");
+        }
+    }
+    function show(elementID) {
+        let lessons_btn = document.getElementById(elementID);
+        lessons_btn.classList.remove("d-none");
+        lessons_btn.classList.add("d-flex");
+    }
+    function hide(elementID) {
+        let lessons_btn = document.getElementById(elementID);
+        lessons_btn.classList.remove("d-flex");
+        lessons_btn.classList.add("d-none");
+    }
+    document.getElementById("open-mobile-icon").onclick = toggleHamburgerContent;
+    document.getElementById("close-mobile-icon").onclick = toggleHamburgerContent;
+</script>
\ No newline at end of file
diff --git a/_sass/_rnative.scss b/_sass/_rnative.scss
index 0e6ab2aa..383840dc 100644
--- a/_sass/_rnative.scss
+++ b/_sass/_rnative.scss
@@ -30,3 +30,31 @@
     border-color: $rnative-blue;
   }
 }
+#desktop-sidebar-rnative{
+  top: 80px;
+  width: $ai-desktop-sidebar-total-width - 20px;
+  margin:48px 10px;
+  padding:10px 10px;
+  padding-bottom: 0px;
+  height: calc(100vh - 176px);    //176px is the top position(80px) + the total margin on the top and bottom (48px *2)
+  max-height: $ai-desktop-sidebar-content-height;
+  border: solid;
+  border-radius: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: -webkit-sticky;
+  position: sticky;
+  flex-shrink: 0;
+  border-color: $rnative-blue;
+  z-index: 1;
+  display:inline-block;
+  @media (max-width: $desktop-width-xl) and (min-width: $desktop-width) {
+      grid-row: 1 / span 2;
+  }
+  @media (max-width: $desktop-width) {
+      display: none;
+  }
+}
+#desktop-sidebar-rnative .sidebar-item{
+  padding-bottom: 15px;
+}
diff --git a/classes/aiml.html b/classes/aiml.html
index 2a5f7923..5a2032f7 100644
--- a/classes/aiml.html
+++ b/classes/aiml.html
@@ -10,8 +10,8 @@
 		<h1 class="title page-title">Introduction to AI & ML</h1>
 		<p class="title text-2x no-margin">Class & Curriculum Outline</p>
 		<hr class="divider-ai" />
-		<p>Learn machine learning, with us! A joint collaboration with <a class="ai-link" href="https://uclaacmai.github.io"
-				target="_blank" rel="noopener noreferrer">ACM AI Outreach</a>.</p>
+		<p>Learn machine learning, with us! A joint collaboration with <a class="ai-link"
+				href="https://uclaacmai.github.io" target="_blank" rel="noopener noreferrer">ACM AI Outreach</a>.</p>
 
 		<h2 class="title">
 			Brief Overview
@@ -51,12 +51,14 @@ <h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
 				</div>
 				<div class="button-container">
 					{% if lesson.slides_link %}
-					<a class="button button-sm button-ai" href="{{lesson.slides_link}}" target="_blank" rel="noopener noreferrer">
+					<a class="button button-sm button-ai" href="{{lesson.slides_link}}" target="_blank"
+						rel="noopener noreferrer">
 						<span class="fa fa-chalkboard-teacher"></span> slides
 					</a>
 					{% endif %}
 					{% if lesson.colab_link %}
-					<a class="button button-sm button-ai" href="{{lesson.colab_link}}" target="_blank" rel="noopener noreferrer">
+					<a class="button button-sm button-ai" href="{{lesson.colab_link}}" target="_blank"
+						rel="noopener noreferrer">
 						<span class="fa fa-code"></span> code
 					</a>
 					{% endif %}
@@ -88,4 +90,4 @@ <h3 class="title">{{subcategory.title}}</h3>
 		</ul>
 		{% endfor %}
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/classes/rnative.html b/classes/rnative.html
index ea9a6123..dbcff6dc 100644
--- a/classes/rnative.html
+++ b/classes/rnative.html
@@ -2,57 +2,79 @@
 layout: default
 title: "App Development with React Native"
 permalink: /classes/rnative
+fw: true
 ---
-<h1 class="title page-title">App Development with React Native</h1>
-
-<p class="title text-2x no-margin">Class & Curriculum Outline</p>
-<hr class="divider-rnative" />
-<p>Learn mobile web development with us! </p>
-
-<h2 class="title">
-    Brief Overview
-</h2>
-
-<p>
-    A year-long course that aims to give students a wide set of practical skills and project experience: students learn how to build websites with HTML, CSS, and Javascript, and then use those tools to build cross-platform mobile apps with React Native.
-</p>
-<p>
-    All of our course materials are open-source! You can click into each lesson to see the notes that we use to teach the class. On top of that, we've put all of our code examples on GitHub; you can see them in the <a class="rnative-link" href="{{site.data.classes[3].github}}">repository.</a>
-</p>
-<p>
-    {% comment %} TODO - change this to a map lookup {% endcomment %}
-    Have any questions? Feel free to reach out to <a class="rnative-link" href="{{site.baseurl}}/team/{{site.data.classes[3].lead.hash}}">Matt</a>, our school lead, or anybody else on the Teach LA team!
-</p>
-
-
-<h2 class="title" id="lessons">
-    Lessons
-</h2>
-
-<div class="row-desktop-ratio-1-1-1 mb-32">
-    {% for lesson in site.rnative %}
-        <div class="rnative-lesson-card">
-            <div class="lesson-card-content">
-                <h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
-                    <a class="rnative-link" href="{{lesson.url}}">{{lesson.title}}</a>
-                </h3>
-                {{lesson.desc}}
-            </div>
-            <div class="button-container">
-                {% if lesson.course_id %}
+<div class="page-container">
+    {% include rnative-sidebar.html %}
+    <div class="main-content container-restricted top-left-grid-position">
+        <h1 class="title page-title">App Development with React Native</h1>
+
+        <p class="title text-2x no-margin">Class & Curriculum Outline</p>
+        <hr class="divider-rnative" />
+        <p>Learn mobile web development with us! </p>
+
+        <h2 class="title">
+            Brief Overview
+        </h2>
+
+        <p>
+            A year-long course that aims to give students a wide set of practical skills and project experience:
+            students
+            learn
+            how to build websites with HTML, CSS, and Javascript, and then use those tools to build cross-platform
+            mobile
+            apps
+            with React Native.
+        </p>
+        <p>
+            All of our course materials are open-source! You can click into each lesson to see the notes that we use to
+            teach
+            the class. On top of that, we've put all of our code examples on GitHub; you can see them in the <a
+                class="rnative-link" href="{{site.data.classes[3].github}}">repository.</a>
+        </p>
+        <p>
+            {% comment %} TODO - change this to a map lookup {% endcomment %}
+            Have any questions? Feel free to reach out to <a class="rnative-link"
+                href="{{site.baseurl}}/team/{{site.data.classes[3].lead.hash}}">Matt</a>, our school lead, or anybody
+            else
+            on
+            the Teach LA team!
+        </p>
+
+
+        <h2 class="title" id="lessons">
+            Lessons
+        </h2>
+
+        <div class="row-desktop-ratio-1-1-1 mb-32">
+            {% for lesson in site.rnative %}
+            <div class="rnative-lesson-card">
+                <div class="lesson-card-content">
+                    <h3 class="title no-margin"><span class="text-normal">#{{lesson.num}}</span>
+                        <a class="rnative-link" href="{{lesson.url}}">{{lesson.title}}</a>
+                    </h3>
+                    {{lesson.desc}}
+                </div>
+                <div class="button-container">
+                    {% if lesson.course_id %}
                     {% comment %} TODO - change this to a map lookup {% endcomment %}
 
-                    <a class="button button-sm button-rnative" href="{{site.data.classes[3].github}}/{{lesson.course_id}}" target="_blank" rel="noopener noreferrer">
+                    <a class="button button-sm button-rnative"
+                        href="{{site.data.classes[3].github}}/{{lesson.course_id}}" target="_blank"
+                        rel="noopener noreferrer">
                         <span class="fab fa-github"></span> GitHub
                     </a>
-                {% endif %}
-                {% if lesson.code_link %}
-                    <a class="button button-sm button-rnative" href="{{lesson.code_link}}" target="_blank" rel="noopener noreferrer">
+                    {% endif %}
+                    {% if lesson.code_link %}
+                    <a class="button button-sm button-rnative" href="{{lesson.code_link}}" target="_blank"
+                        rel="noopener noreferrer">
                         <span class="fa fa-code"></span> code
                     </a>
-                {% endif %}
+                    {% endif %}
 
+                </div>
             </div>
+            {% endfor %}
         </div>
-    {% endfor %}
-</div>
+    </div>
+</div>
\ No newline at end of file