tomcritchlow.github.io/_includes/2024-nav.html at 42a3e4a6720c748eae0665597a6307cb9c042fa8 · tomcritchlow/tomcritchlow.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<style>
  #nav {
      display:none
  }

  #maincontent {
      margin-left:0;
  }

  #topbar {
       display:block
  }

  @media screen and (min-width: 60em)  {
      #nav {
          display:block;
          width:223px;
      }

      #maincontent {
          margin-left:223px;
      }

      #topbar {
          display:none
      }
  }
</style>


<div id="topbar" class="dn-l db w-100 pa3 bg-near-white z-1" style="position:sticky;top:0px">
    <a class="link dim dark-gray f6 f5-l dib ttu pt2 pt0-l dtc-l v-mid newgreen b" href="/" title="Home">TOM CRITCHLOW</a>
    <div class="fr dib dn-l pt1">
        <div id="hamburger" class="hamburger hamburger--squeeze">
                <div class="hamburger-box">
                  <div class="hamburger-inner"></div>
                </div>
              </div>

    </div>
</div>

<div class="flex items-stretch h-100 w-100">


    <div id="nav" class="w5 bg-near-white f7 fw6 br-l bt-0-l bb-0-l bt bb b--black-10 fixed dn db-l top-0-l left-0 overflow-y-scroll z-1 pt2 pt0-l h-100 w-100">


      <a class="db-l dn  items-center ma2 ph3  pa2 mv3 link fw8 f6 br3 newgreen" href="/">
        TOM CRITCHLOW
      </a>

{% for link in site.data.nav.main_links %}

<a class="db flex items-center mh3 pa2 bg-animate hover-bg-white link black br3 ttu" id="{{link.name}}" href="{{link.url}}">
    <i data-feather="{{link.feathericon}}" class="h1 pr3"></i> <span class="navname">{{link.name}}</span>
  </a>
{% endfor %}

{% for group in site.data.nav.groups %}
<div class="mv4">
    <div class="newgreen mh3 ph2 mv2 navname">{{group.group_name}}</div>

{% for link in group.links %}
<a class="{% if link.name == 'Writing' and page.date %}bg-white{% endif %} db flex items-center mh3 pa2 bg-animate hover-bg-white link black br3 ttu" id="{{link.name}}" href="{{link.url}}">
    <i data-feather="{{link.feathericon}}" class="h1 pr3"></i> <span class="navname">{{link.name}}</span>
  </a>
{% endfor %}
</div>
{% endfor %}

      </div>

<script>

var $hamburger = $("#hamburger");
            $hamburger.on("click", function(e) {

              $hamburger.toggleClass("is-active");
              $("#nav").toggleClass("dn");

            });

            feather.replace();

function addClassBasedOnUrlWithSwitch() {
  // Get the current URL
  const url = window.location.href;

  switch (true) {
    case url == "https://tomcritchlow.com/":
      const div0 = document.getElementById("Home");
      if (div0) {
        div0.classList.add('bg-white');
      }
      break;
    case url.includes("https://tomcritchlow.com/?"):
      const div1 = document.getElementById("Home");
      if (div1) {
        div1.classList.add('bg-white');
      }
      break;
    case url.includes("/about/"):
      const div2 = document.getElementById("About me");
      if (div2) {
        div2.classList.add('bg-white');
      }
      break;
    case url.includes("/writing/"):
      const div3 = document.getElementById("Writing");
      if (div3) {
        div3.classList.add('bg-white');
      }
      break;
    case url.includes("/newsletter"):
      const div4 = document.getElementById("Newsletter");
      if (div4) {
        div4.classList.add('bg-white');
      }
      break;
    case url.includes("/search"):
      const div5 = document.getElementById("Search");
      if (div5) {
        div5.classList.add('bg-white');
      }
      break;
    case url.includes("/start-here"):
      const div6 = document.getElementById("Start here");
      if (div6) {
        div6.classList.add('bg-white');
      }
      break;
    case url.includes("/topics/"):
      const div7 = document.getElementById("Topics");
      if (div7) {
        div7.classList.add('bg-white');
      }
      break;

    default:
      // Code to run if none of the above cases are true
      break;
  }
}

// Call the function
addClassBasedOnUrlWithSwitch();


</script>

    <div class="w-100 h-100" id="maincontent">
      <div class="mw8 center w-100 h-100">