flowbite-angular/apps/docs/src/app/app.component.html at f3ca92ecde4b5a91c6111c4636dcd78eaf14a860 · themesberg/flowbite-angular · 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
<ng-doc-root
  [sidebar]="!isLandingPage"
  [noWidthLimit]="isLandingPage"
  [footerContent]="footerContent">
  <nav
    flowbiteNavbar
    ngDocCustomNavbar
    fixed
    color="primary">
    <div class="flex flex-1 flex-row items-center gap-2">
      @if (!isLandingPage) {
        <button
          flowbiteNavbarIconItem
          class="inline-flex! lg:hidden!"
          (click)="sidebarService.toggle()">
          <span class="sr-only">Sidebar toggle</span>
          <flowbite-icon
            name="bars"
            class="size-5 stroke-2" />
        </button>
      }
      <a
        flowbiteNavbarBrand
        [routerLink]="['/']">
        <img
          src="favicon.svg"
          class="h-8"
          alt="Flowbite Logo" />
        <span
          class="hidden self-center text-2xl font-semibold whitespace-nowrap xl:block dark:text-white">
          Flowbite Angular
        </span>
      </a>
      <ng-doc-search class="hidden pl-2 lg:block" />
    </div>

    <div flowbiteNavbarContent>
      <a
        flowbiteNavbarItem
        [routerLink]="['/docs']">
        Docs
      </a>
      <a
        flowbiteNavbarItem
        [routerLink]="['/docs', 'getting-started', 'quickstart']">
        Quickstart
      </a>
      <a
        flowbiteNavbarItem
        href="https://flowbite.com/figma"
        target="_blank"
        rel="noopener">
        Figma
      </a>
      <a
        flowbiteNavbarItem
        href="https://flowbite.com"
        target="_blank"
        rel="noopener">
        Flowbite
      </a>
    </div>

    <div class="flex flex-row items-center justify-start">
      <a
        flowbiteNavbarIconItem
        href="https://storybook.flowbite-angular.com"
        target="_blank"
        rel="noopener">
        <flowbite-icon
          name="storybook"
          class="size-5 stroke-2" />
      </a>
      <a
        flowbiteNavbarIconItem
        href="https://github.com/themesberg/flowbite-angular"
        target="_blank"
        rel="noopener">
        <flowbite-icon
          name="github"
          class="size-5 stroke-2" />
      </a>
      <a
        flowbiteNavbarIconItem
        href="https://discord.gg/4eeurUVvTy"
        target="_blank"
        rel="noopener">
        <flowbite-icon
          name="discord"
          class="size-5 stroke-2" />
      </a>
      <a
        flowbiteNavbarIconItem
        href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A"
        target="_blank"
        rel="noopener">
        <flowbite-icon
          name="youtube"
          class="size-5 stroke-2" />
      </a>

      <button
        type="button"
        flowbiteThemeToggle
        color="primary">
        <span class="sr-only">Theme toggle</span>
      </button>

      <button
        type="button"
        flowbiteNavbarToggle>
        <span class="sr-only">Navbar toggle</span>
        <flowbite-icon
          name="bars"
          class="size-5 stroke-2" />
      </button>

      <div class="px-1"></div>

      <span
        flowbiteBadge
        size="sm"
        color="primary">
        {{ flowbiteAngularVersion() }}
      </span>
    </div>
  </nav>

  <ng-doc-sidebar class="mt-2" />

  <div class="mt-2">
    <router-outlet />
  </div>

  <ng-template #footerContent>
    <section class="flex flex-col items-center">
      <div class="flex flex-col items-center gap-6 px-4 py-6 md:gap-8 md:py-8">
        <div class="flex flex-row items-center justify-between border-t-gray-200 pt-6 md:pt-8">
          <div
            class="mx-auto flex flex-col items-start justify-center gap-4 md:flex-row md:items-center md:gap-5">
            <div class="flex flex-row items-center gap-3">
              <img
                src="favicon.svg"
                class="h-8 w-8"
                alt="Flowbite Logo" />
              <span class="text-2xl font-semibold text-gray-900 dark:text-white"> Flowbite </span>
            </div>
            <p class="text-sm font-normal text-gray-500 dark:text-gray-400">
              © 2019-{{ currentYear() }} Flowbite™ is a registered trademark. All Rights Reserved.
            </p>
          </div>
        </div>
      </div>
    </section>
  </ng-template>
</ng-doc-root>