nodejs.org/packages/ui-components/src/Containers/NavBar/index.module.css at b98e45d456e91546fa2c64faec7092ff28d42494 · nodejs/nodejs.org · 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
@reference "../../styles/index.css";

.container {
  @apply border-neutral-200
    bg-white
    xl:h-16
    xl:border-b
    xl:px-8
    dark:border-neutral-900
    dark:bg-neutral-950;

  .innerContainer {
    @apply max-w-10xl
      xl:mx-auto
      xl:flex
      xl:h-16
      xl:flex-row
      xl:items-center
      xl:gap-8;

    .nodeIconAndMobileItemsToggler {
      @apply flex
        h-16
        shrink-0
        items-center
        border-b
        border-neutral-200
        px-4
        xl:flex
        xl:h-full
        xl:items-center
        xl:border-0
        xl:px-0
        dark:border-neutral-900;

      .nodeIconWrapper {
        @apply h-[30px]
          flex-1;
      }

      .sidebarItemTogglerLabel {
        @apply block
          cursor-pointer
          xl:hidden;

        .navInteractionIcon {
          @apply size-6;
        }
      }
    }

    .sidebarItemToggler {
      @apply absolute
        right-4
        -z-10
        size-6
        -translate-y-[200%]
        appearance-none
        opacity-0;
    }

    .main {
      @apply flex-1
        flex-col
        justify-between
        gap-4
        xl:flex
        xl:flex-row
        xl:items-center;
    }

    .navItems {
      @apply flex
        flex-col
        gap-0
        border-b
        border-neutral-200
        p-4
        xl:flex-1
        xl:flex-row
        xl:gap-1
        xl:border-0
        xl:p-0
        dark:border-neutral-900;
    }

    .actionsWrapper {
      @apply flex
        flex-row
        flex-wrap
        items-center
        justify-between
        gap-2
        border-b
        border-neutral-200
        p-4
        sm:flex-nowrap
        xl:basis-96
        xl:border-0
        xl:p-0
        dark:border-neutral-900;

      span.searchButtonSkeleton {
        @apply my-px
          mr-2
          grow
          rounded-xl;

        &:empty {
          @apply h-10;
        }
      }

      span.themeToggleSkeleton {
        @apply size-9
          rounded-md
          py-4;
      }

      .ghIconWrapper {
        @apply size-9
          rounded-md
          p-2;

        svg {
          @apply fill-neutral-700
            dark:fill-neutral-300;
        }

        &:hover {
          @apply bg-neutral-100
            dark:bg-neutral-900;
        }
      }
    }
  }
}

.navBarWrapper {
  @apply xl:sticky
    xl:top-0
    xl:z-50
    xl:transition-transform
    xl:duration-300
    xl:ease-in-out;
}

.navBarWrapper.hidden {
  @apply xl:-translate-y-full;
}